패럴랙스 배우기 튜토리얼입니다.
이 강의는 기본적인 기본 패럴랙스 사이트를 보고 오시는 것을 추천합니다.
패럴랙스의 기본원리를 알았다면 이제는 제이쿼리와 자바스크립트를 이용하여 패럴랙스의 기본 구조를 배우는 단계입니다.
모든 강의는 소스를 보면서 따라하는 튜토리얼이며,
직접 서버에 따라하시고 댓글로 서버 주소를 알려주시면
모르는 부분은 도움을 드릴 수 있습니다.
Code Youtube
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Parallax03 - 패럴랙스 효과</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
</head>
<body>
<div class="info">
<span>scrollTop() : <strong class="scrollTop">0</strong>px</span><br>
<span>#section1 offset : <strong class="s1OT">0</strong>px</span><br>
<span>#section2 offset : <strong class="s2OT">0</strong>px</span><br>
<span>#section3 offset : <strong class="s3OT">0</strong>px</span><br>
<span>#section4 offset : <strong class="s4OT">0</strong>px</span><br>
<span>#section5 offset : <strong class="s5OT">0</strong>px</span><br>
<span>#section6 offset : <strong class="s6OT">0</strong>px</span><br>
<span>#section7 offset : <strong class="s7OT">0</strong>px</span><br>
<span>#section1 offset : <strong class="s8OT">0</strong>px</span><br>
<span>#section9 offset : <strong class="s9OT">0</strong>px</span><br>
</div>
<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">높은 목표를 세우고, 스스로 채직찔한다.</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">결과도 중요하지만, 과정을 더 중요하게 생각한다.</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">매 순간에 최선을 다하고, 끊임없이 변화한다.</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">모든지 기본을 중요하게 생각한다.</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">천 마디의 말보다 하나의 행동이 더 값지다.</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">높은 목표를 세우고, 스스로 채직찔한다.</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">조그만 성공에 만족하지 않으며, 방심을 경계한다.</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">내 스타일을 다른 사람에게 강요하지 않는다.</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">나 자신의 이익을 위해 다른 사람을 이용하지 않는다.</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);}
.info {
position: fixed; top: 20px; right: 20px;
background: rgba(255,255,255,0.4);
color: #000;
padding: 10px;
font-size: 14px; font-weight: 300;
z-index: 10000;
font-style: normal;
}
.contents > section {opacity: 0; transform: translateY(100px); transition: all 0.6s ease;}
.contents > section.show {opacity: 1; transform: translateY(0);}
//제이쿼리를 이용한 패럴랙스 효과 만들기
$(window).scroll(function(){
const scrollTop = parseInt($(window).scrollTop() + $(window).height()/2 );
$(".scrollTop").text(scrollTop);
$(".s1OT").text(parseInt($("#section1").offset().top));
$(".s2OT").text(parseInt($("#section2").offset().top));
$(".s3OT").text(parseInt($("#section3").offset().top));
$(".s4OT").text(parseInt($("#section4").offset().top));
$(".s5OT").text(parseInt($("#section5").offset().top));
$(".s6OT").text(parseInt($("#section6").offset().top));
$(".s7OT").text(parseInt($("#section7").offset().top));
$(".s8OT").text(parseInt($("#section8").offset().top));
$(".s9OT").text(parseInt($("#section9").offset().top));
if(scrollTop > parseInt($("#section1").offset().top)){
$(".s1OT").css("color","red")
} else {
$(".s1OT").css("color","black");
}
if(scrollTop > parseInt($("#section2").offset().top)){
$(".s2OT").css("color","red")
} else {
$(".s2OT").css("color","black");
}
if(scrollTop > parseInt($("#section3").offset().top)){
$(".s3OT").css("color","red")
} else {
$(".s3OT").css("color","black");
}
if(scrollTop > parseInt($("#section4").offset().top)){
$(".s4OT").css("color","red")
} else {
$(".s4OT").css("color","black");
}
if(scrollTop > parseInt($("#section5").offset().top)){
$(".s5OT").css("color","red")
} else {
$(".s5OT").css("color","black");
}
if(scrollTop > parseInt($("#section6").offset().top)){
$(".s6OT").css("color","red")
} else {
$(".s6OT").css("color","black");
}
if(scrollTop > parseInt($("#section7").offset().top)){
$(".s7OT").css("color","red")
} else {
$(".s7OT").css("color","black");
}
if(scrollTop > parseInt($("#section8").offset().top)){
$(".s8OT").css("color","red")
} else {
$(".s8OT").css("color","black");
}
if(scrollTop > parseInt($("#section9").offset().top)){
$(".s9OT").css("color","red")
} else {
$(".s9OT").css("color","black");
}
//노가다 작성
// if(scrollTop > $("#section1").offset().top){
// $("#section1").addClass("show");
// }
// if(scrollTop > $("#section2").offset().top){
// $("#section2").addClass("show");
// }
// if(scrollTop > $("#section3").offset().top){
// $("#section3").addClass("show");
// }
// if(scrollTop > $("#section4").offset().top){
// $("#section4").addClass("show");
// }
// if(scrollTop > $("#section5").offset().top){
// 0 $("#section5").addClass("show");
// }
// if(scrollTop > $("#section6").offset().top){
// $("#section6").addClass("show");
// }
// if(scrollTop > $("#section7").offset().top){
// $("#section7").addClass("show");
// }
// if(scrollTop > $("#section8").offset().top){
// $("#section8").addClass("show");
// }
// if(scrollTop > $("#section9").offset().top){
// $("#section9").addClass("show");
// }
//한번에 작성하기
$(".content-item").each(function(){
if(scrollTop > $(this).offset().top){
$(this).addClass("show");
} else {
$(this).removeClass("show");
}
});
});
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
