온라인 쇼핑몰을 구경하다가 따라하고 싶은 레이아웃을 발견했다.
한 화면에 두 개의 사진이 존재하고 각자 따로 움직이는 고론 레이아웃이었다. (아래 사진 참고)
그래서 혼자 한 번 따라해보자! 하고 만든 나의 결과물은 이렇다 ⬇️
(크롬 확장기능으로 녹화했더니 화질구지인 점 양해부탁 허허)
처음에는 scroll 이니깐 scrollTrigger 를 이용해보자 하고 한참 머리 싸매고 고민했는데
얘는 overflowY: hidden 이라서 scrollTrigger를 쓰기 애매한 부분이 있었다.
그래서 포기하고 gsap 만 사용하였다.
작동 원리는 한 컨테이너에 사진이 n개 있다면 사진을 담은 컨테이너의 위치를
window.innerheight * n개의 사진 중 현재 사진의 인덱스 만큼 transform 시켜주는 것이다.
구현하면서 신경썼던 점은
첫 째, Throttle 사용
wheel 이벤트는 내가 마우스휠을 드르륵 할 때마다 혹은 터치패드를 슥 터치할 때마다
발동되기 때문에 console.log를 찍어보면 수많은 콘솔로그가 찍히는 것을 발견할 수 있다. 리소스 낭비 사태를 방지하고자 Throttle 를 사용하여 한 반복주기 내에 이벤트가 또 다시 트리거 되지 않도록 하였다. Throttle과 비슷한 이벤트 제어 방법으로는 Debounce 가 있는데 throttle 과 debounce에 관한 글은 구글에 치면 많이 나오니 굳이 여기다 쓰지 않겠다 ㅎ_ㅎ
둘 째, 화면 resizing
맨 처음이나 맨 마지막에서 화면이 resize 되는 경우 사진이 막 위로 올라가거나 아래로 내려가서 보기 안 좋았다. 따라서addEventListener('resize') 이벤트를 추가하여 화면이 리사이즈 될 때마다 맨 컨테이너의 시작 지점으로 갈 수 있게끔 하였다.
이런 거를 뭐라 부르나 했더니 multiscroll 이라고 부르는구나 ㅎㅅㅎ
구글에 쳐보니 multiscroll 만을 위한 라이브러리도 존재하는 것 같다.
하지만 홀로 구현하는 재미가 또 있으니 헤헤..
다음엔 뭘 또 따라해볼까 ~_~
