코드랩 레퍼런스

Parallax - Responsive - Nav 본문

SAMPLE

Parallax - Responsive - Nav

webstoryboy 2018. 2. 7. 20:48

See the Pen Parallax - Responsive Nav by Webstoryboy (@webstoryboy) on CodePen.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive Nav</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 */
		#nav {	
			position: fixed; left: 0; top: 0; z-index: 100;
			width: 100%; height: 56px; 
			text-align: center;
			transition: top 0.3s ease-in-out;
		}
		.menu li {
			float: left; 
			width: 16.6666%;
		}
		.menu li a {
			display: block;
			background-color:rgba(0,0,0,0.3);
			color: #fff;
			padding:20px;
			text-decoration: none;
			text-transform: uppercase;
		}
		.menu li.active a {
			background-color:rgba(0,0,0,0.5)
		} 
		.mNav {
			overflow:hidden; 
			display: none; 
			background-color:rgba(0,0,0,0.3);
		}
		.mNav h1 {
			float: left; 
			font-size: 34px; font-weight: 900;
			color: #fff; 
			padding:15px 13px 10px 13px; 
		}
		.mNav .bars {
			float: right; 
			width: 40px; 
			height: 40px; 
			position: relative; 
			cursor: pointer;
			margin-right:24px; margin-top:13px;
		}
		.mNav .bars .bar {
			position: absolute; 
			width: 40px; height: 4px; 
			background-color: #fff; 
			margin: 5px 0;
		}
		.mNav .bars .bar.one {top:0; left;0;}
		.mNav .bars .bar.two {top: 10px; left: 0;}
		.mNav .bars .bar.three {top: 20px; 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 right, #ffee75 0%, #ff8930 100%);}
		#section2 {background: radial-gradient(ellipse farthest-corner at center left, #cbf49a 0%, #1ea623 100%);}
		#section3 {background: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 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%);}
		/* mediaquery */
		@media (max-width:960px){
			.menu {display: none;}
			.menu li {float:none; width:100%; background: rgba(0,0,0,0.1)}
			.mNav {display: block;}
		}
	</style>
</head>
<body>
	<nav id="nav">
		<div class="mNav">
			<h1>WEB'S</h1>
			<div class="bars">
				<div class="bar one"></div>
				<div class="bar two"></div>
				<div class="bar three"></div>
			</div>
		</div>
		
		<ul class="menu">
			<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>
	</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>
		$(".bars").click(function(){
			$(".menu").slideToggle();
		});

		$(window).resize(function(){
			var wWidth = $(window).width();
			if(wWidth > 400 &&  $(".menu").is(":hidden")){
				$(".menu").removeAttr("style");
			}
		});

		var menu = $(".menu li");
		var contents = $("#contents > div");

		menu.click(function(e){
			e.preventDefault();
			var target = $(this);
			var index = target.index();
			var section = contents.eq(index);
			var offset = section.offset().top;
			$("html,body").animate({scrollTop:offset},600,"easeInOutExpo");
		});

		$(window).scroll(function(){
			var wScroll = $(this).scrollTop();
			
			if(wScroll >= contents.eq(0).offset().top){
				menu.removeClass("active");
				menu.eq(0).addClass("active");
			}
			if(wScroll >= contents.eq(1).offset().top){
				menu.removeClass("active");
				menu.eq(1).addClass("active");
			}
			if(wScroll >= contents.eq(2).offset().top){
				menu.removeClass("active");
				menu.eq(2).addClass("active");
			}
			if(wScroll >= contents.eq(3).offset().top){
				menu.removeClass("active");
				menu.eq(3).addClass("active");
			}
			if(wScroll >= contents.eq(4).offset().top){
				menu.removeClass("active");
				menu.eq(4).addClass("active");
			}
			if(wScroll >= contents.eq(5).offset().top){
				menu.removeClass("active");
				menu.eq(5).addClass("active");
			}
		});
	</script>
</body>
</html>

Share

Ad

Comments