Html marquee

Hi there,
Im using html marquee tag for building scrolling subtitle
But it has poor quality and not smooth in rolling
What you do for rolling/scrolling texts in html?

Try css animation with keyframes on “left” or “top” parameter.

Thats good idea but I want to marquee in half of screen and by animation it isnt possible

Unfortunately I can’t imagine Your use, but deprecated marquee tag will never be smooth in my opinion. Try to give an example here.

I just have a backgruond image with limit width that I want to just move my text on it and when text ritch to the end of image disappear

You can use div with text (with z-index greater than the image has) and apply the css “clip” property to mask the area where the text will be visible. Then it will no longer be a problem to use css animation.

Ok, and how solve different speeds in different size of texts?

You can measure the size of rendered text (width or height) and then set the css animation-duration property by Javascript

Yeah I got
Thanks a lot

The best way to move text smoothly is to do it be a fixed amount, like 2-4px every frame. RequestAnimationFrame and transform: translate works great for this.

Hey, could you give a working example? :wink: I would like to do some testings.

I finally use this way:

English would be better :grinning:
Could You attach a html fragment too? I’m not sure I understood it correctly.

Can you explain more please?

I would recommend GreenSock’s Animation Library GSAP. The library is pretty widely used and removes a lot of the complexity in animation.
Here is a pen with a very simple example.