marquee 소스 문의드립니다.
본문
https://jdcompany.iwinv.net/#sec03
위 url에 좌측으로 흐르는 소스를 넣었는데요
이게 빈 공간 없이 계속 무한루프로 할수 있는 방법이 있을까요?
소스 도움좀 부탁드립니다..ㅠㅠ
답변 1
javascript 샘플
const marquee = document.querySelector('.marquee');
const slides = marquee.querySelectorAll('span');
const slideWidth = slides[0].offsetWidth;
const slideCount = slides.length;
let currentSlide = 0;
let isSliding = false;
function slide() {
if (!isSliding) {
isSliding = true;
marquee.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
currentSlide++;
if (currentSlide >= slideCount) {
currentSlide = 0;
}
setTimeout(() => {
isSliding = false;
slide();
}, 5000);
}
}
slide();
css 로 할때 샘플
.marquee {
overflow: hidden;
width: 100%;
height: 100%;
}
.marquee div {
display: flex;
width: calc(100% * 5);
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
답변을 작성하시기 전에 로그인 해주세요.