How to create a Horizontal news ticker with just pure HTML and CSS.
Using this snippet we can create a new ticker with just CSS.
Code explanation :
- .tcontainer Just a 100% width container with overflow: hidden to hide the scrollbars.
- .ticker-wrap Another 100% width container, and has padding-left: 100% to push all the internal item offscreen to the right.
- .ticker-move This layer does the actual ticker magic with CSS animation.
- @keyframes ticker Basically, an animation sequence that moves .ticker-move from right to left.
- .ticker-item Individual items of the ticker. Displayed in inline-block, so all the text lines up in a single row
If you spot a bug, please feel free to comment below.
Comments
Leave a comment
You are not LoggedIn but you can comment as an anonymous user which requires manual approval. For better experience please Login .