Running Text Line or Marquee

Add dynamism and originality to your Gridbox website using a Running Text Line or as it is also called Marquee...
Learn more
How to create a running text line or marquee?
Add dynamism and originality to your Gridbox website using a Running Text Line or as it is also called Marquee.

The world of web design has many ways to make your website more interesting and attractive to customers. One of these ways is a running text line (marquee).

A running text is an animated web design element that allows text to move horizontally across the screen. A running text line can draw customers' attention to important messages or promotions on your site. This is an effective way to make information stand out from the rest of the content. If you have important news, special offers, or updates, you can use a running text line to draw users' attention to these events.

You will need the Gridbox Text plugin to implement the marquee. You can set any parameters in the Text plugin settings to make the effect more interesting. To change the color, set the Background in the Column. Also, if you want to make a running text line across the entire width of the screen, enable the Full Width option in the Row settings.

In conclusion, using a running text line is a great way to add interactivity and originality to your site, drawing customers' attention to important information and making their user experience more enjoyable.

Tools

Code editor

Estimated time

5 min.

Adding Class Suffix

1. The class suffix marquee-text-effect should be placed in the "Class Suffix" field of the Text plugin.

Adding CSS

2. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

 

.marquee-text-effect {
    display: inline-flex !important;
    overflow: hidden;
}
@keyframes marquee-text-effect {
    0% { transform:translateX(0%);}
    100% { transform:translateX(-100%);}
}
.marquee-text-effect .content-text {
    display: inline-flex;
    justify-content: space-around;
}
.marquee-text-effect .content-text > * {
    display: inline-block;
    padding: 0 10px;
    white-space: nowrap;
}

Adding JavaScript

3. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

 

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.marquee-text-effect').forEach((line) => {
        let text = line.querySelector('.content-text'),
            clone = p = null,
            quantity= Math.floor((line.offsetWidth / text.offsetWidth));
        if (quantity != 0) {
            for (let i = 0; i < quantity; i++) {
                p = text.firstElementChild;
                clone = p.cloneNode(true);
                p.after(clone)
            }
        }
        text.style.animation =  "marquee-text-effect 36s linear infinite";
        clone = text.cloneNode(true);
        line.append(clone)
    });
});

Something is not clear? Ask a question on community forums.