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

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.