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
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
.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.
Nullam a aliquet tellus. Morbi tempor cursus sollicitudin.
.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;
}