이번 포스팅은 스크롤과 좌표를 이용해서 패럴랙스 효과를 줘보도록 하겠습니다!
다시 한 번 복습하는 개념으로 패럴럭스에 대해 알아보자면,
ParallaxEffect란?
패럴랙스 효과(Parallax Effect)란, 물체의 거리 차이에 따라 시차를 느끼게 하는 시각적인 효과를 말합니다.
웹 디자인에서는 패럴랙스 효과를 사용하여 웹페이지의 다양한 요소들이 서로 다른 속도로 움직이도록 하여 깊이감을 부여하는 효과를 줄 수 있습니다. 이를 통해 사용자에게 더욱 생생한 경험을 제공할 수 있습니다. 예를 들어, 스크롤을 내리면서 배경 이미지와 전경의 텍스트가 서로 다른 속도로 움직이면서 깊이감 있는 느낌을 줄 수 있습니다.
이 포스팅에서는 언스플래쉬와 스크롤라이브러리를 사용합니다!
이미지와 텍스트를 사용하기 위해 이미지는 unsplah에서 랜덤으로 불러왔습니다.
.s1-img1-1 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?green);}이런식으로 사용해주시면 되구요. 먼저 스크롤의 좌표값을 확인하기 위해 작은 스크롤 창을 왼쪽 상단에 띄우겠습니다.
코드는 아래와 같습니다.
<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>먼저, HTML에서는 skrollr 라이브러리를 가져오기 위해 첫 번째 스크립트 태그를 사용합니다.
이 라이브러리는 웹 사이트에서 패럴랙스 효과를 구현할 때 사용됩니다.
두 번째 스크립트 태그에서는 스크롤 이벤트를 리스닝하고, 스크롤 위치를 측정하여 출력합니다. 이 코드에서는 window.pageYOffset 또는 window.scrollY를 사용하여 스크롤 위치를 측정합니다. 그리고 해당 위치를 .scrollTop 클래스를 가진 요소의 내부 텍스트로 출력합니다.
마지막으로, skrollr.init() 메소드를 사용하여 skrollr 라이브러리를 초기화합니다. 이렇게 하면 페이지에서 패럴랙스 효과를 구현할 수 있습니다.
그럼 이제 스크롤 라이브러리를 사용해 구현한 부분적 효과들을 확인해보겠습니다!
<div class="s1-text1 fixed"
data-0="font-size: 0vw; opacity: 1; color:ivory;"
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-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg); color:ivory;"
data-3000="font-size: 30vw; transform: translate(-50%, -50%) rotate(360deg); opacity: 1;"
data-4000="font-size: 0vw; opacity: 1;">
Coding</div>
<div class="s1-text3 fixed"
data-3000="font-size: 0vw; color:ivory;"
data-4000="font-size: 15vw;" >
황상연</div>
<div class="s1-text1 fixed"
data-7700="font-size: 0vw; color:ivory;"
data-8900="font-size: 11vw; color:ivory;"
>
We can do it!</div>
<div class="s1-text7 fixed"
data-9800="opacity: 0"
data-9810="opacity: 1; font-size: 20vw;"
>첫 번째 텍스트 요소인 ".s1-text1"은 페이지 로딩 시에는 font-size가 0vw이고, opacity는 1이며, 색상은 아이보리색입니다.
그리고 스크롤을 1000px 내리면 font-size가 30vw로 커지고, opacity는 1로 유지됩니다.
그리고 2000px에서 3000px까지는 font-size가 30vw, opacity가 1로 유지되고, 3000px 이상에서는 font-size가 0vw로 줄어들며, opacity는 0이 됩니다.