자바스크립트 안 쓰고 CSS 만으로 가로 무한 스크롤 애니메이션 연출 방법
진짜 오랜만에 진행된 HTML 모임 오랜만에 HTML과 CSS를 사용했습니다. 이제 직장 생활도 거의 다 적응했고 바쁜 와중에 소소하게 시간을 만들어 모임도 꾸준히 진행하고 있거든요. 이번 모임은 진짜 간만에 모이는 HTML 소모임입니다. 이번에 처음 나오신분께서 웹퍼블리싱을 이제 막 입문하셨는데 가로 무한 스크롤의 비밀을 잘 모르겠다고 하셔서 이야기를 들어보고 직접 만들어 봤습니다. 진짜 오랜만에 하는거라서 애니메이션 관련을 다 까먹었지만 과거의 저는 복습을 꽤나 잘 했기에 이미 블로그에 관련 글을 작성해둬서 어렵지 않게 문제를 해결할 수 있었지요. 과거의 나 칭찬합니다. 일단 최종 완성본부터 미리 보시기 바랍니다. 미리보기 See the Pen CSS : Parallax infinite horizontal scroll animation (Not JS!) by rgy0409 ( @rgy0409 ) on CodePen . 이런 형태입니다. 보시면 아시겠죠? 저는 자바스크립트를 아직 제대로 활용할 줄 모릅니다. 따라서 최대한 CSS로 퉁치려고 하죠. 위의 미리보기에 있는 가로 무한 스크롤의 비밀은 크게 두 가지입니다. 하나는 overflow: hidden 이며 또 다른 하나는 animation 입니다. 이 두개가 적절히 잘 배치가 되어 지금 무한 스크롤 중으로 보여지는 것입니다. HTML과 CSS를 자세히 살펴보시면 이게 결고 가로로 쭈~욱 붙어있는게 아니라는걸 아실 겁니다. 원리 제가 생각한 눈속임은 이런 식입니다. 먼저 div 안에 4개의 div를 만들어 둡니다. 그리고 4개의 div를 일단 구별할 수 있도록 동그라미로 만들었습니다. 정렬의 핵심은 justify-content: space-around; 인데 이것은 양 사이드의 떨어진 거리만큼 각 오브젝트를 정확히 2배씩 떨어뜨린 효과입