Parallax Scrolling (JS vs CSS)

 

 

CSS 를 이용하기

• 부모요소에 height와 perspective 속성을 설정하여 parallax 효과를 간단하게 구현할 수 있다.
• 비교적 가볍고 간단하게 효율적으로 인터렉티브 요소 적용이 가능하다.
• 인터렉티브 요소 조작이 제한적으로 복잡한 인터렉션 구현에 한계가 있다.

See the Pen parallax-scrolling-css by KangJi (@Kangjii) on CodePen.

 

Javascript 로 구현

• 스크롤에 따라 직접적으로 객체에 효과를 주어 직접적인 통제가 가능하여 구현의 자유도가 높다.
• 사용자의 인풋에 따르는 등 복잡한 인터렉션, 애니메이션 구현이 가능하다.
• 인터렉션 요소에 따라 웹성능에 지장을 줄 수 있다.
• 사용자의 인풋 등과 관계된 인터렉티브 구현이 필요한 경우에 적합하다.

See the Pen parallax-scrolling-js by KangJi (@Kangjii) on CodePen.

 

 

모바일 Parallax 동작 이슈

 

모바일 화면의 경우 방향전환이 가능함으로 인해 설정해준 사이즈와 스크롤 높이 등이 

쉽게 바뀔 수 있어 스크롤에 따라 패럴럭스가 의도대로 동작 하지 않을 수 있다.

 

PC의 경우 마우스 또는 트랙패드로 스크롤하지만

모바일은 터치스크린으로 동작이 되기때문에 스크롤의 속도와 방향 조절을 어렵게 만들 수 있다.

 

저성능 기기에서 느린 스크롤 등의 성능저하를 일으킬 수 있다,

 

위의 사용자 경험을 해칠수 있는 점들을 고려하여 구현이 필요함에 따라

모바일 기기에서 상황에 따라 페럴럭스 스크롤의 동작을 제외시킬때 해결방법

 

CSS에서는 미디어쿼리를 통해 

설정해주었던 perspective 속성값을 없애주면 된닥.

 

javascript의 경우

viewport 로 접근하여 

 

 

documentElement.clientWidth

- html 문서의 화면노출 width 값 (border, margin, scrollbar 제외한 너비)