I’m working from this code to create marquee, but I want the marquee to go left-to-right instead of right-to-left. I was able to make that happen but now the text doesn’t loop like it did in the original.
Can’t figure it out!
This is what I did to make the marquee scroll to the right:
function MarqueeOne(selector, speed) {
const parentSelector = document.querySelector(selector);
const clone = parentSelector.innerHTML;
const firstElement = parentSelector.children[0];
let i = 0;
console.log(firstElement);
parentSelector.insertAdjacentHTML('beforeend', clone);
parentSelector.insertAdjacentHTML('beforeend', clone);
setInterval(function () {
firstElement.style.marginLeft = `${i}px`;
if (i > firstElement.clientWidth) {
i = 0;
}
i = i + speed;
}, 0);
}
I just took the – out of the -${i}px
on line 11. This reverses the direction but now the text just scrolls off of the screen.
here’s my CSS:
.marquee-one {
overflow: hidden;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
display: flex;
color: white;
}
.marquee-one h1{
font-size: 5em;
white-space: nowrap;
text-transform: uppercase;
color: white;
}
any advice on how to make this loop properly?
2
Answers
Hi i have edited your code and it’s slide from left to right. I added flex-direction prop as row-reverse to css and it works fine. New css style is below.
The problem when you remove the minus sign is, even though the movement is in the right direction, it leaves a white space on the left. I propose to fixe that by translating h1