반응형
패럴랙스 Skrollr 라이브러리를 이용하여 사이트 만들기!
라이브러리는 사용자가 웹페이지를 스크롤할 때 요소들의 애니메이션을 제어하는 것을 가능하게 합니다.
[ Skrollr 를 이용하여 만든 사이트 입니다. ]
Skrollr란?
Skrollr는 웹 개발에서 사용되는 JavaScript 라이브러리 중 하나입니다. 이 라이브러리는 사용자가 웹페이지를 스크롤할 때 요소들의 애니메이션을 제어하는 것을 가능하게 합니다.
스크롤에 따라 요소들의 위치, 크기, 회전, 투명도 등을 변경하거나 CSS 클래스를 추가/제거하여 요소의 스타일을 변경할 수 있습니다. 이를 통해 사용자에게 더욱 동적이고 인터랙티브한 경험을 제공할 수 있습니다.
Skrollr는 다양한 브라우저와 기기에서 호환되며, 다양한 프레임워크와 라이브러리와도 함께 사용될 수 있습니다.
VSCode
<!DOCTYPE html>
<html lang="ko">
<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>
<link href="https://webfontworld.github.io/recia/ReciaSerifDisplay.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "ReciaSerifDisplay";
}
body {
height: 20000px;
background-color: #E0E4DD;
}
.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;
}
.s1-text2 {
font-size: 0vw;
line-height: 1;
padding-top: 8vw;
}
.s1-text12 {
width: 100%;
text-align: center;
font-size: 0vw;
line-height: 1;
padding-top: 8vw;
}
.s1-img1 {
width: 30vw;
height: 100vh;
}
.s1-img1 > div {
height: 20vh;
display: flex;
justify-content: space-between;
}
.s1-img1 > div > div:first-child {
width: 20vh;
background-position: center;
background-size: cover;
}
.s1-img1 > div > div:last-child {
width: 20vh;
background-position: center;
background-size: cover;
}
.s1-img1 {
width: 200vw;
height: 100vh;
}
.s1-img1 > div {
height: 20vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.s1-img1 > div > div {
width: 19vh;
height: 19vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 50%;
/* filter: saturate(0%); */
}
.hi {
width: 100vh;
height: 90vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 15px;
filter: saturate(10%);
}
.s1-img1-1 > div:first-child {background-image: url(https://siyoenkim.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-1 > div:last-child {background-image: url(https://seolhee313.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-2 > div:first-child {background-image: url(https://kebab000.github.io/web2023/assets/ico/icon01.jpg);}
.s1-img1-2 > div:last-child {background-image: url(https://dkseho9121.github.io/web2023/assets/ico/icon01.jpg);}
.s1-img1-3 > div:first-child {background-image: url(https://jinyongjang.github.io/web2023/assets/ico/icon01.jpg);}
.s1-img1-3 > div:last-child {background-image: url(https://chohena.github.io/web2023/assets/ico/icon01.jpg);}
.s1-img1-4 > div:first-child {background-image: url(https://kimdohyun2002.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-4 > div:last-child {background-image: url(https://jhwangwoo.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-5 > div:first-child {background-image: url(https://yeodaseul4355.github.io/web2023/assets/ico/icon01.jpg);}
.s1-img1-5 > div:last-child {background-image: url(https://hyejeong3283.github.io/web2023/assets/ico/icon%2001.jpg);}
.s1-img1-6 > div:first-child {background-image: url(https://dkdlelw.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-6 > div:last-child {background-image: url(https://lee3ll.github.io/web2023/assets/ico/icon01.jpg);}
.s1-img1-7 > div:first-child {background-image: url(https://jo0132.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-7 > div:last-child {background-image: url(https://dlgnsrb227.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-8 > div:first-child {background-image: url(https://dongjin6539.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-8 > div:last-child {background-image: url(https://hyeonbeen97.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-9 > div:first-child {background-image: url(https://younajeong.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-9 > div:last-child {background-image: url(https://ehcjswo.github.io/web2023/assets/ico/icon.jpg);}
.s1-img1-13 > div {background-image: url(img/IMG_3623.jpg);}
</style>
</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-1000="font-size: 30vw; opacity: 1"
data-3000="font-size: 0vw; opacity: 0">
Hello</div>
<div class="s1-text2 fixed"
data-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg); opacity: 1"
data-3000="font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg); opacity: 1"
data-4000="font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg); opacity: 0">
World</div>
<div class="s1-img1 fixed"
>
<div class="s1-img1-1 fixed"
data-3000="width: 200vw; top: -50%; opacity: 1"
data-4500="width: 40vw; top: 10%; opacity: 1"
data-9000="width: 40vw; opacity: 1"
data-10000="width: 40vw; opacity: 0"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-2 fixed"
data-3500="width: 200vw; top: -50%"
data-5000="width: 80vw; top: 20%"
data-9000="width: 80vw; opacity: 1"
data-10000="width: 80vw; opacity: 0"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-3 fixed"
data-4000="width: 200vw; top: -50%"
data-5500="width: 40vw; top: 30%"
data-9000="width: 40vw; opacity: 1"
data-10000="width: 40vw; opacity: 0"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-4 fixed"
data-4500="width: 200vw; top: -50%"
data-6000="width: 80vw; top: 40%"
data-9000="width: 80vw; opacity: 1"
data-10000="width: 80vw; opacity: 0"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-5 fixed"
data-5000="width: 200vw; top: -50%"
data-6500="width: 40vw; top: 50%"
data-9000="width: 40vw; opacity: 1"
data-10000="width: 40vw; opacity: 0"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-6 fixed"
data-5500="width: 200vw; top: -50%"
data-7000="width: 80vw; top: 60%"
data-9000="width: 80vw; opacity: 1"
data-10000="width: 80vw; opacity: 0"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-7 fixed"
data-6000="width: 200vw; top: -50%"
data-7500="width: 40vw; top: 70%"
data-9000="width: 40vw; opacity: 1"
data-10000="width: 40vw; opacity: 0"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-8 fixed"
data-6500="width: 200vw; top: -50%"
data-8000="width: 80vw; top: 80%"
data-9000="width: 80vw; opacity: 1"
data-10000="width: 80vw; opacity: 0"
>
<div></div>
<div></div>
</div>
<div class="s1-img1-9 fixed"
data-7000="width: 200vw; top: -50%"
data-8500="width: 40vw; top: 90%"
data-9000="width: 40vw; opacity: 1"
data-10000="width: 40vw; opacity: 0"
>
<div></div>
<div></div>
</div>
</div>
<div class="s1-text12 fixed"
data-11000="font-size: 17vw; transform: translate(-60%, -250%); opacity: 1; color:red; font-weight:bold"
data-12000="font-size: 17vw; transform: translate(-60%, -140%); opacity: 1; color:red; font-weight:bold"
data-12500="font-size: 17vw; transform: translate(-60%, -100%); opacity: 1; color:red; font-weight:bold"
data-13000="font-size: 17vw; transform: translate(-60%, -130%); opacity: 1; color:red; font-weight:bold"
data-13500="font-size: 17vw; transform: translate(-60%, -100%); opacity: 1; color:red; font-weight:bold"
data-14000="font-size: 17vw; transform: translate(-60%, -110%); opacity: 1; color:red; font-weight:bold"
data-17500="font-size: 17vw; transform: translate(-60%, -110%); opacity: 1; color:red; font-weight:bold"
data-18000="font-size: 18vw; transform: translate(-60%, -110%); opacity: 0; color:red; font-weight:bold">
No Pain</div>
<div class="s1-text12 fixed"
data-15500="font-size: 0vw; transform: translate(-40%, -50%) ; opacity: 1;"
data-16000="font-size: 13vw; transform: translate(-40%, -50%) ; opacity: 1;"
data-17000="font-size: 13vw; transform: translate(-40%, -50%) ; opacity: 1;"
data-18000="font-size: 14vw; transform: translate(-40%, -50%) ; opacity: 0;">
No Gain</div>
<div class="s1-img1-13 fixed"
data-19000="left:-50; opacity: 0"
data-20000="left:-50; opacity: 1"
data-21000="left:-50; opacity: 1;"
>
<div class="hi"></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 = parseInt(scrollTop);
});
</script>
</body>
</html>
패럴랙스 효과는 스크롤링에 따라 배경 이미지를 움직여 깊이감을 연출하는 효과입니다.
구현 방법은 여러가지가 있지만, 이 코드에서는 여러 개의 div 태그를 사용하여 구현하고 있습니다. 첫 번째 div 태그에는 큰 제목과 부제목이 들어가며, 두 번째 div 태그에는 여러 개의 이미지가 들어갑니다.
이미지는 배경 이미지(background-image)로 지정되어 있으며, 각 이미지는 다양한 클래스명으로 구분되어 있습니다. 클래스명에는 "s1-img1-1"과 같이 번호가 붙어 있으며, 각 번호에 해당하는 이미지는 다른 페이지에서 참조할 때 구분하기 쉽도록 설정되어 있습니다.
또한, 이미지의 크기와 위치를 조정하기 위해 CSS 속성을 사용하고 있습니다. 패럴랙스 효과를 위해서는 position: fixed 속성을 사용하여 요소를 고정시키고, transform: translate(-50%, -50%) 속성을 사용하여 요소를 가운데로 이동시켜야 합니다. 이 외에도, font-size 속성을 사용하여 제목과 부제목의 크기를 조정하고, filter: saturate(10%) 속성을 사용하여 이미지를 색감이 약하게 만들고 있습니다.
<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 = parseInt(scrollTop);
});
</script>이 스크립트는 skrollr 라이브러리를 초기화하고, 창 객체에 스크롤 이벤트를 추가하여 현재 스크롤 위치를 추적합니다.
첫 번째 줄은 cdnjs.com에서 호스팅되는 CDN에서 skrollr 라이브러리를 로드합니다.
두 번째 줄은 skrollr를 초기화하는데, 이는 스크롤링 애니메이션과 효과를 생성하기 위한 자바스크립트 라이브러리입니다
세 번째 줄은 창 객체에 "scroll" 이벤트를 듣도록 이벤트 리스너를 추가합니다. 사용자가 스크롤을 할 때마다 화살표 함수 안의 함수가 호출됩니다.
네 번째 줄은 페이지의 scrollTop 위치를 가져와서 정수형으로 변환한 다음, 클래스 이름이 "scrollTop"인 요소의 innerText 속성을 변경합니다. 이렇게 하면 사용자가 스크롤할 때마다 현재 스크롤 위치가 클래스 이름이 "scrollTop"인 요소에 표시됩니다.