By dororok 
“끊김없는” 무한으로 돌아가는 배너 만드는 방법
위와 같은 끊김없는 돌아가는 배너를 만들 수 있습니다 🙂
일반 사이트의 경우
아래의 코드를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/* Rolling Banner */
.rolling-banner {
background-color: grey;
color: white;
}
.content {
font-family: 'Bebas Neue' !important;
font-size: 2.5rem;
padding-left: 0.25em;
padding-top: 35px;
padding-bottom: 30px;
}
.outer div {
display: inline-block;
}
.loop {
white-space: nowrap;
animation: loop-anim 30s linear infinite; /* 30s 의 시간을 조절하면 배너가 돌아가는 속도 조절 가능 */
}
@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50%; /* This works because of the div between "outer" and "loop" */
}
}
/* /Rolling Banner */
</style>
</head>
<body>
<div class="rolling-banner">
<div class="outer">
<!-- This div is important! It lets us specify margin-left later on. -->
<div>
<div class="loop">
<div class="content">ONNUSOFTWARE </div>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.outer').forEach((el) => {
let content = el.querySelector('.content');
repeatContent(content, el.offsetWidth);
let slider = el.querySelector('.loop');
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
</script>
</body>
</html>워드프레스(엘리멘터)의 경우
1) Rolling Banner 컨테이너에 rolling-banner클래스를 부여합니다
2) 안에 HTML 엘리멘트를 추가하고, 아래의 코드 1을 붙여넣습니다
<div class="rolling-banner">
<div class="outer">
<!-- This div is important! It lets us specify margin-left later on. -->
<div>
<div class="loop">
<div class="content">ONNUSOFTWARE </div>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.outer').forEach((el) => {
let content = el.querySelector('.content');
repeatContent(content, el.offsetWidth);
let slider = el.querySelector('.loop');
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 300) {
el.innerHTML += html;
counter += 1;
}
}
</script>3) 추가 CSS로 들어갑니다. (Astra 테마 사용중. 다른 방법으로 CSS를 추가해도 상관없습니다.)
4) 아래의 CSS 코드를 붙여넣습니다
/* Rolling Banner */
.rolling-banner {
background-color: grey;
color: white;
}
.content {
font-family: 'Bebas Neue' !important;
font-size: 2.5rem;
padding-left: 0.25em;
padding-top: 35px;
padding-bottom: 30px;
}
.outer div {
display: inline-block;
}
.loop {
white-space: nowrap;
animation: loop-anim 30s linear infinite;
}
@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50%; /* This works because of the div between "outer" and "loop" */
}
}
/* /Rolling Banner */
끊김없는 롤링배너 완성!