패럴랙스 배우기 튜토리얼입니다.
이 강의는 기본적인 기본 패럴랙스 사이트를 보고 오시는 것을 추천합니다.
패럴랙스의 기본원리를 알았다면 이제는 제이쿼리와 자바스크립트를 이용하여
패럴랙스의 기본 구조를 배우는 단계입니다.
모든 강의는 소스를 보면서 따라하는 튜토리얼이며,
직접 서버에 따라하시고 댓글로 서버 주소를 알려주시면
모르는 부분은 도움을 드릴 수 있습니다.
Code Youtube
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>New parallax05</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,700,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<h1>Parallax<em>Scrolling</em></h1>
<div class="contents">
<section id="section1" class="content-item">
<span class="content-item-num">
<svg xmlns="http://www.w3.org/2000/svg">
<text class="svgText" x="20" y="400">01</text>
</svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg">
<text class="svgText" x="20" y="400">02</text>
</svg>
</span>
<h2 class="content-item-title">advice</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">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="symbol">
<text class="svgText2" x="50%" y="50%" dy=".35em" text-anchor="middle">03</text>
</symbol>
<g class="group">
<use xlink:href="#symbol" class="copyText"></use>
<use xlink:href="#symbol" class="copyText"></use>
<use xlink:href="#symbol" class="copyText"></use>
<use xlink:href="#symbol" class="copyText"></use>
<use xlink:href="#symbol" class="copyText"></use>
</g>
</svg>
</span>
<h2 class="content-item-title">advice</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">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="symbol2">
<text class="svgText2" x="50%" y="50%" dy=".35em" text-anchor="middle">04</text>
</symbol>
<g class="group">
<use xlink:href="#symbol2" class="copyText"></use>
<use xlink:href="#symbol2" class="copyText"></use>
<use xlink:href="#symbol2" class="copyText"></use>
<use xlink:href="#symbol2" class="copyText"></use>
<use xlink:href="#symbol2" class="copyText"></use>
</g>
</svg>
</span>
<h2 class="content-item-title">advice</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 num5">
<svg xmlns="http://www.w3.org/2000/svg">
<!--pattern-->
<defs>
<pattern id="pattern1" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse"
patternTransform="rotate(35)" >
<animateTransform attributeType="xml"
attributeName="patternTransform"
type="rotate"
from="35"
to="395"
begin="0"
dur="160s" repeatCount="indefinite"/>
<circle cx="10" cy="10" r="10" stroke="none" fill="yellow">
<animate attributeName="r"
type="xml"
from="1" to="1"
values="1; 10; 1"
begin="0s" dur="2s"
repeatCount="indefinite"/>
</circle>
</pattern>
</defs>
<!-- Symbol -->
<symbol id="pattern-text1">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">
05
</text>
</symbol>
<!-- use -->
<use id="pattern-use1" xlink:href="#pattern-text1" style="fill: url(#pattern1)"></use>
</svg>
</span>
<h2 class="content-item-title">advice</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 num6">
<svg xmlns="http://www.w3.org/2000/svg">
<!--pattern-->
<defs>
<pattern id="pattern2" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse"
patternTransform="rotate(35)" >
<animateTransform attributeType="xml"
attributeName="patternTransform"
type="rotate"
from="35"
to="395"
begin="0"
dur="160s" repeatCount="indefinite"/>
<circle cx="10" cy="10" r="10" stroke="none" fill="yellow">
<animate attributeName="r"
type="xml"
from="1" to="1"
values="1; 10; 1"
begin="0s" dur="2s"
repeatCount="indefinite"/>
</circle>
</pattern>
</defs>
<!-- Symbol -->
<symbol id="pattern-text2">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">
06
</text>
</symbol>
<!-- use -->
<use id="pattern-use2" xlink:href="#pattern-text2" style="fill: url(#pattern2)"></use>
</svg>
</span>
<h2 class="content-item-title">advice</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 num7">07</span>
<h2 class="content-item-title">advice</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 num8">08</span>
<h2 class="content-item-title">advice</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 num9">09</span>
<h2 class="content-item-title">advice</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/2.0.2/TweenMax.min.js"></script>
</body>
</html>*, *::after, *::before {box-sizing: border-box;}
* {margin: 0; padding: 0;}
:root {font-size: 16px;}
body {
--color-h1 : #dc6e25;
--color-title : #fff;
--color-link : #000;
--color-bg : #111;
--image-widthMax: 500px;
--aspect-ratio: 32/16;
color: var(--color-link);
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: 100vw;
margin: 35vh 0 40vh;
}
.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-title {
text-align: right;
font-weight: 300;
text-transform: capitalize;
color: #999;
padding-bottom: 0.8vw;
font-size: 1.5rem;
}
.content-item:nth-child(even) .content-item-title {
text-align: left;
}
.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-imgWrap {
position: relative;
z-index: 10;
overflow: hidden;
--imgwidth: 100%;
width: var(--imgwidth);
padding-bottom: calc(var(--imgwidth) / (var(--aspect-ratio)));
will-change: transform;
}
.content-item-img {
--overflow: 40px;
height: calc(100% + (2 * var(--overflow)));
position: absolute;
top: calc( -1 * var(--overflow));
width: 100%;
background-size: cover;
background-position: 50% 0;
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(http://flairgale.cafe24.com/para/images/so09.jpg);}
#section2 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so02.jpg);}
#section3 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so03.jpg);}
#section4 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so04.jpg);}
#section5 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so05.jpg);}
#section6 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so06.jpg);}
#section7 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so07.jpg);}
#section8 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so08.jpg);}
#section9 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so01.jpg);}
/* 01, 02 */
.content-item-num {z-index: 100;}
.content-item-num svg {width: 500px; height: 500px;}
.content-item-num svg .svgText {
stroke: #fff;
stroke-width: 2;
fill: none;
opacity: 0;
}
.content-item-num.svgLine svg .svgText {animation: stroke 5s 1 forwards;}
@keyframes stroke {
0% {
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
stroke-width: 2;
}
100% {
opacity: 1;
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
stroke-width: 1;
}
}
/* 03, 04 */
.copyText {
fill: none;
stroke: white;
stroke-width: 2px;
stroke-dashoffset: 7% 28%;
}
.copyText:nth-child(1) {stroke: #360756; stroke-dasharray: 7%;}
.copyText:nth-child(2) {stroke: #d61c59; stroke-dasharray: 14%;}
.copyText:nth-child(3) {stroke: #e7d84b; stroke-dasharray: 21%;}
.copyText:nth-child(4) {stroke: #efeac5; stroke-dasharray: 28%;}
.copyText:nth-child(5) {stroke: #1b8798; stroke-dasharray: 35%;}
.content-item-num.svgLine svg .copyText {animation: stroke2 9s infinite linear;}
@keyframes stroke2 {
50% {stroke-dashoffset: 35%; stroke-dasharray: 0 7.5%;}
}
/* 05, 06 */
.num5, .num6 {font-weight: 900;}
#pattern-use1 {
stroke-width: 2;
stroke: #fff;
}
.content-item-num.svgLine svg #pattern-use1 {animation: stroke3 9s infinite linear;}
@keyframes stroke3 {
0% {stroke-width: 3;}
50% {stroke-width: 0;}
100% {stroke-width: 3;}
}
/* 07 */
.num7 {opacity: 0.1; z-index: 0;}
#section7 .content-item-desc {
-webkit-text-stroke-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
/* 08 */
.num8 {opacity: 0.1; z-index: 0;}
#section8 .content-item-desc {
-webkit-text-stroke-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-repeat: no-repeat;
/* left
background-image: linear-gradient(180deg, #fff 0%, #fff 50%, transparent 50.1%);
background-position: 100% 0%;
background-size: 100% 0%; */
background-image: linear-gradient(135deg, #fff 0%, #fff 50%, transparent 50.1%);
background-size: 0% 100%;
transition: background-size .5s cubic-bezier(0.67, 0.01, 0.15, 0.98);
}
#section8 .content-item-desc:hover {
/* left background-size: 100% 200%; */
background-size: 250% 100%;
}
/* 09 */
.num9 {opacity: 0.1; z-index: 0;}
#section9 .content-item-desc {
font-weight: 900;
-webkit-text-stroke-color: rgba(0,0,0,0.6);
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-repeat: no-repeat;
background-image: url(http://flairgale.cafe24.com/para/images/so09.jpg);
background-size: cover;
}
$(window).scroll(function() {
$(".content-item-num").each(function() {
if( $(window).scrollTop() + $(window).height() > $(this).offset().top ){
$(this).delay($(this).data('delay')).queue(function(){
$(this).addClass("svgLine");
});
}
});
});
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
