Parallax는 거의 JavaScript를 사용하여 처리되며, scroll 이벤트를 통하여 이벤트 핸들러에서 직접 DOM을 직접 수정하여 불필요한 reflows 와 paints 를 발생시킨다.
따라서, 브라우저 렌더링 파이프라인과 동기화되지 않은 상태에서 발생하여 프레임이 손실되고 버벅거린다.
그러나 모두 부정적인 것만은 아니다, requestAnimationFrame , DOM 업데이트의 지연은 parallax websites 을 긍정적으로 바꿀 수 있다.
결과적으로는, 만약 JavaScript의 의존성을 완전히 제거할 수 있다면 어떨까?
parallax effect를CSS로 구현하면, 모든 문제가 해소되고 브라우저가 hardware acceleration 을 이용할 수 있기 때문에 compositor가 모든 것을 처리할 수 있게된다. 그 결과, 프레임 rate가 일정하고, 스크롤이 매우 부드러워진다.
The theory
html
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div class="title">This is the "back" background</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">This is the "base" background</div>
</div>
</div>css
* {
margin: 0;
padding: 0;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
font-size: 200%;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 100vh 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
.title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}.parallax
parallax class 는 parallex magic 이 발생하는 곳이다.
height 와 perspective 를 정의하면, 원근범이 중심에 잠기므로 고정된 원점 3D 뷰포트가 생성된다.
overflow-y: auto 를 설정하면 요소 내부의 콘텐츠를 일반적인 방법으로 스크롤할 수 있지만, 하위 요소는 고정된 시점을 기준으로 렌더링된다. 이것이 parallax 효과를 만드는 핵심이다.
.parallax__layer
이름에서 알 수 있듯이 parallax 효과가 적용되는 콘텐츠의 레이어를 정의한다. 콘텐츠 흐름에서 요소를 꺼내 컨테이너의 공간을 채우도록 설정한다.
.parallax__layer--base & .parallax__layer--back
parallax 요소를 Z축을 따라 변환하여 (parallax 요소를 더 멀리 이동하거나 뷰포트에 더 가깝게 이동) parallax 요소의 스크롤 속도를 결정하는 데 사용된다. 간략하게 하기 위해 2개의 레이어 속도만 정의했다. 추후에 더 추가할 예정이다.
결과물을 살펴보면, "back" background font size가 줄어든 것처럼 보인다. 이처럼 3D 변환을 사용하면 요소의 크기가 변경되는 것처럼 보이는 부작용이 발생한다.
Depth correction 내용을 보며 이 문제를 해결해보자.
Depth correction
parallax 효과는 3D 변환을 사용하여 생성되므로 요소를 Z축을 따라 변환하면 뷰포트에 더 가까이 또는 더 멀리 이동하면 요소의 유효 크기가 변경되는 부작용이 있다. 이를 방지하기 위해서는 원래 크기로 렌더링되도록 요소에 scale() 변환을 적용해야 한다.
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
}scale 은 1 + (translateZ * -1) / perspective 으로 계산할 수 있다. 예를 들어 viewport perspective 을 1px로 설정하고 Z축을 따라 요소 -2px 를 변환하면 scale 계수는 3이 된다.
Controlling layer speed
Layer 속도는 perspective 과 Z 변환값의 조합에 의해 제어된다다. 음의 Z 값을 가진 요소는 양의 값을 가진 요소보다 느리게 스크롤된다. 값이 0 에서 멀어질수록 Parallax 효과가 두드러진다. (즉, translateZ(-10px)는 translateZ(-1px)보다 느리게 스크롤된다).
Parallax sections
앞의 예에서는 매우 간단한 내용을 사용하여 기본적인 기술을 설명했지만, 대부분의 Parallax 사이트는 페이지를 다른 효과를 적용할 수 있는 개별 섹션으로 나눈다. 방법은 아래와 같다.
먼저 layers 를 그룹화하기 위한 parallax__group 요소가 필요하다.
<div class="parallax">
<div class="parallax__group">
<div class="parallax__layer parallax__layer--back">
...
</div>
<div class="parallax__layer parallax__layer--base">
...
</div>
</div>
<div class="parallax__group">
...
</div>
</div>.parallax__group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
}이 예에서는 각 그룹이 뷰포트를 채우고 높이를 100vh로 설정하지만 필요에 따라 각 그룹에 임의의 값을 설정할 수 있다.
transform-style: preserve-3d 는 브라우저가 parallax_layer 요소와 위치를 평평하게 하는 것을 방지한다. position: relative는 자식 parallax_layer 요소를 그룹에 상대적으로 배치하기 위해 사용된다.
요소를 그룹화할 때 기억해야 할 중요한 규칙 중 하나는 그룹의 내용을 클리핑할 수 없다는 것이다.
parallax__group에 overflow: hidden 을 적용하면 Parallax 효과가 사라진다. 클리핑되지 않은 콘텐츠는 하위 요소가 넘치게 되므로 방문자가 문서를 스크롤할 때 콘텐츠가 올바르게 표시/숨겨지도록 그룹의 z-index 값을 창의적으로 사용해야 한다.
설계마다 구현이 다르기 때문에 계층화에 대한 명확한 규칙은 없다. Parallax 효과가 어떻게 작동하는지 알 수 있다면 계층화 문제를 디버깅하는 것이 훨씬 쉽다. 그룹 요소에 간단한 변환을 적용하면 이 작업을 수행할 수 있다.
.parallax__group {
transform: translate3d(700px, 0, -800px) rotateY(30deg);
}Example - debug option
https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
개발자 도구 > Layers
디버깅을 할 때, 개발자 도구를 열어서 Layers 를 클릭하여 들어가서 확인해보면 더 정확하 게 디버깅을 할 때 도움이 될 것 같다.
오류 해결
웹킷 기반 브라우저는 3D 공간으로 변환되고 확장되면서 요소의 유효 폭을 올바르게 계산하지 못하는 것이다. 이 버그로 인해 사용자는 overflow 속성으로 정의된 조건을 무시하고 콘텐츠를 가로로 스크롤할 수 있다. transform-origin 및 perspective-origin을 뷰포트 오른쪽에 고정함으로써 이 오류를 회피할 수 있다.
.parallax {
perspective-origin-x: 100%;
}
.parallax__layer {
transform-origin-x: 100%;
}REFERENCE
https://keithclark.co.uk/articles/pure-css-parallax-websites/
