Scrolling text doesn't scroll properly! Aghh! Please help! :(

[hollyshortage]

Hey there, I’m pretty new to CSS, and I’m trying to get a long list of words to scroll across the top of a website, but it only scrolls the first few words?

I’ve created a codepen link to show you what I mean:

https://codepen.io/hollyshortage/pen/VgGBmj

I am probably doing something really stupid – if anyone can help I’d really appreciate it! Thank you!!

[Shikkediel]

At the bottom the CSS rule says it will go 950 pixels to the left but the element is much wider than that…

Edit – I’ve edited out what I added, seems a bit more complicated than I thought to solve smoothly.

[Shikkediel]

I think I cracked it…

codepen.io/anon/pen/NoOKRr

[hollyshortage]

Thank you!!! :D you are my hero! It was driving me crazy. It’s so appreciated!

[Shikkediel]

You’re welcome, it was a nice little puzzle actually. Note that this works best when the parent element has the full width of the screen – which in this case is in fact slightly less because of a few pixels of margin on body itself but that isn’t noticeable.

I also later realised you should better use this for the bit of style at the bottom, I forgot the prefix:

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

[Author]

Posts