- Parallax
- Parallax - 패럴럭스 사이트 인트로
- Parallax - 패럴럭스 기본 틀 만들기
- Parallax - 패럴럭스 기본 = 메뉴 연동하기
- Parallax - 패럴럭스 닷 메뉴 만들기
- Parallax - 패럴럭스 메뉴 + 닷 메뉴 만들기
- Parallax - 패럴럭스 메뉴 고정시키기
- Parallax - 패럴럭스 메뉴 숨기기
- Parallax - 패럴럭스 사이드 메뉴 만들기
- Parallax - 패럴럭스 사이드 메뉴 만들기2
- Parallax - 패럴럭스 마우스 오버 메뉴 만들기
- Parallax - 패럴럭스 반응형 메뉴 만들기
- Parallax - 패럴럭스 텍스트 애니메이션1
- Parallax - 패럴럭스 텍스트 애니메이션2
- Parallax - 패럴럭스 텍스트 애니메이션3
- Parallax - 패럴럭스 텍스트 애니메이션4
- Parallax - 패럴럭스 이미지 애니메이션1
- Parallax - 패럴럭스 이미지 애니메이션2
- Parallax - 패럴럭스 이미지 애니메이션3
- Parallax - 패럴럭스 이미지 애니메이션4
[Parallax] 패럴럭스 기본 = 메뉴 연동하기
패럴럭스의 기본 틀을 만들었으면 이젠 메뉴랑 연동하겠습니다. 현재 어떤 메뉴를 선택했는지 알려주는 Active 상태를 구현하겠습니다. 기본 틀에서 이어서 작업을 하겠습니다.
완성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Parallax</title>
</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>
</body>
</html>
#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: 20px 10px; text-decoration: none; color: #fff; display:inline-block;}
/* 새롭게 추가 */
#nav ul li.active a {border-bottom: 3px solid #fff;}
#contents {text-align: center; font-size: 90px; 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;}
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);
});
/* 새롭게 추가 */
$(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");
}
});