[ad_1]
The opposite day, whilst the usage of the Pandora internet app, I realized that lengthy track titles incessantly scrolled by way of in a vintage marquee style. Upon analyzing the DOM (Report Object Style), I noticed that this impact used to be created the usage of two side-by-side copies of the similar content material. Long ago within the day, I used to do the similar factor for some shoppers; however, my methodology used to be powered with JavaScript. Pandora, alternatively, used to be powering it with CSS transitions. I believed this could be amusing to check out out for myself.
Run this demo in my JavaScript Demos venture on GitHub.
View this code in my JavaScript Demos venture on GitHub.
The idea that right here is understated however artful. You put two copies of the similar content material side-by-side and you then transition either one of them to the left on the identical time the usage of a @keyframes animation:
@keyframes marquee-content {
/* Component one absolutely ON display at left-edge of container. */
from {
grow to be: translateX( 0% );
}
/* Component one absolutely OFF display (simply past left-ledge of container). */
to {
grow to be: translateX( -100% );
}
}
When the primary component is at a -100% translation, it is going to have simply moved absolutely off the display. And, the second one component will finally end up the place the primary component began. At that time, you snap each parts again to the beginning location and it looks as if one lengthy steady animation.
This is the whole code. Realize that the animation-iteration-count is countless, which is what permits the animation to look steady. And, that the animation-timing-function is linear. This “timing” is vital as it hides the truth that the weather are snapping round and offers the appearance of an unlimited content material tape.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<taste kind="textual content/css">
.marquee {
border: 2px forged crimson ;
show: flex ;
overflow: hidden ;
white-space: nowrap ;
width: 300px ;
}
.marquee__item {
animation-duration: 4s ;
animation-iteration-count: countless ;
animation-name: marquee-content ;
animation-timing-function: linear ;
padding: 5px 15px 5px 15px ;
}
.marquee:hover .marquee__item {
animation-play-state: paused ;
}
/**
* BOTH of the marquee pieces are going to be translating left on the identical time.
* And, as soon as each and every of them has translated to -100%, they're going to each snap again into
* position, making it appear as though they're incessantly scrolling.
*/
@keyframes marquee-content {
from {
grow to be: translateX( 0% );
}
to {
grow to be: translateX( -100% );
}
}
</taste>
</head>
<frame>
<h1>
Growing A Marquee Impact With CSS Animations
</h1>
<div magnificence="marquee">
<div magnificence="marquee__item">
There's slightly a great deal of content material over right here.
</div>
<!--
Duplication of the content material with a purpose to create a unbroken wrapping simulation.
Because the component ABOVE heads off screen-left, the component BELOW will input
screen-right.
-->
<div magnificence="marquee__item">
There's slightly a great deal of content material over right here.
</div>
</div>
</frame>
</html>
And, once we run this within the browser, we get the next output:
As you’ll see—or moderately, as you’ll’t see—the instant the primary component is absolutely off display, the CSS animation reaches its finish and each parts snap again to their 0% offset. Then again, going from -100% to 0% does not create any visible trade (that the person will realize).
In fact, this handiest is smart if the piece of content material is wider than the content material container. Because of this, in the event you sought after to put into effect one thing like this, you may both have to grasp that the duration is lengthy forward of time; or, you would need to measure the content material at runtime and dynamically replica the content material if wanted (and upload CSS categories that may cause the animation).
As I used to be placing this in combination, I got here throughout a CSS Methods submit by way of Mads Stoumann that appears at pausing CSS animations. I did not even know that this used to be imaginable! However, in the event you set the animation-play-state to paused, the CSS animation will prevent in it present offset. On this demo, I’m making use of that state by means of the :hover pseudo-selector.
There is no longer numerous puts wherein a marquee impact is smart at the trendy internet. However, this used to be amusing to construct and I discovered one thing new about CSS! Explorations like this are all the time a just right – and amusing – use of time.
Wish to use code from this submit?
Take a look at the license.
[ad_2]
