Auto Scrolling Text Elementor – Creating A Marquee Effect

Auto-scrolling text Elementor tutorial – learn how to create a dynamic marquee effect. Wicky Design walks you through the process of creating right-to-left and left-to-right animations, understanding the role of content in the animation, and styling and customizing your animation.

Understanding the Basics of Auto Scrolling Text in Elementor

To create auto-scrolling text in Elementor, you’ll need a couple of things. First, you’ll need a heading widget. This is where you’ll put the text that you want to scroll. You’ll also need to assign a unique CSS class to this widget. This is like giving your widget a name so that you can refer to it later.

The other key player in this process is an HTML widget. This is where you’ll put some JavaScript code. JavaScript is a programming language that lets you add interactive features to your website, like auto-scrolling text!

Creating a Right-to-Left Animation

Let’s start by creating a right-to-left animation. Here’s how you can do it:

1. Drag a heading widget onto your page.
2. Type in the text you want to scroll.
3. Go to the Advanced tab and add a unique CSS class. Let’s call it “marquee”.

Now, let’s add some CSS and JavaScript. Don’t worry, it’s not as scary as it sounds!

1. Go to the settings cog in Elementor.
2. Go to the Advanced tab and paste in the following CSS code:

   .marquee {
     overflow: hidden;
     display: flex;
   }
   
   .marquee h1{
     white-space: nowrap;
   }

   Source: Wicky Design

3. Drag an HTML widget onto your page.
4. Paste in the following JavaScript code:

   <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>

   Source: Wicky Design

   The “0.5” in the JavaScript code is the speed of the animation. You can change this number to make the animation faster or slower.

Understanding the Role of Content in the Animation

The amount of text you have matters. If you don’t have enough text, the animation might look a bit odd. It’s like trying to make a sandwich with too little bread – it just doesn’t work!

To fix this, you can repeat your text a few times. You can also add non-breaking spaces between your text. This is like adding extra slices of bread to your sandwich to make it just right.

Creating a Left-to-Right Animation

Creating a left-to-right animation is similar to creating a right-to-left animation. The main difference is that you’ll need to use a different CSS class. Let’s call it “marquee2”.

Here’s the CSS code you’ll need:

.marquee2 {
  overflow: hidden;
  display: flex;
}

.marquee2 h1{
  white-space: nowrap;
}

Source: Wicky Design

And here’s the JavaScript code:

<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>

Source: Wicky Design

Styling and Customizing the Animation

You can style your animation however you like. You can change the size of the text, the color, the background, and more.

Scrolling Text Elementor – Conclusion

You now know how to create auto-scrolling text in Elementor. It’s a fun way to add some movement to your website. So, why not give it a try? You might just find that it’s a lot of fun!