How To Create Scrolling Text In Elementor

July 31, 2023

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>

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post: