코드랩 레퍼런스
Parallax - Side Nav 본문
See the Pen Parallax - Side Nav by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
/* font-family: 'Lato', sans-serif; */
/* reset */
*{margin:0; padding:0}
li,ul {list-style:none}
a {text-decoration:none}
/* nav */
#side-nav {
position: fixed; left:-300px; top:0;
width: 300px; height: 100vh;
background:rgba(255,255,255,0.5);
font-family: 'Lato', sans-serif;
transition: left 0.3s cubic-bezier(0.95, 0.03, 0.07, 0.99);
}
#side-nav h1 {
padding: 60px 20px 40px 20px;
color: #fff;
font-size: 34px; font-weight:700;
text-align:center;
text-shadow:0px 1px 1px rgba(0,0,0,0.1);
}
#side-nav li {
border-left:5px solid transparent;
}
#side-nav li a {
color:#fff; text-decoration:none;
padding: 14px 20px; display:block;
text-transform: uppercase;
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
}
#side-nav li.active {
background: rgba(255,255,255,0.4);
border-left: 5px solid #fff;
}
#side-nav .navBtn {
position:absolute; right:-60px; top:10px;
display: block; width: 50px; height: 50px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
text-align:center;
line-height: 50px;
color: #fff;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
}
#side-nav .navBtn:hover {
background: rgba(255,255,255,0.6);
}
#side-nav.open {
left:0;
}
/* contents */
#contents {
font-size: 60px; color:#fff;
text-align: center;
font-family: 'Lato', sans-serif;
}
#contents > div {
height: 100vh; line-height: 100vh;
}
#contents > div h2 {
font-weight: 100;
}
#contents > div h2 strong {
font-weight: 700;
}
/* section */
#section1 {background: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
#section2 {background: radial-gradient(ellipse farthest-corner at center left, #cbf49a 0%, #1ea623 100%);}
#section3 {background: radial-gradient(ellipse farthest-corner at center right, #ffee75 0%, #ff8930 100%);}
#section4 {background: radial-gradient(ellipse farthest-corner at center bottom, #6beace 0%, #2e9aa4 100%);}
#section5 {background: radial-gradient(ellipse farthest-corner at left top, #69d2fb 0%, #20438e 100%);}
#section6 {background: radial-gradient(ellipse farthest-corner at left bottom, #f093fb 0%, #f5576c 100%);}
</style>
</head>
<body>
<nav id="side-nav">
<h1>Side Menu Bar</h1>
<ul>
<li class="active"><a href="#section1">Intro</a></li>
<li><a href="#section2">Skill</a></li>
<li><a href="#section3">Coding</a></li>
<li><a href="#section4">Design</a></li>
<li><a href="#section5">About</a></li>
<li><a href="#section6">Contact</a></li>
</ul>
<a href="#" class="navBtn">Open</a>
</nav>
<section id="contents">
<div id="section1">
<div class="container">
<div class="sec1">
<h2>시간은 <strong>금이다.</strong></h2>
</div>
</div>
</div>
<div id="section2">
<div class="container">
<div class="sec2">
<h2>삶이 있는 한 <strong>희망</strong>은 있다</h2>
</div>
</div>
</div>
<div id="section3">
<div class="container">
<div class="sec3">
<h2>피할수 없으면 <strong>즐겨라</strong></h2>
</div>
</div>
</div>
<div id="section4">
<div class="container">
<div class="sec4">
<h2>먼저핀 꽃은 <strong>먼저진다</strong></h2>
</div>
</div>
</div>
<div id="section5">
<div class="container">
<div class="sec5">
<h2>모든 인생은 <strong>실험이다</strong></h2>
</div>
</div>
</div>
<div id="section6">
<div class="container">
<div class="sec6">
<h2>내일은 내일의 <strong>태양이 뜬다</strong></h2>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var nav = $("#side-nav ul li");
var contents = $("#contents > div");
var sideBar = $("#side-nav");
$(".navBtn").click(function(){
//sideBar.css("left","0px");
//sideBar.addClass("open");
sideBar.toggleClass("wow");
if(sideBar.hasClass("wow")){
sideBar.animate({"left":"0px"},200,"easeInOutCirc");
$(".navBtn").text("Close");
} else {
sideBar.animate({"left":"-300px"},200, "easeInOutCirc");
$(".navBtn").text("Open");
}
});
nav.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
//alert(index);
var section = contents.eq(index);
var offset = section.offset().top;
//alert(offset);
$("html,body").animate({scrollTop:offset},600,"easeInOutExpo");
});
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if(wScroll >= contents.eq(0).offset().top){
nav.removeClass("active");
nav.eq(0).addClass("active");
}
if(wScroll >= contents.eq(1).offset().top){
nav.removeClass("active");
nav.eq(1).addClass("active");
}
if(wScroll >= contents.eq(2).offset().top){
nav.removeClass("active");
nav.eq(2).addClass("active");
}
if(wScroll >= contents.eq(3).offset().top){
nav.removeClass("active");
nav.eq(3).addClass("active");
}
if(wScroll >= contents.eq(4).offset().top){
nav.removeClass("active");
nav.eq(4).addClass("active");
}
if(wScroll >= contents.eq(5).offset().top){
nav.removeClass("active");
nav.eq(5).addClass("active");
}
});
</script>
</body>
</html>
Share
Ad
Comments