marquee-text.css

/* Inserir um texto com efeito de letreiro */
/* Colar o texto abaixo em Avançado => Atributos (* requer Elementor Pro*) do conteiner: */

data-marquee|Seu texto aqui •

/* ======================================================================= */
/* Colar o código Javascript abaixo em um widget HTML dentro do conteiner: */

<script>
const getMarqueeNode = content => {
const el = document.createElement('div');
el.setAttribute('data-marquee-style', true);
el.textContent = content
return el;
}
class Marquee {
constructor(el){
this.el = el;
this.content = el.getAttribute('data-marquee')
this.render();
}

render(){
// create the shadow element to measure and calculate
// the amount of animated items required for marquee

// create
const shadow = getMarqueeNode(this.content);
shadow.setAttribute('data-marquee-shadow', true);
// add shadow element to sanitized DOM
this.el.innerHTML = "";
this.el.appendChild(shadow);
// calculate how many visible items are needed
const inView = this.calculateItemsInView(shadow);
// create container to house animated visible items
const overflow = document.createElement('div');
overflow.setAttribute('data-marquee-overflow', true);
const content = document.createElement('div');
content.setAttribute('data-marquee-container', true);
// put the content container into an overflow: hidden wrapper
overflow.appendChild(content);
// double the amount to fill the screen to animate loop
const count = inView * 3;
// populate with children
for( var i = 0; i < count; i++) {
content.appendChild(getMarqueeNode(this.content))
}
// add to DOM
this.el.appendChild(overflow);

// debug
// console.log("visible items required", inView);
// console.log("total items required", count);
}

calculateItemsInView(ref){
const [single, total] = [ref.clientWidth, ref.parentNode.clientWidth];
// ceil in order to ensure there's never a shortage
return Math.floor(total / single) + 1;
}
}
// find elements and create Marquee instances
const nodes = document.querySelectorAll('[data-marquee]')
const arr = Array.from(nodes);
const refs = (arr || []).map( node => new Marquee(node) );
// recalculate on resize
window.addEventListener( 'resize', () => refs.map( r => r.render() ) );
</script>


/* ================================================================ */
/* Colar o CSS abaixo em Configurações da página => Custom CSS: */

@-webkit-keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

[data-marquee] {
  --loop-duration: 30s;
  display: block;
}

[data-marquee] [data-marquee-shadow] {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap;
}

[data-marquee] [data-marquee-overflow] {
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

[data-marquee] [data-marquee-container] {
    display: flex;
    -webkit-animation: marquee var(--loop-duration) linear infinite;
    animation: marquee var(--loop-duration) linear infinite;
}

[data-marquee] [data-marquee-style] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-marquee-style] {
  padding: 1.5em 0.3em;
  display: flex;
  color: #000000;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}