코드랩 레퍼런스

Parallax - Side Nav 본문

SAMPLE

Parallax - Side Nav

webstoryboy 2018. 2. 7. 21:10

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