패럴랙스 배우기 튜토리얼입니다.
이 강의는 기본적인 기본 패럴랙스 사이트를 보고 오시는 것을 추천합니다.
패럴랙스의 기본원리를 알았다면 이제는 제이쿼리와 자바스크립트를 이용하여 패럴랙스의 기본 구조를 배우는 단계입니다.
모든 강의는 소스를 보면서 따라하는 튜토리얼이며,
직접 서버에 따라하시고 댓글로 서버 주소를 알려주시면
모르는 부분은 도움을 드릴 수 있습니다.
Code Youtube
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Parallax108 - 텍스트 효과</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrap">
<h1>Parallax <em>Scrolling</em></h1>
<div class="contents">
<section id="section1" class="content-item">
<span class="content-item-num">01</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split1">높은 목표를 세우고, 스스로 채직찔한다.</p>
</section>
<section id="section2" class="content-item">
<span class="content-item-num">02</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split2">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
</section>
<section id="section3" class="content-item">
<span class="content-item-num">03</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split3">매 순간에 최선을 다하고, 끊임없이 변화한다.</p>
</section>
<section id="section4" class="content-item">
<span class="content-item-num">04</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split4">모든지 기본을 중요하게 생각한다.</p>
</section>
<section id="section5" class="content-item">
<span class="content-item-num">05</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split5">천 마디의 말보다 하나의 행동이 더 값지다.</p>
</section>
<section id="section6" class="content-item">
<span class="content-item-num">06</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split6">높은 목표를 세우고, 스스로 채직찔한다.</p>
</section>
<section id="section7" class="content-item">
<span class="content-item-num">07</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split7">조그만 성공에 만족하지 않으며, 방심을 경계한다.</p>
</section>
<section id="section8" class="content-item">
<span class="content-item-num">08</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split8">내 스타일을 다른 사람에게 강요하지 않는다.</p>
</section>
<section id="section9" class="content-item">
<span class="content-item-num">09</span>
<h2 class="content-item-title">Basic Coding</h2>
<div class="content-item-imgWrap">
<div class="content-item-img"></div>
</div>
<p class="content-item-desc split9">나 자신의 이익을 위해 다른 사람을 이용하지 않는다.</p>
</section>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
</body>
</html>
* {margin: 0; padding: 0; box-sizing: border-box;}
:root {font-size: 16px;}
body {
--color-h1: #dc6e25;
--color-title: #fff;
--color-sub: #999;
--color-link: #000;
--color-bg: #111;
--image-widthMax: 500px;
--aspect-ratio: 32/17;
color: var(--color-title);
background-color: var(--color-bg);
font-family: 'Lato', sans-serif;
}
#wrap h1 {
font-size: 8vw;
padding: 5vw;
color: var(--color-h1);
text-transform: uppercase;
font-weight: 700;
}
#wrap h1 em {
display: block;
padding-left: 20vw;
font-weight: 100;
}
.contents {
width: 100%;
padding: 35vh 0 40vh;
overflow: hidden;
}
.content-item {
/* width: 1000px; */
--image-width: calc(var(--image-widthMax) * var(--aspect-ratio));
width: var(--image-width);
margin: 10vh 0 45vh;
max-width: 90vw;
position: relative;
}
.content-item:nth-child(even){
margin-left: auto;
}
.content-item-num {
font-size: 23vw;
opacity: 0.04;
line-height: 1;
font-weight: 100;
color: var(--color-title);
position: absolute;
top: -13vw; right: -10vw;
}
.content-item:nth-child(even) .content-item-num {
right: auto; left: -7vw;
}
.content-item-title {
text-align: right;
font-weight: 300;
text-transform: capitalize;
color: var(--color-sub);
padding-bottom: 0.8vw;
font-size: 1.5rem;
}
.content-item:nth-child(even) .content-item-title {
text-align: left;
}
.content-item-imgWrap {
/* width: 100%;
padding-bottom: 57%; */
--width: 100%;
width: var(--width);
padding-bottom: calc( (var(--width)) / (var(--aspect-ratio)) );
will-change: transform;
position: relative; z-index: 10;
overflow: hidden;
}
.content-item-img {
/*height: 550px;
position: absolute;
top: -30px; */
width: var(--width);
background-size: cover;
background-position: 50% 0;
--overflow: 40px;
height: calc(100% + (2 * var(--overflow)));
position: absolute;
top: calc( -1 * var(--overflow));
will-change: transform;
}
.content-item-desc {
font-size: 5vw;
line-height: 1.2;
font-weight: 600;
text-transform: uppercase;
color: var(--color-title);
text-align: right;
word-break: keep-all;
margin-top: -8vw;
margin-right: -5vw;
position: relative;
z-index: 20
}
.content-item:nth-child(even) .content-item-desc {
text-align: left;
margin-right: 0;
margin-left: -5vw;
}
#section1 .content-item-img {background-image: url(img/so09.jpg);}
#section2 .content-item-img {background-image: url(img/so02.jpg);}
#section3 .content-item-img {background-image: url(img/so03.jpg);}
#section4 .content-item-img {background-image: url(img/so04.jpg);}
#section5 .content-item-img {background-image: url(img/so05.jpg);}
#section6 .content-item-img {background-image: url(img/so06.jpg);}
#section7 .content-item-img {background-image: url(img/so07.jpg);}
#section8 .content-item-img {background-image: url(img/so08.jpg);}
#section9 .content-item-img {background-image: url(img/so01.jpg);}
/* split1 */
.split1 span {opacity: 0;}
.split1 span.show {opacity: 1;}
/* split2 */
.split2 span {opacity: 0; display: inline-block; min-width: 30px;}
.split2 span.show {opacity: 1; animation: flipInX 1s 1 forwards;}
@keyframes flipInX {
0% {transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0;}
40% {transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in;}
60% {transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}
80% {transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
100% {transform: perspective(400px);}
}
/* split3 */
.split3 span {opacity: 0; display: inline-block; min-width: 30px;}
.split3 span.show {opacity: 1; animation: splite3 1s 1 forwards;}
@keyframes splite3 {
0% {transform: translate(-150px, -50px) rotate(-180deg) scale(3);}
60% {transform: translate(20px, 20px) rotate(30deg) scale(.3);}
100% {transform: translate(0) rotate(0) scale(1); opacity: 1;}
}
/* split4 */
.split4 span {opacity: 0; transform: translateY(100px); display: inline-block; min-width: 30px;}
/* split5 */
.split5 span {opacity: 0; display: inline-block; min-width: 30px;
transform:translate(-100px, 50px) rotate(180deg);
}
//노가다
// let split1 = $(".split1").text().split("").join("</span><span aria-hidden='true'>");
// split1 = "<span aria-hidden='true'>" + split1 + "</span>";
// $(".split1").html(split1);
// let split2 = $(".split2").text().split("").join("</span><span aria-hidden='true'>");
// split2 = "<span aria-hidden='true'>" + split2 + "</span>";
// $(".split2").html(split2);
// let split3 = $(".split3").text().split("").join("</span><span aria-hidden='true'>");
// split3 = "<span aria-hidden='true'>" + split3 + "</span>";
// $(".split3").html(split3);
// let split4 = $(".split4").text().split("").join("</span><span aria-hidden='true'>");
// split4 = "<span aria-hidden='true'>" + split4 + "</span>";
// $(".split4").html(split4);
// let split5 = $(".split5").text().split("").join("</span><span aria-hidden='true'>");
// split5 = "<span aria-hidden='true'>" + split5 + "</span>";
// $(".split5").html(split5);
// let split6 = $(".split6").text().split("").join("</span><span aria-hidden='true'>");
// split6 = "<span aria-hidden='true'>" + split6 + "</span>";
// $(".split6").html(split6);
// let split7 = $(".split7").text().split("").join("</span><span aria-hidden='true'>");
// split7 = "<span aria-hidden='true'>" + split7 + "</span>";
// $(".split7").html(split7);
// let split8 = $(".split8").text().split("").join("</span><span aria-hidden='true'>");
// split8 = "<span aria-hidden='true'>" + split8 + "</span>";
// $(".split8").html(split8);
// let split9 = $(".split9").text().split("").join("</span><span aria-hidden='true'>");
// split9 = "<span aria-hidden='true'>" + split9 + "</span>";
// $(".split9").html(split9);
//한번에
$(".content-item-desc").each(function(){
let target = $(this).text().split("").join("</span><span aria-hidden='true'>");
target = "<span aria-hidden='true'>" + target + "</span>";
$(this).html(target);
});
//노가다
$(window).scroll(function(){
if( $(window).scrollTop() > $(".split1").offset().top - $(window).height()/2 ){
$(".split1 span").each(function(i){
setTimeout(function(){
$(".split1 span").eq(i).addClass("show");
},100 * (i+1));
});
}
if( $(window).scrollTop() > $(".split2").offset().top - $(window).height()/2 ){
$(".split2 span").each(function(i){
setTimeout(function(){
$(".split2 span").eq(i).addClass("show");
},100 * (i+1));
});
}
if( $(window).scrollTop() > $(".split3").offset().top - $(window).height()/2 ){
$(".split3 span").each(function(i){
setTimeout(function(){
$(".split3 span").eq(i).addClass("show");
},100 * (i+1));
});
}
if( $(window).scrollTop() > $(".split4").offset().top - $(window).height()/2 ){
$(".split4 span").each(function(i){
gsap.to(".split4 span", 0.5, {ease: Back.easeOut.config(1.7), opacity: 1, y: 0, stagger:0.1})
});
}
if( $(window).scrollTop() > $(".split5").offset().top - $(window).height()/2 ){
$(".split5 span").each(function(i){
gsap.to(".split5 span", 0.5, {ease: Back.easeOut.config(1.7), rotation: 0, opacity: 1, x: 0, y: 0, stagger:0.2})
});
}
if( $(window).scrollTop() > $(".split6").offset().top - $(window).height()/2 ){
$(".split6 span").each(function(i){
setTimeout(function(){
$(".split6 span").eq(i).css("color","red");
},100 * (i+1));
});
}
if( $(window).scrollTop() > $(".split7").offset().top - $(window).height()/2 ){
$(".split7 span").each(function(i){
setTimeout(function(){
$(".split7 span").eq(i).css("color","red");
},100 * (i+1));
});
}
if( $(window).scrollTop() > $(".split8").offset().top - $(window).height()/2 ){
$(".split8 span").each(function(i){
setTimeout(function(){
$(".split8 span").eq(i).css("color","red");
},100 * (i+1));
});
}
if( $(window).scrollTop() > $(".split9").offset().top - $(window).height()/2 ){
$(".split9 span").each(function(i){
setTimeout(function(){
$(".split9 span").eq(i).css("color","red");
},100 * (i+1));
});
}
});
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
