- 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] 패럴럭스 텍스트 애니메이션
패럴럭스 사이트 뿐만 아니라 평소에도 많이 쓸 수 있는 사이드 메뉴 스타일입니다.
완성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>패럴럭스 사이드 메뉴 만들기2</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="dot">
<ul>
<li class="active"><a href="#section1"><span>Intro</span></a></li>
<li><a href="#section2"><span>Skill</span></a></li>
<li><a href="#section3"><span>Website</span></a></li>
<li><a href="#section4"><span>Work</span></a></li>
<li><a href="#section5"><span>About</span></a></li>
<li><a href="#section6"><span>Contact</span></a></li>
</ul>
</div>
<div id="contents">
<div id="section1">Think different</div>
<div id="section2">Raise Your Head</div>
<div id="section3">The Life is only once</div>
<div id="section4">I must do what I want to do</div>
<div id="section5">Time is Life itself</div>
<div id="section6">There is no destiny</div>
</div>
</body>
</html>
* {margin:0; padding:0;}
li {list-style: none;}
#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: 22px 15px 20px 15px; text-decoration: none; color: #fff; display:inline-block;}
#nav ul li.active a {border-bottom: 3px solid #fff;}
#dot {position: fixed; right: 40px; top: 50%; transform:translatey(-50%);}
#dot li {width:17px; height: 17px; background-color: rgba(0,0,0,0.51);; border-radius:50%; margin: 16px 7px;}
#dot li a {color: #fff; text-decoration: none; padding: 8px 15px 5px 15px; position:relative; }
#dot li a span {opacity:0; position: absolute; right:35px; top:-1px; background-color: rgba(0,0,0,0.51); padding: 7px 10px 5px 10px; transition: all 0.3s ease; border-radius:2px;}
#dot li a span:after {content:''; position:absolute; right:-7px; top:8px;
border-left: 7px solid rgba(0,0,0,0.51);
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
#dot li.active {background-color: rgba(0,0,0,0.71);}
#dot li.active a span {opacity: 1; right:25px; }
#contents {text-align: center; font-size: 80px; color:#fff; font-family: 'Open Sans', sans-serif; font-weight: 800; text-transform: uppercase;}
#contents > div {height: 100vh; line-height: 100vh;}
#section1 {background: linear-gradient(180deg, #B066FE, #63E2FF);}
#section2 {background: linear-gradient(180deg, #D4145A, #FBB03B);}
#section3 {background: linear-gradient(180deg, #009245, #FCEE21);}
#section4 {background: linear-gradient(180deg, #662D8C, #ED1E79);}
#section5 {background: linear-gradient(180deg, #ED1C24, #FCEE21);}
#section6 {background: linear-gradient(180deg, #a18cd1, #fbc2eb);}
var nav = $("#nav ul li");
var dot = $("#dot ul li");
var contents = $("#contents > div");
dot.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);
});
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);
});
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if(wScroll >= contents.eq(0).offset().top){
dot.removeClass("active");
dot.eq(0).addClass("active");
nav.removeClass("active");
nav.eq(0).addClass("active");
}
if(wScroll >= contents.eq(1).offset().top){
dot.removeClass("active");
dot.eq(1).addClass("active");
nav.removeClass("active");
nav.eq(1).addClass("active");
}
if(wScroll >= contents.eq(2).offset().top){
dot.removeClass("active");
dot.eq(2).addClass("active");
nav.removeClass("active");
nav.eq(2).addClass("active");
}
if(wScroll >= contents.eq(3).offset().top){
dot.removeClass("active");
dot.eq(3).addClass("active");
nav.removeClass("active");
nav.eq(3).addClass("active");
}
if(wScroll >= contents.eq(4).offset().top){
dot.removeClass("active");
dot.eq(4).addClass("active");
nav.removeClass("active");
nav.eq(4).addClass("active");
}
if(wScroll >= contents.eq(5).offset().top){
dot.removeClass("active");
dot.eq(5).addClass("active");
nav.removeClass("active");
nav.eq(5).addClass("active");
}
});