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