CSS만으로 구현하는 무한 스크롤

홈페이지 제작을 하다보면 슬라이드를 사용하는 경우가 왕왕 있습니다.
슬라이드 내에 많은 기능이 들어가야 하다보면 필연적으로 jQuery와  같은 스크립트를 많이 사용하곤 합니다. 그러나 기능이 많지 않거나 브랜드, 고객사 등을 그냥 흘려보내는 용도의 홍보용 배너 같은 것을 제작할 경우도 자주 있는데 그럴 땐 굳이 스크립트 사용없이 html과 css만으로도 구현이 가능한 부분이 많이 있어 해당 방법을 공유해 보고자 합니다. 

웹을 오래 전부터 사용하신 분은 <marquee> 태그를 아실텐데요. 현재는 사용되고 있지 않는 태그입니다. 이전 IE가 주력 브라우저 시장을 차지하고 있을 때 표준이 아닌 태그들이 정말 많이 사용된 시절이 있었네요. 갑자기 추억에 감겨 버렸네요.. 😅

그 <marquee> 태그가 텍스트나 이미지에 스크롤 효과를 만드는데 사용되었던 태그입니다. HTML5로 넘어오면서 더 이상 사용되지 않으므로 새로운 프로젝트 진행에는 권장되지 않습니다. 그러나 이전 웹사이트나 레거시 코드에서는 간혹 발견되는 경우도 있습니다. 
최신 웹 개발에서 스크롤 효과를 만들려면 CSS 애니메이션이나 jQuery와 같은 JavaScript 라이브러리를 사용합니다. 
이번에 확인해 볼 방법이 바로 CSS 애니메이션을 활용한 방법입니다. 

그럼 어떻게 동작하는지 한번 먼저 보고 오실까요?

무한스크롤 예제 미리보기

그럼  HTML과 CSS만으로 구현한 무한 스크롤의 소스를 같이 한번 보시겠습니다. 

반응형

HTML 소스 영역

<div class="slider">
    <div class="slide-track">
    	// 객체(배너)의 갯수 만큼 반복
        // 이미지, SVG, 텍스트 등 원하는 객체를 삽입하여 스크롤 가능
    	<div class="slide">
        	<img src="이미지 경로" alt="대체 텍스트" />
        </div>
        <div class="slide">
        	<img src="이미지 경로" alt="대체 텍스트" />
        </div>
        <div class="slide">
        	<img src="이미지 경로" alt="대체 텍스트" />
        </div>
    </div>
</div>

CSS 소스 영역

.slider{height:200px;margin:auto;overflow:hidden;position:relative;width:100%;}
.slider::before, .slider::after{
    background:linear-gradient(to right,white 0%,rgba(255,255,255,0) 100%);content:"";height:200px;width:160px;position:absolute;z-index:2;
}
.slider::after{right:0;top:0;transform:rotateZ(180deg);}
.slider::before{left:0;top:0;}
.slider .slide-track{
    -webkit-animation:scroll 40s linear infinite;
            animation:scroll 40s linear infinite;
    display:flex;width:calc(240px * 14);
}
.slider .slide-track:hover{animation-play-state:paused;}
.slider .slide{height:200px;width:240px;display:flex;align-items:center;justify-content:center;}
.slider .slide svg{width:80px;height:80px;}
@keyframes scroll {
    0%{transform:translateX(0);}
    100%{transform:translateX(calc(-240px * 7));}
}

객체의 크기(width)에 따라 @keyframes 영역의 수치와 slide-track 영역의 크기 수치 등은 조정하면서 사용하시면 됩니다. 
추가적으로 마우스 오버시 애니메이션을 중지할 수 있도록 하려면 "animation-play-state:paused" 속성을 활용하면 되겠습니다. 

앞으로도 간단한 방법으로 자주 사용되는 소스들을 공유해 보도록 하겠습니다. 
제가 사용하는 방법이 정답은 아니니 더 좋은 방법이 있으시면 공유해 주셔도 감사하겠습니다.