Marquee analogue, text running in opposite directions, CSS/SCSS

Marquee is coming back in to trend again, it is a well forgotten effect.

Previously running text effect was achieved with <marquee>. This element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Reference: MDN web docs

Suggested option.

There are quite a few ways to achieve this. I will be only focusing on pure CSS solution, it is a bit more performance demanding, we will be adding in ‘will-change: transform;‘ to address this issue.

There are quite a few CSS options available: ‘text-indent‘, ‘left‘, ‘transform‘ … I will be using ‘transform’ to achieve this as it works best for desired effect.

See the Pen marquee analogue, text running in opposite directions by Danila (@danilaboratory) on CodePen.

If you need additional effects on hover, where one of the lines slows down without jumping to the start use: ‘text-indent

How can clients speed up web design and get a website on time?

With the majority of projects either web design or development, there is often an element of time uncertainty: designers promise to deliver work quickly, then they announce some unrealistic deadlines and include unclear activities. In this article I will be…

Leave a Reply

Your email address will not be published. Required fields are marked *