속보형 무한 롤링 텍스트 배너 만들기
2023-02-24 업데이트 : 마우스 호버를 하면 롤링 배너가 멈췄다가, 마우스가 벗어나면 다시 롤링이 시작되는 이벤트 처리 추가(하단 소스파일 다운로드)
-----------------------------------------------------------------
작은 영역 안에 여러 개의 단문 텍스트를 무한 롤링해서 표현하는 배너를 이용하면 작은 웹페이지의 자투리 영역을 활용하거나 주목도가 높은 배너를 제작할 수 있습니다.
기본적으로 가로로 긴 문자열을 위, 또는 아래로 반복적으로 스크롤해서 회전하는 방식으로 제작하기 때문에 구조는 아주 단순합니다.
CSS로 최적화를 잘 하면 라이브러리나 모듈로 구현하는 방식보다 단순하고 가볍게 구현할 수 있고, 이 방법을 이용해서 배너를 구현해보겠습니다.
설명 맨 끝에 완성된 코드 압축 파일 링크가 있습니다.
다운로드해서 동작하는 방식을 확인해가면서 읽으면 이해가 더 쉽습니다.
무한 롤링 텍스트 배너 HTML 작성하기
먼저 배너의 HTML 구조는 다음과 같습니다.
".rollingbanner" 클래스가 배너의 루트 요소가 됩니다.
롤링하는 텍스트 내용은 목록으로 전체 내용을 관리하게 됩니다.
구조가 단순하기 때문에 특별히 신경 써야 할 내용은 없고 롤링 시작할 때 기본 상태 표시를 설정하가 위해 ".prev", ".current", ".next" 클래스로 배너가 롤링되는 기본 순서를 지정합니다.
배너가 롤링되는 구조에 대해서는 밑에서 자세히 설명합니다.
클래스 중 ".current" 클래스는 처음 롤링이 시작할 때 맨 처음 표시하는 텍스트 행입니다.
예제에서는 첫 번째 목록 요소에 표시를 했지만, 다른 목록 요소에 표시를 해서 최초로 표시되는 배너 텍스트 행을 임의로 지정할 수 있습니다.
<div class="rollingbanner ">
<div class="title">속보 > </div>
<div class="wrap">
<ul>
<li class="current"><a href="#">노바백스 백신 2월중순부터 접종</a></li>
<li class="next"><a href="#">얼어붙은 투심에…현대엔지니어링 상장 철회</a></li>
<li><a href="#">"일본 정부, 사도광산 세계유산 추천 방침 굳혀, 일본과 갈등 첨예화 예상"</a></li>
<li><a href="#">"공법변경 구조검토 요구, 현산 측이 묵살했다"</a></li>
<li class="prev"><a href="#">12월 주담대 금리 연 3.63%…7년7개월 만에 최고</a></li>
</ul>
</div>
</div>
무한 롤링 텍스트 배너가 동작하는 방식
다음 그림의 진행 순서를 보면 배너 텍스트가 어떻게 이동하는지 알 수 있습니다.
CSS로 정의한 ".prev", ".current", ".next" 클래스를 자바스크립트를 이용해서 순차적으로 다음 요소에 적용하면 자연스럽게 배너 텍스트가 애니메이션 되면서 이동을 하게 됩니다.
CSS 디자인 작성하기
완성된 텍스트 롤링 배너 CSS를 다음과 같습니다.
기본적인 레이아웃을 만드는 CSS 이므로 크게 어렵지는 않습니다.
"prev", ".current", ".next" 클래스는 배너 텍스트를 애니메이션 하기 위해 사용하는 클래스이고, 자바스크립트에서 이 클래스를 제어해서 롤링 애니메이션 효과를 만들게 됩니다.
.rollingbanner{
position: relative;
width: 380px;
height: 32px;
font-size: .875rem;
letter-spacing: -1px;
padding: 7px 15px;
box-sizing: border-box;
background-color: #f0f0f0;
border-radius: 16px;
}
/* 타이틀 */
.rollingbanner > .title{
font-weight: bold;
float: left;
padding-right: 10px;
}
/* 롤링 배너 */
.rollingbanner > .wrap{
position: relative;
width: auto;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
.rolling ul{
list-style: none;
}
.rollingbanner li{
position: absolute;
top: -36px;
left: 0;
}
/* 이전, 현재, 다음 롤링 배너 표시 */
.rollingbanner li.prev{
top: 36px;
transition: top 0.5s ease;
}
.rollingbanner li.current{
top: 0;
transition: top 0.5s ease;
}
.rollingbanner li.next{
top: -36px;
}
.rollingbanner a{
display: block;
display: -webkit-box;
text-decoration: none;
-webkit-line-clamp: 1;
-webkit-box-orient:vertical;
overflow: hidden;
color: #000;
}배너 요소는 텍스트 내용이 길어지면 배너 너비를 넘어서는 내용은 감추어져 보이지 않게 됩니다. 다만 이렇게 잘렸을 때 이후에 내용이 더 있는지 알 수가 없기 때문에 "..."가 표시되도록 해서 이후 내용이 더 있음을 표시하는 것이 좋습니다.
문자열의 표시 부분 끝에서 글자가 잘못 잘리면 다음과 같이 글자 일부만 표시되는 문제가 생기기도 합니다.
긴 텍스트 내용이 1행 부분만 배너 너비 표시 영역 안에 "..."까지 붙어서 표시되도록 하려면 다음의 클래스를 적용하면 됩니다.
공통적으로 많이 사용하는 기법이므로 숙지해두는 것이 좋습니다.
인터넷 익스플로러를 제외한 대부분 브라우저에서 잘 지원됩니다.
인터넷 익스플로러, 또는 호환되지 않는 웹 브라우저를 지원하려면 "height" 속성으로 높이 값을 강제로 지정해야 합니다.
.rollingbanner a{
display: block;
display: -webkit-box;
text-decoration: none;
-webkit-line-clamp: 1;
-webkit-box-orient:vertical;
overflow: hidden;
color: #000;
}디자인이 입혀진 롤링 배너는 다음과 같은 모양이 됩니다.
보이지는 않지만, 다른 목록 항목들은 배너 위와 아래 위치에 보이지 않는 상태로 배치가 되어 있습니다.
위에 설명하는 CSS 예제에서는 감추어진 목록 요소 위치가 실제로는 조금 다를 수 있습니다. 개념상 이렇게 배치된다는 뜻입니다.
이제 ".prev", ".current", ".next" 클래스를 순서대로 하나씩 밀어서 애니메이션이 되도록 하는 자바스크립트 코드만 만들면 됩니다.
자바스크립트로 롤링 애니메이션 구현하기
인터벌 메서드로 일정 시간 간격으로 콜백 함수를 호출하고 콜백 함수에서 다음 배너 텍스트를 롤링해서 보여주는 간단한 함수를 하나 만들게 됩니다.
".prev", ".current", ".next" 클래스를 하나씩 밀어서 다음 목록 항목에 적용하면 됩니다.
적용 순서는 삭제되는 ".prev" 클래스부터 시작해서 ".current" -> ".next" 순서로 처리하면 됩니다.
".prev", ".current" 클래스는 각각 기존의 ".next", ".current" 클래스를 이어받아서 클래스만 변경해주면 됩니다.
".current" -> ".prev", ".next" -> ".current"로 변경합니다.
".next" 클래스는 다음 목록 요소를 선택(nextElementSibling 속성 사용)하면 되는데, 목록 마지막 요소일 때는 목록 처음 요소에 ".next" 클래스를 적용하는 조건 처리를 해야 순환 루프가 돌게 됩니다.
document.addEventListener('DOMContentLoaded', ()=>{
var interval = window.setInterval(rollingCallback, 3000);
})
function rollingCallback(){
//.prev 클래스 삭제
document.querySelector('.rollingbanner .prev').classList.remove('prev');
//.current -> .prev
let current = document.querySelector('.rollingbanner .current');
current.classList.remove('current');
current.classList.add('prev');
//.next -> .current
let next = document.querySelector('.rollingbanner .next');
//다음 목록 요소가 널인지 체크
if(next.nextElementSibling == null){
document.querySelector('.rollingbanner ul li:first-child').classList.add('next');
}else{
//목록 처음 요소를 다음 요소로 선택
next.nextElementSibling.classList.add('next');
}
next.classList.remove('next');
next.classList.add('current');
}작성한 기본 CSS는 다음에 표시될 목록 요소가 배너 영역 위에 위치(".next" 클래스의 top 값이 -36px)하고 있다 밑으로 내려와서 표시되고, 다시 배너 아래 바깥 영역으로 사라집니다.
반대로 아래에서 위쪽 방향으로 텍스트가 롤링되도록 하려면 다음과 같이 CSS를 추가로 작성해서 ".rollingbanner" 클래스를 가진 요소에 ".reverse" 클래스를 추가해주면 반대방향으로 애니메이션 되게 됩니다.
/* 반대 방향으로 진행 */
.rollingbanner.reverse li.prev{
top: -36px;
transition: top 0.5s ease;
}
.rollingbanner.reverse li.next{
top: 36px;
}자바스크립트 코딩을 최소화해서 CSS 만으로 애니메이션 방향을 전환할 수 있으므로 자바스크립트로 방향을 전환하는 것보다 조금 더 최적화된 코드를 만들 수 있습니다.
완성된 소스 다운로드
HTML 파일 안에 CSS와 자바스크립트 코드가 모두 들어 있습니다.