코드랩 레퍼런스

Parallax Basic 본문

SAMPLE

Parallax Basic

webstoryboy 2018. 1. 5. 21:54

패럴랙스 사이트(ParallaxScrolling)의 가장 기본이 되는 예제입니다. 각 버튼의 값과 각각의 컨텐츠 값을 ainmate로 연결해주는 작업입니다. 그럴려면 스크롤 값을 구해서 body한테 넣어주면 자연스러운 애니메이션이 형성됩니다.

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

Jquery

<script>
var nav = $("#nav ul li");                                  //버튼을 변수에 할당
var contents = $("#contents > div");           //컨텐츠를 변수에 할당

nav.click(function(){
	var target = $(this);					//6개의 버튼 타겟을 변수 target 할당
	var index = target.index();		        //6개의 버튼에 인덱스를 할당
	//alert(index);
	var section = contents.eq(index);		//6개의 컨텐츠에 인덱스 할당
	var offset = section.offset().top;	        //6개의 컨텐츠의 offset 값을 할당
	//alert(offset);
	$("html, body").animate({ scrollTop:offset},400);         //ofset의 값을 scrollTop 값에 넣고 0.4초 동안 애니메이션 해줍니다.
});
</script>

Property

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

Code

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery)</title>
		<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;}

			#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>

		<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
	</head>
<body>
	<nav id="nav">
		<h1>WEB'S</h1>
		<ul>
			<li><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();     
			var section = contents.eq(index);   
			var offset = section.offset().top;  
			$("html, body").animate({ scrollTop:offset},400);
		});
	</script> 
</body>
</html>

Share

Related Articles more
공유하기 링크

Ad

Comments