코드랩 레퍼런스

Parallax Basic - Menu 본문

SAMPLE

Parallax Basic - Menu

webstoryboy 2018. 1. 23. 18:00

패럴랙스 사이트(ParallaxScrolling)와 메뉴를 연동하여 각 섹션에 해당하는 메뉴를 표시해주는 예제입니다. Parallax Basic 예제에서 추가되는 작업입니다.
offset값과 scrollTop값이 같으면 화면에 해당 섹션이 보입니다. scroll값이 offset값과 같거나 크면 메뉴에 active라는 클래스가 붙습니다. 이런 원리를 이용하면 패럴랙스의 기본이 완성이 됩니다.

Jquery

<script>
	var nav = $("#nav ul li");
	var contents = $("#contents > div");

	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);
        $(".offset_top").text(offset);        //offset 값을 구해서 표시해줍니다.
		$("html, body").animate({ scrollTop:offset},400);
	});

	$(window).scroll(function(){
		var wScroll = $(this).scrollTop();
        $(".scroll_top").text(wScroll);        //스크롤 값을 구해서  표시해줍니다.

		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 -3){
			nav.removeClass("active");
			nav.eq(5).addClass("active");
		}
	});
</script>

Property

  • .eq() : .eq() 메서드는 선택한 요소의 인덱스 번호를 갖는 요소를 반환합니다.
  • .offset() : .offset() 메서드는 선택한 요소의 좌표 값(문서 기준)을 설정하거나 반환합니다.
  • .animate()
  • .scrollTop() : .scrollTop() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다.
  • .index() : .index() 메서드는 이벤트가 발생한 요소의 인덱스 값을 반환합니다
  • .addClass() : .addClass() 메서드는 하나 이상의 클래스를 추가합니다.
  • .removeClass() : .removeClass() 메서드는 하나 이상의 클래스를 제거합니다.

Code

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery)</title>
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
		<style>
			* {margin:0; padding:0;}
			#nav {overflow:hidden; position:fixed; left:0; top:0; width: 100%; background-color: rgba(255,255,255,0.6);}
			#nav h1 {float:left; color: #fff; font-size:40px; padding:12px 5px 5px 20px; font-weight:900;   }
			#nav ul {float:right;}
			#nav ul li {display: inline;}
			#nav ul li a {padding: 23px 10px 20px 10px; text-decoration: none; color: #fff; display:inline-block;}
			#nav ul li.active a {border-bottom: 3px solid #ff4343; color:#ff4343;}

			#contents {text-align: center; font-size: 50px; color:#fff; font-family: 'Roboto', sans-serif; font-weight:100;}
			#contents > div {height: 100vh; line-height: 100vh;}
			#section1 {background-color: #42a5f5;}
			#section2 {background-color: #4db6ac;}
			#section3 {background-color: #4dd0e1;}
			#section4 {background-color: #4fc3f7;}
			#section5 {background-color: #c0ca33;}
			#section6 {background-color: #7cb342;}
		</style>
	</head>
<body>

	<nav id="nav">
		<h1>WEB'S</h1>
		<ul>
			<li class="active"><a href="#section1">Menu1</a></li>
			<li><a href="#section2">Menu2</a></li>
			<li><a href="#section3">Menu3</a></li>
			<li><a href="#section4">Menu4</a></li>
			<li><a href="#section5">Menu5</a></li>
			<li><a href="#section6">Menu6</a></li>
		</ul>
	</nav>

	<div id="contents">
		<div id="section1">We love What You do.</div>
		<div id="section2">Make hay while the sun shines</div>
		<div id="section3">All in my dream</div>
		<div id="section4">Be Strict With Myself</div>
		<div id="section5">Can't Stop to Dream</div>
		<div id="section6">No Pains No Gain</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script>
		var nav = $("#nav ul li");
		var contents = $("#contents > div");

		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},400);
		});

		$(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 -3){
				nav.removeClass("active");
				nav.eq(5).addClass("active");
			}
		});
	</script> 
</body>
</html>

Share

Related Articles more
공유하기 링크

Ad

Comments