자바스크립트 안 쓰고 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배씩 떨어뜨린 효과입니다. 비유하자면 저 동그라미 div에는 각자 margin의 right와 left 값이 모두 동일하게 적용되어 있는 것이죠.

참고로 꼭 4개일 필요는 없습니다. 더 만들어도 됩니다. 미리보기에는 반응형으로 적용되어 있으며 가로 사이즈를 100% 다 사용 중입니다. 원형의 오브젝트 개수가 늘어나면 자동으로 사이 간격이 알아서 각자 재조정 됩니다. 이유는 방금 언급한 justify-content: space-around; 때문이죠.

그렇게 완성된 부모 div를 복사하여 바로 오른쪽에 배치를 합니다. 왼쪽에 배치해도 상관은 없어요.

이제 이 전체의 div를 animation을 사용하여 왼쪽으로 등속도 운동하도록 만들겁니다. 그럼 어느정도를 움직이게 하면 되느냐?! 그것은 4개의 원을 감싸고 있는 부모 div의 가로 크기만큼만 이동시킬겁니다. 그러면 다시 처음 상태로 돌아오게 되는데 이때 마치 무한 슬라이드가 되는 효과를 가져다 줍니다. 이게 눈속임 포인트입니다. 반드시 1,2,3,4번을 감싸고 있는 div의 가로 크기만큼 애니메이션 효과를 만들어줘야 끊김없는 패러랙스 횡스크롤 애니메이션이 됩니다.

여기에서 우리가 실질적으로 보게 될 영역은 가장 처음에 만들었던 영역이며 여기에는 overflow: hidden을 적용시켜서 복사시킨 두번째 div를 숨길겁니다. 이렇게해서 무한 스크롤 효과를 최종 연출할 수 있는 것입니다. 그것이 미리보기의 예제입니다.

디테일 설명

그러면 이제 HTML 구조를 살펴봅시다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

< div id="main" >     < div id="wrap" >         < div class="box01" >             < div class="img01" >                 < span >1< / span >             < / div >             < div class="img02" >                 < span >2< / span >             < / div >             < div class="img03" >                 < span >3< / span >             < / div >             < div class="img04" >                 < span >4< / span >             < / div >         < / div >         < div class="box02" >             < div class="img01" >                 < span >1< / span >             < / div >             < div class="img02" >                 < span >2< / span >             < / div >             < div class="img03" >                 < span >3< / span >             < / div >             < div class="img04" >                 < span >4< / span >             < / div >         < / div >     < / div > < / div >

cs

보시면 가장 큰 부모 요소는 main 이라는 id값을 가진 div입니다. 그리고 1대 자식 요소는 wrap 이라는 id값을 가진 div죠. 즉 모니터 상으로 우리가 보여지는 부분이 main이며 슬라이드 시킬 녀석이 바로 wrap 입니다.

1 2 3

.box02 {     right :  -100% ; }

cs

그리고 두번째 box02 클래스명의 div는 첫번째 box01의 오른쪽에 바로 딱 맞게 배치를 하기 위해서 저는 right: -100%를 사용했습니다. 현재 box01과 box02에는 position: absolute;가 적용되어 있으므로 right 사용이 가능하니까요.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

@keyframes move {     0% {         left :  0 ;     }     100% {         left :  -100% ;     } } #main {     width :  100% ;     height :  120px ;     margin :  0 auto ;     overflow :  hidden ; } #wrap {     position :  relative ;     animation :  move 10s linear infinite ; } Colored by Color Scripter

cs

이제 에니메이션입니다. move라는 애니메이션 키프레임을 정의해 주었고 #main은 가로, 세로 크기를 정확하게 지정했습니다. 왜냐하면 이렇게 해야 overflow: hidden 사용이 가능해지기 때문입니다. 그리고 wrap 에는 절대 위치를, 마지막으로 animation 효과를 지정했습니다. 10초간 왼쪽으로 현재 가로 크기의 100%만큼 움직이는데 등속도 운동으로 무한 애니메이션을 지정해 주었죠. linear가 등속도, infinite가 무한인건 아마 이해하셨을 겁니다. 이렇게해서 자바스크립트의 도움 없이 가로로 무한 스크롤되는 CSS 애니메이션을 만들어 보았습니다. 이해가 좀 되시려는지요? 끝.