Parallax

Parallax

물체를 다각도에서 관찰할 때 발생하는 변화나 이동을 나타내는 현상

Parallax Scrolling

레이어의 요소들의 스크롤되는 속도를 다르게하여 페이지의 깊이감(입체감)을 주는 효과

• 시각적으로 멀리있는 물체는 느리게 이동되는것처럼 느껴지기 때문에 느리게 스크롤되는 요소는 빠르게 스크롤되는 요소보다 뒤에 있다고 생각하게 된다.

모바일에서는 권장하지 않는 기법이다.

• 페럴렉스 스크롤링은 추가적인 그래픽 처리를 필요하기 때문에 성능상 부담이 있다. (모바일은 다른 기기환경에 비해 성능의 제약이 있음)

• 모바일 기기는 화면 전환이 자유자재로 가능하기 때문에 화면 너비, 스크롤 높이가 쉽게 바뀌어 의도한대로 동작하지 않을 수 있어 사용성이 저하됨

• 보다 제한된 기기의 너비사이즈에서 이런 상호작용들이 컨텐츠를 탐색하는데 오히려 방해가 될 수 있다.

이런 이유로 모바일에서는 패럴렉스 기능을 제한하는것을 고려해봐야 한다.

기능 구현

• 스크롤 감지

• 화면 내 스크롤 위치 → 얼마나 스크롤 되었는지

• 페럴렉스를 적용할 요소들의 움직임 제어 (빠르면 앞, 느리면 뒤)

스크롤 감지

• scroll event listener

스크롤 위치

• window.scrollx → 수평으로 얼마나 스크롤 됐는지 px

• window.scrolly → 수직으로 얼마나 스크롤 됐는지 px

요소의 움직임 제어

• 스크롤 위치 값을 계산하여 translateY 속성을 통해 요소의 움직임을 제어

• 멀리 있는(적게 움직이는) 요소는 스크롤 값이랑 비슷하게 가져가면 된다.

  • 가깝게 있는(많이 움직이는) 요소는 스크롤 값 보다 더 크게 가져감

CSS perspective

요소의 깊이감, 원근감을 부여하기 위해 사용하는 CSS 3D 속성

• 요소와 사용자 화면간의 거리

• 값이 작을수록 transform 효과가 강해짐

  • 값이 작으면 가깝게 있고, 값이 크면 멀리있음

• transform 효과를 적용할 요소의 부모에 적용

• 자식 요소들의 translateZ를 다르게 줘서 스크롤 속도를 다르게 만들 수 있다.

  • translateZ에 작은 값을 넣을 수록 멀리있게 표현된다.

.parent {
  perspective: 1px;
}

.children {
  position: absolute;
}

.children-A {
  transform: translateZ(-1px);
}

.children-B {
  transform: translateZ(-2px);
}

CSS로 구현하는 것은 JS로 구현하는것에 비해 가볍고 효율적(GPU 처리)이지만 직접 조작 가능한 인터렉티브 요소가 제한적이다.