[JS] Parallax Scrolling 구현하기

🚩 이 글은 [웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인] 강의를 들으며 정리한 내용입니다.

 

Parallax Scrolling 이란?

:  레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법이다.

 

 

예시 사이트

https://www.firewatchgame.com/

 

 

 

 

parallax scrolling 기법을 구현하는 방법은 2가지가 있다.

 

 

1)  자바스크립트를 이용하는 방법

<div class="div-wrap" style="height: 200vh">
    <div id="div-1" style="height: 100px; background: red;"></div>
    <div id="div-2" style="height: 100px; background: skyblue;"></div>
</div>

const div1 = document.getElementById("div-1");
const div2 = document.getElementById("div-2");

window.addEventListener("scroll", (e) => {
	div1.style.transform = `translateY(${window.scrollY * 1.5}px)`;
});

 

window가 스크롤된 양보다 상대적으로 많거나 적게 스크롤 되도록 설정하여 parallax scrolling을 구현할 수 있다.

 

 

 

 

 

2) CSS를 이용하는 방법

<div class="div-wrap">
    <div id="div-3"></div>
    <div id="div-4"></div>
    <div id="div-5"></div>
</div>

<style>
.div-wrap {
    height: 100vh;
    overflow-x: hidden;
    perspective: 1px;
}

.div-wrap > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#div-3 {
    background: palevioletred;
    height: 150rem;
}

#div-4 {
    background: aqua;
    height: 500px;
    transform: translateZ(-2px);
}
#div-5 {
    top: 500px;
    background: slateblue;
    height: 500px;
    transform: translateZ(-1px);
}
</style>

 

CSS perspective 속성을 이용하여 parallax scrolling을 구현할 수 있다.

 

CSS perspective 란?

:  해당 요소의 z=0 평면과 사용자 사이의 거리를 정의하는 속성이다. 즉, 원근감을 줄 수 있는 속성이다.

 

-  transform 효과를 주고자 하는 부모 요소에게 perspective 속성을 적용하면 된다.

-  perspective의 값이 클수록 (z=0 평면과 사용자 사이의 거리가 멀수록) 변형 효과가 적다.

-  perspective의 값이 작을수록 (z=0 평면과 사용자 사이의 거리가 가까울수록) 변형 효과가 크다.

 

 

 

 

 

자바스크립트를 이용하는 방법과 CSS 이용하는 방법에는 각각의 장단점이 있다.

 

자바스크립트를 이용하여 parallax scrolling을 구현하면,

-  직접 style을 제어할 수 있기 때문에 구현의 자유도가 높다.

-  클릭 등의 사용자가 발생시키는 이벤트에 따라 복잡한 인터렉션, 애니메이션의 구현이 가능하다.

-  인터렉션이 복잡해질 수록 웹 성능에 영향을 줄 수 있다.

 

CSS를 이용하여 parallax scrolling을 구현하면,

-  가볍고 효율적으로 인터렉션을 구현할 수 있다.

-  사용자와의 상호작용을 통한 인터렉션은 구현하기 제한적이다.

 

 

 

 

 

모바일에서는 parallax scrolling을 사용할 때 주의가 필요하다.

 

-  스크롤을 할 때마다 여러 요소에 스크립트가 실행되면 성능 저하를 일으킬 수 있다.

-  터치스크린의 스크롤 속도와 방향 조절을 어렵게 만들 수 있다.

-  모바일의 경우 가로, 세로 화면 방향 전환으로 인해 화면 사이즈, 스크롤 높이 등이 바뀔 수 있어 의도대로 동작하지 않을 수 있다.

 

parallax scrolling의 경우 유저의 관심을 끌고 사용자 경험을 향상 시키기 위한 기법으로 사용하는 것이 대부분이다.

 

따라서, parallax scrolling이 모바일에서 의도치 않은 동작이나 성능저하로 인해 사용자 경험에 부정적인 영향을 미치게 된다면 parallax scrolling을 사용하는 것을 다시 한번 고려해보고 꼭 필요한 부분에만 parallax 동작을 구현하는 방향으로 하는 것이 좋을 것이다.

 

 

 

만약 모바일에서 parallax 동작을 멈추게 하고 싶다면,

 

자바스크립트를 이용한 경우 document.documentElement.clientWidth로 뷰포트 너비를 알아내서 화면 크기에 따른 스크립트 설정을 다르게 제어할 수 있다.

 

CSS를 이용한 경우 media query를 통해 화면 크기에 따른 스타일 다르게 설정하여 parallax 동작을 멈추게 할 수 있다.