728x90
반응형
※패럴랙스 이펙트
전체 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>패럴랙스</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "ReciaSerifDisplay";
}
body {
height: 20000px;
background-color: #E0E4DD;
position: relative;
}
.scrollTop {
position: fixed;
left: 10px;
top: 10px;
z-index: 1000;
width: 40px;
height: 40px;
color: #fff;
text-align: center;
font-size: 14px;
line-height: 40px;
background-color: rgba(0, 0, 0, 0.6);
}
.fixed {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.s1-text1 {
font-size: 30vw;
line-height: 1;
padding-top: 8vw;
}
.s1-text2 {
font-size: 0vw;
line-height: 1;
padding-top: 8vw;
}
.img__inner {
width: 40vw;
height: 100vh;
/* background-color: #fff; */
display: flex;
justify-content: center;
}
.s1-img1 {
width: 19vh;
height: 100vh;
}
.s1-img1 > div> div {
width: 18vh;
height: 18vh;
position: absolute;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 5px solid #000;
filter: saturate(0%);
right: 70vw;
top: 55vw;
}
.s1-img2 {
width: 19vh;
height: 100vh;
}
.s1-img2 > div> div {
width: 18vh;
height: 18vh;
position: absolute;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 5px solid #000;
filter: saturate(0%);
left: 70vw;
}
.s2-text2 {
color:#fff;
z-index: 1;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image:url(https://source.unsplash.com/500x500/?coding);
}
.s2-text3 {
color:#fff;
z-index: 1;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image:url(../parallax/img/IMG_3623.jpg);
}
.s1-img1-1 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?blue);}
.s1-img2-1 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?red);}
.s1-img1-2 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?white);}
.s1-img2-2 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?sliver);}
.s1-img1-3 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?pink);}
.s1-img2-3 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?green);}
.s1-img1-4 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?gray);}
.s1-img2-4 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?yellow);}
.s1-img1-5 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?purple);}
.s1-img2-5 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?black);}
</style>
<link href="https://webfontworld.github.io/recia/ReciaSerifDisplay.css" rel="stylesheet">
</head>
<body>
<div class="scrollTop"></div>
<section id="section1">
<div class="s1-text1 fixed"
data-0= "font-size: 0vw; opacity: 1"
data-1000= "font-size: 30vw; opacity: 1"
data-2000= "font-size: 30vw; opacity: 1"
data-3000= "font-size: 0vw; opacity: 0"
>hello</div>
<div class="s1-text2 fixed"
data-2000= "font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg)"
data-3000= "font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg)"
>World</div>
<div class="img__inner fixed">
<div class="s1-img1">
<div class="s1-img1-1">
<div
data-3500= "right: 70vw; top: 40vw"
data-4500= "right: 50vw; top: 40vw"
data-5500= "right: 50vw; top: 0vw"
data-9000= "right: 50vw; top: 0vw"
data-10000= "right: 100vw; top: 0vw"
></div>
</div>
<div class="s1-img1-2">
<div
data-4000= "right: 70vw; top: 40vw"
data-5000= "right: 50vw; top: 40vw"
data-6000= "right: 50vw; top: 10vw"
data-10000= "right: 50vw; top: 10vw"
data-11000= "right: 100vw; top: 10vw"
></div>
</div>
<div class="s1-img1-3">
<div
data-4500= "right: 70vw; top: 40vw"
data-5500= "right: 50vw; top: 40vw"
data-6500= "right: 50vw; top: 20vw"
data-8000= "right: 50vw; top: 20vw"
data-9000= "right: 100vw; top: 20vw"
></div>
</div>
<div class="s1-img1-4">
<div
data-5000= "right: 70vw; top: 40vw"
data-6000= "right: 50vw; top: 40vw"
data-7000= "right: 50vw; top: 30vw"
data-12000= "right: 50vw; top: 30vw"
data-13000= "right: 100vw; top: 30vw"
></div>
</div>
<div class="s1-img1-5">
<div
data-5500= "right: 70vw; top: 40vw"
data-6500= "right: 50vw; top: 40vw"
data-7500= "right: 50vw; top: 40vw"
data-11000= "right: 50vw; top: 40vw"
data-12000= "right: 100vw; top: 40vw"
></div>
</div>
</div>
<div class="s1-img2">
<div class="s1-img2-1">
<div
data-3500= "left: 70vw; top: 0vw"
data-4500= "left: 50vw; top: 0vw"
data-5500= "left: 50vw; top: 40vw"
data-12000= "left: 50vw; top: 40vw"
data-13000= "left: 100vw; top: 40vw"
></div>
</div>
<div class="s1-img2-2">
<div
data-4000= "left: 70vw; top: 0vw"
data-5000= "left: 50vw; top: 0vw"
data-6000= "left: 50vw; top: 30vw"
data-8000= "left: 50vw; top: 30vw"
data-9000= "left: 100vw; top: 30vw"
></div>
</div>
<div class="s1-img2-3">
<div
data-4500= "left: 70vw; top: 0vw"
data-5500= "left: 50vw; top: 0vw"
data-6500= "left: 50vw; top: 20vw"
data-10000= "left: 50vw; top: 20vw"
data-11000= "left: 100vw; top: 20vw"
></div>
</div>
<div class="s1-img2-4">
<div
data-5000= "left: 70vw; top: 0vw"
data-6000= "left: 50vw; top: 0vw"
data-7000= "left: 50vw; top: 10vw"
data-9000= "left: 50vw; top: 10vw"
data-10000= "left: 100vw; top: 10vw"
></div>
</div>
<div class="s1-img2-5">
<div
data-5500= "left: 70vw; top: 0vw"
data-6500= "left: 50vw; top: 0vw"
data-7500= "left: 50vw; top: 0vw"
data-11000= "left: 50vw; top: 0vw"
data-12000= "left: 100vw; top: 0vw"
></div>
</div>
</div>
</div>
<div class="s2-text2 fixed"
data-13000= "width: 0vh; height: 0vh; font-size; 0vw; top:50%; left:50%;transform: translate(-50%, -50%); opacity: 1"
data-13500= "width: 1vh; height: 1vh; font-size: 0vw; top:50%; left:50%; opacity: 1"
data-14000= "width: 1vh; height: 1vh; font-size: 0vw; top:50%; left:50%; opacity: 1"
data-14500= "width: 200vh; height: 1vh; font-size: 10vw; top:50%; left:50%; opacity: 1"
data-15000= "width: 200vh; height: 100vh; font-size: 10vw; top:50%; left:50%; opacity: 1"
>
</div>
<div class="s1-text2 fixed"
data-15000= "font-size: 0vw; transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg); color: #fff"
data-16000= "font-size: 15vw; transform: translate(-50%, -50%) rotateY(720deg) rotateX(50deg); color: #fff"
>Javascript</div>
<div class="s2-text3 fixed"
data-16000= "width: 0vh; height: 0vh; font-size; 0vw;"
data-17500= "width: 1vh; height: 1vh; font-size: 0vw; "
data-18000= "width: 1vh; height: 1vh; font-size: 0vw; "
data-18500= "width: 1vh; height: 50vh; font-size: 10vw;"
data-19000= "width: 1vh; height: 50vh; font-size: 10vw;"
data-19500= "width: 103vh; height: 50vh; font-size: 10vw;"
data-20000= "width: 103vh; height: 50vh; font-size: 10vw; bo"
>
<div class="s1-text2 fixed"
data-20000= "font-size: 0vw; transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg); color: #fff"
data-21000= "font-size: 15vw; transform: translate(-50%, -50%) rotateY(0deg) rotateX(1080deg); color: #fff"
>Fighting!</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script type="text/javascript">
let s = skrollr.init();
window.addEventListener("scroll", () =>{
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelector(".scrollTop").innerText = scrollTop;
});
</script>
</body>
</html>- 스크롤에 반응 하여 css 데이터가 변하는 소스를 가져와서 적용해주도록 합니다.
- 그후 스크롤이 값을 봐가며 자기가 어느곳에 어떻게 변화를 주고 싶은지 적어 줍니다.
- 적을 때는 <div 이사이에 적어야하며 > 변하지 않는 요소는 style에 적어도 상관이 없습니다.
javascript
- 스크롤을 하였을때 스크롤의 Y의 값을 가져오도록 하였고 그것을 .scrollTop 에 넣어 주었습니다.