Marquee with CSS and Jquery

Marquee tag (‘< marquee >‘) one quite well-known tag pre-HTML5 era. As time went on, people did not care about this. What makes it standalone is its concept still lives on. Today, marquee tag support has been deprecated. But at some point of time we need that same scrolling effect, be it from right, left, top or bottom. Here are two that i found when I needed.

Pure CSS way

This code belongs to Jonathan Sampson at Twitter. I like his code just because its pure CSS3 and the way text-indent property has been used. At first, I was ‘wow’!



The basic ideology is very simple. It’s applying animation to the text content using text-indent CSS property. Another biggest point is that this code is free from all the browser vendor prefixes. Hence, browser dependency is killed.

I have to note that we can only move text from right to left or vice-versa. Moving/ scrolling top to or fro bottom is not possible. But I am trying to figure out that in similar way. Below is the live demo area.

For further details or playing around, please visit:

Jquery with least CSS

The credit for this code goes to Aamir Afridi of

His way of doing is the Jquery version.



Note: If you want to scroll from or to left and right, you need to set the width like the above CSS code. And if you want your marquee effect to be from top to bottom or otherwise, set height accordingly.


That’s the code. Try and let know me if you know any other. I would definitely play with them too.

And as usual, thanks for reading.
Keep sharing!

Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He has also an amateur photographer mostly macro shots.