How to have text scroll horizontal in same speed on different div width

[Thallius]

Hi

I have made a fiddle to show what’s my problem

Edit fiddle - JSFiddle - Code Playground

The text is scrolling in a given time from right to left.
As my div, which contains the text is depending on the browsers viewport, the text is scrolling faster or slower…
I want to have the same speed not depending on the width of the div.

Any ideas?

[ralphm]

The issue seems to be that the text is given a fixed time to cross the screen, so it has to move faster to cross a wider screen in the given time.

You could alter the timing with media queries, but that would be very inefficient. I don’t see how it could be done with calc(), as you can’t really mix units like vw with s (as far as I know). Maybe JS is needed to create a variable to use with calc()?

[PaulOB]

You would need js to do this properly as you would need to calculate the duration based on the width. You could set a custom variable for the animation-duration and update that with js based on the width and also on resize of course.

The only other alternative is to set a distance that is always the same.

e.g.

@keyframes my-animation {
  from {

    transform: translateX(2200px);
  }
  to {
   
    transform: translateX(-2200px);
  }
}

Of course that means the text will not appear straight away on screens smaller than 2200px.

BTW you can lose all those prefixes as they are not needed these days (and haven’t been needed for a long time).

[PaulOB]

@PaulOB

You would need js to do this properly as you would need to calculate the duration based on the width.

Something roughly like this:

[Thallius]

If I have 500px that is done in 10s, i need the double time for 1000px. So if I could get the Div width as a value for calc() I would be able to calc a time. But there is no way?

[PaulOB]

@Thallius

But there is no way?

The js version above is doing what you want but there is no way in CSS alone (afaik) to use width to determine the duration.

[Thallius]

@PaulOB

The js version above is doing what you want but there is no way in CSS alone (afaik) to use width to determine the duration

Thx, I just want to be sure. So I will use js.

[PaulOB]

@Thallius

Thx, I just want to be sure.

No worries. I thought there might have been a way with calc but its not possible.

As Ralph said you could just put in a few media queries and you can get pretty close (as long as it doesn’t have to be exact.).

e.g

No JS required.

[Thallius]

I think this is too tricky just to do it with CSS only. I will take the js solution. But thx for the ideas