Title

JS Marquee

description

No plugin, a very smooth and simple JS Marquee

Published 2022-08-03

Modified 2022-08-19

content

				
					jQuery(document).ready(function($){
        const marquee = document.querySelectorAll('.marquee-js');
        let speed = 1.5;
        marquee.forEach(function(el) {
          const container = el.querySelector('.marquee-track-js');
          const content = el.querySelector('.marquee-track-js > *');
          //Get total width
          const elWidth = content.offsetWidth;
          //Duplicate content
          let clone = content.cloneNode(true);
          container.appendChild(clone);
          let progress = 1;
          function loop() {
            progress = progress - speed;
            if(progress <= elWidth * -1) {
              progress = 0;
            }
            container.style.transform = 'translateX(' + progress + 'px)';
            window.requestAnimationFrame(loop);
          }
          loop();
        });
 });
				
			

Multiple elements in a row

Cras gravida dui id tincidunt placerat. Sed varius sed nunc eu hendrerit.

In hac habitasse platea dictumst. Curabitur pharetra, mi vitae rutrum convallis!

Aenean et mauri.

Phasellus blandit commodo arcu, et consequat purus lacinia at

				
					<!-- Make sure content is always wider than the containing parent element or viewport if fullscreen, duplicate content in HTML or size with CSS as needed -->
<div class="marquee-js">
  <div class="marquee-track-js">
      <div class="marquee-content-wrap-js">
        <div class="card v1"><p>Cras gravida dui id tincidunt placerat. Sed varius sed nunc eu hendrerit.</p></div><!--
        --><div class="card v2"><p>In hac habitasse platea dictumst. Curabitur pharetra, mi vitae rutrum convallis!</p></div><!--
        --><div class="card v3"><p>Aenean et mauri.</p></div><!--
        --><div class="card v4"><p>Phasellus blandit commodo arcu, et consequat purus lacinia at</p></div>
    </div>
  </div>
</div>
				
			
				
					.marquee-js {
  position: relative;
  width: 100%;
  overflow:hidden;
  height:124px;
}

.marquee-js .marquee-track-js {
  position: absolute;
  display:inline-flex;
  white-space:nowrap;
  padding: 0;
}

.marquee-content-wrap-js {
  display:inline-flex;
  align-items: center;
}

.card {
  display:inline-flex;
  align-items: center;
  overflow:hidden;
  white-space:normal;
  font-size: 26px;
  line-height:28px;
  height:124px;
  max-height: 124px;
  padding:20px;
}
.card p {margin-bottom:0px;}

/* variations */
.card.v1 {
  background-color: black;
  color: white;
  width: 460px;
}
.card.v2 {
  background-color: grey;
  color: white;
  width: 560px;
}
.card.v3 {
  background-color: lightsalmon;
  color: black;
  width: 220px;
}
.card.v4 {
  background-color: orchid;
  color: black;
  width: 400px;
}
				
			

Single element

Nullam a aliquet tellus. Morbi tempor cursus sollicitudin.

				
					<!-- Make sure content is always wider than the containing parent element or viewport if fullscreen, duplicate content in HTML or size with CSS as needed -->
<!-- Make sure content is always wider than the containing parent element or viewport if fullscreen, duplicate content in HTML or size with CSS as needed -->
<div class="marquee-js">
  <div class="marquee-track-js">
      <div class="marquee-content-wrap-js">
        <p>Nullam a aliquet tellus. Morbi tempor cursus sollicitudin.</p>
    </div>
  </div>
</div>
				
			
				
					.marquee-js {
  position: relative;
  width: 100%;
  overflow:hidden;
  height:194px;
}

.marquee-js .marquee-track-js {
  position: absolute;
  display:inline-flex;
  height:194px;
  white-space:nowrap;
  padding: 0;
  background-color: lightyellow;
}

.marquee-content-wrap-js {
  display:inline-flex;
  align-items: center;
}

.marquee-content-wrap-js p {margin-bottom:0px;font-size:100px;font-weight:bold;padding-left:20px;
}