패럴랙스 기본 배우기 튜토리얼입니다.
이 강의는 기본적인 HTML, CSS, JavaScript, JQuery를 알고 있어야 배울 수 있는 강의입니다.
웹표준 강의, 반응형 강의, 메가박스 강의를 보고 오시면 도움이 됩니다.^^
모든 강의는 소스를 보면서 따라하는 튜토리얼이며,
직접 서버에 따라하시고 댓글로 서버 주소를 알려주시면
모르는 부분은 도움을 드릴 수 있습니다.
Code Youtube
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>Parallax</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i'" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
</head>
<body>
<nav id="nav">
<h1>WEB'S</h1>
</nav>
<div id="dot">
<ul>
<li class="active"><a href="#"><em>menu1</em></a></li>
<li><a href="#"><em>menu2</em></a></li>
<li><a href="#"><em>menu3</em></a></li>
<li><a href="#"><em>menu4</em></a></li>
<li><a href="#"><em>menu5</em></a></li>
<li><a href="#"><em>menu6</em></a></li>
</ul>
</div>
<div id="contents">
<div id="section1"><h2><strong>잘 살아라!</strong><br>그게 최고의 복수다.</h2></div>
<div id="section2"><h2><strong>꿈을 크게 가지면</strong><br>깨져도 그 조각이 크다.</h2></div>
<div id="section3"><h2><strong>꽃이 방안에 있으면</strong><br>벌이 어떻게 찾아가겠어요?</h2></div>
<div id="section4"><h2><strong>절망하지 마라</strong><br>종종 열쇠 꾸러미의 마지막 열쇠가<br>자물쇠를 연다.</h2></div>
<div id="section5"><h2>하고 싶은 일에는 <strong>방법이 보이고,</strong><br>하기 싫은 일에는 <strong>핑계가 보인다.</strong></h2></div>
<div id="section6"><h2><strong>실패는</strong> 삶에서<br>불필요한 것들을 제거해준다.</h2></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var dot = $("#dot > ul > li");
var cont = $("#contents > div");
dot.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
//alert(index);
var section = cont.eq(index);
var offset = section.offset().top;
$("html,body").animate({ scrollTop:offset },600,"easeInOutExpo");
});
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if(wScroll >= cont.eq(0).offset().top){
dot.removeClass("active");
dot.eq(0).addClass("active");
}
if(wScroll >= cont.eq(1).offset().top){
dot.removeClass("active");
dot.eq(1).addClass("active");
}
if(wScroll >= cont.eq(2).offset().top){
dot.removeClass("active");
dot.eq(2).addClass("active");
}
if(wScroll >= cont.eq(3).offset().top){
dot.removeClass("active");
dot.eq(3).addClass("active");
}
if(wScroll >= cont.eq(4).offset().top){
dot.removeClass("active");
dot.eq(4).addClass("active");
}
if(wScroll >= cont.eq(5).offset().top){
dot.removeClass("active");
dot.eq(5).addClass("active");
}
//Text Animation
if(wScroll >= cont.eq(0).offset().top - $(window).height()/3 ){
cont.eq(0).addClass("show");
}
if(wScroll >= cont.eq(1).offset().top - $(window).height()/3 ){
cont.eq(1).addClass("show");
}
if(wScroll >= cont.eq(2).offset().top - $(window).height()/3 ){
cont.eq(2).addClass("show");
}
if(wScroll >= cont.eq(3).offset().top - $(window).height()/3 ){
cont.eq(3).addClass("show");
}
if(wScroll >= cont.eq(4).offset().top - $(window).height()/3 ){
cont.eq(4).addClass("show");
}
if(wScroll >= cont.eq(5).offset().top - $(window).height()/3 ){
cont.eq(5).addClass("show");
}
});
</script>
</body>
</html>
/* reset */
* {margin:0; padding:0; font-family: 'Lato';}
li {list-style: none;}
a {text-decoration: none;}
/* nav */
#nav {position: fixed; left: 0; top: 0px; width: 100%; height: 61px; z-index: 1000; background-color: rgba(255,255,255,0.3); transition: all 0.3s ease;}
#nav.on {position: fixed; top: -61px;}
#nav h1 {float: left; color: #fff; font-size: 40px; padding: 5px 5px 5px 15px; font-family: 'Abel' }
/* dot */
#dot {position: fixed; right: 20px; top:50%; z-index: 10; transform: translatey(-50%);}
#dot li {
position: relative;
width: 20px; height: 20px; border-radius:50%;
box-shadow: 0 0 0 2px rgba(255,255,255,0);
margin: 8px;
transition: box-shadow 0.3s ease;
}
#dot li a {
background-color: rgba(255,255,255,0.7);
width: 100%; height: 100%;
position: absolute; top:0; left: 0;
border-radius: 50%;
transition: background-color 0.3s ease, transform 0.3s ease;
}
#dot li.active {box-shadow: 0 0 0 2px rgba(255,255,255,1);}
#dot li.active a {transform: scale(0.4);}
#dot li a em {display: none;}
/* contents */
#contents {text-align: center; color: #fff;}
#contents > div {height: 100vh; display: flex; justify-content : center; align-items : center;}
#contents > div h2 {font-size: 70px; font-weight: 200; text-transform: uppercase;}
#contents > div h2 strong {font-weight: 700; font-style: italic;}
/* section */
#section3 {background:radial-gradient(ellipse farthest-corner at center top, #A3A1FF, #3A3897);}
#section2 {background:radial-gradient(ellipse farthest-corner at center bottom, #3AA17E, #00537E);}
#section4 {background:radial-gradient(ellipse farthest-corner at center top, #29ABE2, #4F00BC);}
#section5 {background:radial-gradient(ellipse farthest-corner at center top, #FF5300, #45145A);}
#section1 {background:radial-gradient(ellipse farthest-corner at center bottom, #852D91, #312A6C);}
#section6 {background:radial-gradient(ellipse farthest-corner at center top, #FBB03B, #D4145A);}
/* text animation */
#contents > div h2 {transition: all 0.6s ease-in-out;}
#section1 h2 {opacity: 0; transform: translate(0,0)}
#section2 h2 {opacity: 0; transform: translate(0,-20%)}
#section3 h2 {opacity: 0; transform: translate(-20%,0)}
#section4 h2 {opacity: 0; transform: translate(10%,0)}
#section5 h2 {opacity: 0; transform: rotate(45deg)}
#section6 h2 {opacity: 0; transform: skew(90deg)}
#contents > div.show h2 {transform: none;}
#section1.show h2 {opacity: 1;}
#section2.show h2 {opacity: 1;}
#section3.show h2 {opacity: 1;}
#section4.show h2 {opacity: 1;}
#section5.show h2 {opacity: 1;}
#section6.show h2 {opacity: 1;}var dot = $("#dot > ul > li");
var cont = $("#contents > div");
dot.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
//alert(index);
var section = cont.eq(index);
var offset = section.offset().top;
$("html,body").animate({ scrollTop:offset },600,"easeInOutExpo");
});
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if(wScroll >= cont.eq(0).offset().top){
dot.removeClass("active");
dot.eq(0).addClass("active");
}
if(wScroll >= cont.eq(1).offset().top){
dot.removeClass("active");
dot.eq(1).addClass("active");
}
if(wScroll >= cont.eq(2).offset().top){
dot.removeClass("active");
dot.eq(2).addClass("active");
}
if(wScroll >= cont.eq(3).offset().top){
dot.removeClass("active");
dot.eq(3).addClass("active");
}
if(wScroll >= cont.eq(4).offset().top){
dot.removeClass("active");
dot.eq(4).addClass("active");
}
if(wScroll >= cont.eq(5).offset().top){
dot.removeClass("active");
dot.eq(5).addClass("active");
}
//Text Animation
if(wScroll >= cont.eq(0).offset().top - $(window).height()/3 ){
cont.eq(0).addClass("show");
}
if(wScroll >= cont.eq(1).offset().top - $(window).height()/3 ){
cont.eq(1).addClass("show");
}
if(wScroll >= cont.eq(2).offset().top - $(window).height()/3 ){
cont.eq(2).addClass("show");
}
if(wScroll >= cont.eq(3).offset().top - $(window).height()/3 ){
cont.eq(3).addClass("show");
}
if(wScroll >= cont.eq(4).offset().top - $(window).height()/3 ){
cont.eq(4).addClass("show");
}
if(wScroll >= cont.eq(5).offset().top - $(window).height()/3 ){
cont.eq(5).addClass("show");
}
});
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
