In this Elementor tutorial I will show you an easy way to add a looping marquee effect to your website.
Timestamps:
- 0:00 Introduction
- 0:17 Right to Left Animation
- 4:40 Left to Right Animation
Right to Left Animation Code:
.marquee {
overflow: hidden;
display: flex;
}
.marquee h1{
white-space: nowrap;
}
<script>
function Marquee(selector, speed) {
const parent = document.querySelector(selector);
const clone = parent.innerHTML;
let i = 0;
parent.innerHTML += clone;
setInterval(() => {
i += speed;
if (i >= parent.children[0].clientWidth) i = 0;
parent.children[0].style.marginLeft = `-${i}px`;
}, 0);
}
window.addEventListener('load', () => Marquee('.marquee', .5));
</script>
Left to Right Animation Code:
.marquee2 {
overflow: hidden;
display: flex;
}
.marquee2 h1{
white-space: nowrap;
}
<script>
function Marquee2(selector, speed) {
const parent = document.querySelector(selector);
const clone = parent.innerHTML;
let i = parent.children[0].clientWidth;
parent.innerHTML += clone + clone;
const totalWidth = parent.children[0].clientWidth * 2;
setInterval(() => {
i -= speed;
if (i <= 0) i = totalWidth;
parent.children[0].style.marginLeft = `-${i}px`;
}, 0);
}
window.addEventListener('load', () => Marquee2('.marquee2', .5));
</script>
