Parallax 사용해서 멋진 랜딩페이지를

이 글은 The Parallax Effect - Fireship를 바탕으로 작성한 글입니다.

코드 - parallax

Parallax scrolling effect란?

Parallax는 시차라는 뜻이다.
Parallax scrolling effect(시차 스크롤 효과)는 웹사이트의 배경이 전경보다 느린 속도로 스크롤 되는 기술이다.

가장 대표적로 언급되는 Parallax scrolling effect(이후로는 PSE효과로 표기) 효과 페이지는 FireWatch라는 게임 페이지이다.

PSE효과를 잘 사용한 웹사이트는 한 눈에 사용자를 사로잡는 효과가 있다.

react-spring

PSE효과 직접 구현하려고 하면 감도 잡히지 않고, 아주 오랜 시간이 소요될 것이라고 예상이 된다.

그래서 사용하는 라이브러리가 바로 react-spring이다.

react-spring은 parallax를 아주 쉽고 빠르게 구현할 수 있게 도와준다.

설치

npm install @react-spring/parallax

위의 명령어를 통해 우리의 React 프로젝트에 설치한다.

사용 가이드

우리가 알아야 할 것은 단 두 개 Parallax와 ParallaxLayer이다.

import { Parallax, ParallaxLayer } from '@react-spring/parallax'

Parallax

Parallax는 ParallaxLayer를 담는 큰 컨테이너라고 생각하면 된다.
모든 ParallaxLayer를 감싸주면 된다.

<Parallax>
  <ParallaxLayer>
    ...
  </ParallaxLayer>
  <ParallaxLayer>
	...
  </ParallaxLayer>
  ...
</Parallax>

필수로 알아야하는 Props는 pages뿐이다.

• pages는 PSE효과를 감싸는 페이지를 몇 페이지로 나눌지 결정한다.
• 만약 page={4}를 넘기면 4페이지가 생긴다.
• 1개의 페이지는 100%의 viewport를 차지한다.

추가로 가로 스크롤을 하고 싶으면 props로 horizontal를 true로 넘겨주면 된다.

ParallaxLayer

ParallaxLayer는 각각의 페이지를 생성해준다.

Props들

• sticky
  • PSE효과에 필수적인 props다.
  • 기본값은 {start?: number = 0, end?: number = start + 1}이다
  • start부터 end까지 이 props를 넣은 layer가 sticky하게 고정된다.
• factor
  • 이 props로 넘긴 number 만큼 layer가 늘어난다.
  • 만약 1.5를 넘기면 viewport의 150%를 차지한다.
  • 기본값은 1이다.
• offset
  • 어느 페이지에 표기될지를 정해주는 props이다.
  • 첫 번째 페이지 상단으로 하려면 0을 넘겨주면되고, 세 번째 페이지 상단으로 하려면 2를 넘겨주면 된다.
  • 기본 값은 0이다.
• speed
  • 스크롤과 관련하여 layer가 이동하는 비율이다. 양수 또는 음수를 넣으면 된다.
  • 기본 값은 0이다.
• horizontal
  • layer가 수평으로 이동할지 여부이다.
  • boolean 값이다.