Texto Ilimitado

				
					CSS Personalizado:

@-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: 1em 0.3em;
  display: flex;
  color: #000000;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}


Javascript (usar widget HTML):

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


Atributos do container:

data-marquee|SEU TEXTO AQUI  •