Parallax
Parallax
물체를 다각도에서 관찰할 때 발생하는 변화나 이동을 나타내는 현상
Parallax Scrolling
레이어의 요소들의 스크롤되는 속도를 다르게하여 페이지의 깊이감(입체감)을 주는 효과
시각적으로 멀리있는 물체는 느리게 이동되는것처럼 느껴지기 때문에 느리게 스크롤되는 요소는 빠르게 스크롤되는 요소보다 뒤에 있다고 생각하게 된다.
기능 구현
스크롤 감지
화면 내 스크롤 위치 → 얼마나 스크롤 되었는지
페럴렉스를 적용할 요소들의 움직임 제어 (빠르면 앞, 느리면 뒤)
스크롤 감지
scroll event listener
스크롤 위치
window.scrollx
→ 수평으로 얼마나 스크롤 됐는지 pxwindow.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);
}
Last updated