Html marquee

General
1

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?

2

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

3

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

4

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

5

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

6

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.

7

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

8

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

9

Yeah I got
Thanks a lot

10

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.

11

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

12
13

I finally use this way:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

14

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

15

Can you explain more please?

16

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.