홈 화면 슬라이더 업데이트!

190805 제작일지에도 좌, 우로 슬라이드 되는 애니메이션을 추가했었는데, 그때와는 좀 많이 다른 방식의 애니메이션입니다.

당시엔 슬라이더에 들어있는 아이템 하나하나에 class를 부여해서, 보는 중인 아이템, 다음에 나올 아이템, 이전을 누르면 나올 아이템 세 가지 모두 별도의 class를 갖고 있어야 했습니다. 단순히 이전 / 다음만 클릭하면 상관없는데, 슬라이더 하단에 있는 버튼을 클릭하면 저 세 class를 다 다시 부여해주고 애니메이션을 초기화하고 보여주느라 생각보다 스크립트 짜기도 귀찮고 브라우저에 부하도 많이 걸렸습니다.

하지만 이제는 아이템이 전부 1열 횡대로 늘어서 있고, 컨베이어 벨트 움직이듯 컨테이너만 움직여서 아이템을 보여줍니다. 애니메이션도 예전엔 자바스크립트는 class만 추가 / 삭제하고 css에서 모든 걸 다뤘다면, 이젠 자바스크립트에서 애니메이션을 다룹니다. js에서 css로 넘기고 다시 css가 html을 그릴 시간에 js 혼자 html 수정하는 게 훨씬 낫겠더라고요.
물론 css에선 ease-in-out 혹은 cubic-bezier()로 효과를 쉽게 제어할 수 있지만 js에선 x축엔 시간 y축엔 이동 거리 놓고 그래프 생각하며 함수로 만들어줘야 하는 귀찮음이 있긴 합니다만...

슬라이더의 첫 번째 아이템 앞엔 마지막 아이템의 클론이, 마지막 아이템 뒤엔 첫 번째 아이템의 클론을 추가해 애니메이션이 끊기지 않고 표시될 수 있도록 했습니다.

마지막 아이템에서 다음 버튼을 클릭하면 슬라이더 아래의 목록에선 첫 번째 아이템이 표시 중이라 나오지만, 사실은 마지막 아이템 다음에 복제된 첫 번째 아이템이 나타나는 겁니다. 이러면 결국 마지막 아이템에서 클론까지 넘어가는 애니메이션이 끝남과 동시에 컨베이어 벨트의 위치를 처음으로 돌려야 하는데, 이것도 js로만 애니메이션을 다루니 훨씬 쉽더라고요.

그리고 슬라이드가 가능하단 걸 직관적으로 표시하기 위해 슬라이더 위에선 손바닥 모양의 커서가 출력됩니다. 클릭하면 손을 웅크렸다가 마우스를 떼면 손도 다시 폅니다.

아직은 많이 미완성이라 쪽팔려서 코드를 공개하진 못하겠는데, 조금 더 완벽한 슬라이더를 만들면 공유도 고려해봐야겠네요.