알아두면 좋은 Parallax Scrolling

Parallax Scrolling에 대해 알아보자!

Parallax Scrolling

레이어별 스크롤 속도를 다르게 해 입체감을 주는 기법으로 주로 게임이나 애니메이션에서 사용됐다.

JS와 CSS를 활용해 만들 수 있다.

스크롤 정도에 따라 요소들이 다른 속도로 움직이는 것을 의미한다.

Parallax Scrolling 또한 이벤트리스너를 사용해 코드를 구성할 수 있다.

 

JavaScript Window Object

브라우저의 윈도우 또는 탭에 관련된 정보를 담고 있는 전역 객체

2023.02.23 - [TIL] - 알아야 하는 전역 객체

알아야 하는 전역 객체

위 게시글에서도 살펴볼 수 있다.

 

Window 관련 메소드

• window.document
  일반적인 document와 동일하게 사용 가능하다.
• window.history
  브라우저의 세션 기록 조작 가능
• history.back
  뒤로가기
• window.open | window.close
  새 창 or 탭을 오픈 / 현재 창 or 탭을 닫음
• window.scrollX | window.scrollY
  수평/수직 스크롤 정도를 픽셀 단위로 변환

 

HTMLElement.style

해당 HTMLElement.에 inline style로 정의된 송성들을 담고 있는 객체로 HTML 요소의 인라인 스타일에 접근하고 조작하기 위해 사용된다. => CSS를 조작하는게 아니라 HTML/JS를 조작한다.

 

<script>
	window.addEventListener("scroll", () => {
    	document.getElementById("div-1").style.transform = `translateY(${window.scrollY * 1.5}px)`
    })
</script>

위 예제를 적용해보자.

 

See the Pen Untitled by Hyejis (@saramnim) on CodePen.

 

 

 

위 codePen으로 translateY의 곱해주는 수치 값을 변경하며 요소의 이동 속도를 결정할 수 있다.

 

CSS perspective

요소의 z = 0 평면과 사용자 사이의 거리를 정의하며 transform 효과를 주고자 하는 부모 요소에 적용할 수 있다.

perspective(거리)와 변형 효과는 반비례한다.

밑의 예제에서 확인해보자.

 

See the Pen Untitled by Hyejis (@saramnim) on CodePen.

 

 

이렇게 JS와 CSS를 사용해 parallax scrolling을 사용하는 방법을 알 수 있다.

그렇다면 뭘 사용하는 것이 좋을까?

이것 역시 어디에 사용하느냐에 따라 선호도가 갈린다.

JS의 경우 CSS보다 자유도가 높아 복잡한 인터렉션과 애니메이션을 구현할 수 있다.

그러나 그 복잡도로 인해 웹 성능에 지장을 줄 수 있으므로 결국 유저 input 등과 관계된 움직임이 필요한 경우에 적합하다.

그와 반대로 CSS의 경우 JS보다 가볍고 효율적이지만 자유도가 낮으므로 비교적 간단한 인터렉티브 요소 적용에 적합하다.