Once I was requested to make an auto-scrolling emblem farm, I needed to ask myself: “You imply, like a <marquee>?” It’s not the weirdest request, however the considered a <marquee> conjures up the “outdated” internet days when Geocities dominated. What was subsequent, a repeating glowing unicorn GIF background?
In the event you’re tempted to achieve for the <marquee> component, don’t. MDN has a stern warning about it proper on the prime of the web page:
“Deprecated: This function is now not beneficial. Although some browsers may nonetheless assist it, it could have already been faraway from the related internet requirements, could also be within the technique of being dropped, or could solely be stored for compatibility functions. Keep away from utilizing it, and replace present code if doable […] Remember that this function could stop to work at any time.”
That’s high quality as a result of no matter infinite scrolling function <marquee> is obtainable, we will most actually pull off in CSS. However once I researched examples to assist information me, I used to be shocked to seek out little or no on it. Perhaps auto-scrolling components aren’t the fad today. Maybe the sheer nature of auto-scrolling habits is sufficient of an accessibility crimson flag to scare us off.
Regardless of the case, we have now the instruments to do that, and I wished to share how I went about it. That is a type of issues that may be executed in plenty of alternative ways, leveraging plenty of totally different CSS options. Though I’m not going to exhaustively discover all of them, I feel it’s neat to see another person’s thought course of, and that’s what you’re going to get from me on this article.
What We’re Making
However first, here is an instance of the completed end result:
See the Pen CSS solely marquee with out HTML duplication [forked] by Silvestar Bistrović.
The thought is pretty easy. We would like some form of container, and in it, we would like a sequence of pictures that infinitely scroll with out finish. In different phrases, because the final picture slides in, we would like the primary picture within the sequence to instantly observe it in an infinite loop.
So, right here’s the plan: We’ll arrange the HTML first, then decide on the container and ensure the photographs are accurately positioned in it earlier than we transfer on to writing the CSS animation that pulls all of it collectively.
Current Examples
Like I discussed, I attempted looking for some concepts. Whereas I didn’t discover precisely what I used to be searching for, I did discover a couple of demos that offered a spark of inspiration. What I actually wished was to make use of CSS solely without having to “clone” the marquee gadgets.
Geoff Graham’s “Sliding Background Impact” is near what I wished. Whereas it’s dated, it did assist me see how I may deliberately use overflow to permit pictures to “slide” out of the container and an animation that loops ceaselessly. It’s a background picture, although, and depends on super-specific numeric values that make it robust to repurpose in different tasks.
See the Pen Untitled [forked] by @css-tricks.
There’s one other nice instance from Coding Journey over at CodePen:
See the Pen Marquee-like Content material Scrolling [forked] by Coding Journey.
The impact is what I’m after for positive, nevertheless it makes use of some JavaScript, and although it’s only a gentle sprinkle, I would favor to go away JavaScript out of the combination.
Ryan Mulligan’s “CSS Marquee Brand Wall” is the closest factor. Not solely is it a emblem farm with particular person pictures, nevertheless it demonstrates how CSS masking can be utilized to cover the photographs as they slide out and in of the container. I used to be capable of combine that very same thought into my work.
See the Pen CSS Marquee Brand Wall [forked] by Ryan Mulligan.
However there’s nonetheless one thing else I’m after. What I would really like is the smallest quantity of HTML doable, particularly markup that doesn’t must be duplicated to create the impression that there’s an never-ending variety of pictures. In different phrases, we must always have the ability to create an infinite-scrolling sequence of pictures the place the photographs are the one baby components within the “marquee” container.
I did discover a couple of extra examples elsewhere, however these have been sufficient to level me in the proper route. Comply with together with me.
The HTML
Let’s arrange the HTML construction first earlier than anything. Once more, I need this to be as “easy” as doable, that means only a few components with the shortest household tree doable. We are able to get by with nothing however the “marquee” container and the emblem pictures in it.
<img class=”marquee__item” src=”logo-1.png” width=”100″ peak=”100″ alt=”Firm 1″>
<img class=”marquee__item” src=”logo-2.png” width=”100″ peak=”100″ alt=”Firm 2″>
<img class=”marquee__item” src=”logo-3.png” width=”100″ peak=”100″ alt=”Firm 3″>
</determine>
This retains issues as “flat” as doable. There shouldn’t be anything we’d like in right here to make issues work.
Setting Up The Container
Flexbox is likely to be the only method for establishing a row of pictures with a spot between them. We don’t even want to inform it to circulate in a row route as a result of that’s the default.
.marquee {
show: flex;
}
I already know that I plan on utilizing absolute positioning on the picture components, so it is smart to set relative positioning on the container to, , include them. And because the pictures are in an absolute place, they don’t have any reserved peak or width dimensions that affect the scale of the container. So, we’ll should declare an express block-size (the logical equal to peak). We additionally want a most width so we have now a boundary for the photographs to slip out and in of view, so we’ll use max-inline-size (the logical equal to max-width):
.marquee {
–marquee-max-width: 90vw;
show: flex;
block-size: var(–marquee-item-height);
max-inline-size: var(–marquee-max-width);
place: relative;
}
Discover I’m utilizing a few CSS variables in there: one which defines the marquee’s peak based mostly on the peak of one of many pictures (–marquee-item-height) and one which defines the marquee’s most width (–marquee-max-width). We can provide the marquee’s most width a price now, however we’ll have to formally register and assign a price to the picture peak, which we’ll do in a bit. I identical to figuring out what variables I’m planning to work with as I am going.
Subsequent up, we would like the photographs to be hidden when they’re exterior of the container. We’ll set the horizontal overflow accordingly:
.marquee {
–marquee-max-width: 90vw;
show: flex;
block-size: var(–marquee-item-height);
max-inline-size: var(–marquee-max-width);
overflow-x: hidden;
place: relative;
}
And I actually like the best way Ryan Mulligan used a CSS masks. It creates the impression that pictures are fading out and in of view. So, let’s add that to the combination:
.marquee {
show: flex;
block-size: var(–marquee-item-height);
max-inline-size: var(–marquee-max-width);
overflow-x: hidden;
place: relative;
mask-image: linear-gradient(
to proper,
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
place: relative;
}
Right here’s what we have now up to now:
See the Pen CSS solely marquee with out HTML duplication, instance 0 [forked] by Silvestar Bistrović.
Positioning The Marquee Gadgets
Absolute positioning is what permits us to yank the photographs out of the doc circulate and manually place them so we will begin there.
.marquee__item {
place: absolute;
}
That makes it appear like the photographs are utterly gone. However they’re there — the photographs are stacked instantly on prime of each other.
Keep in mind that CSS variable for our container, –marquee-item-height? Now, we will use it to match the marquee merchandise peak:
.marquee__item {
place: absolute;
inset-inline-start: var(–marquee-item-offset);
}
To push marquee pictures exterior the container, we have to outline a –marquee-item-offset, however that calculation just isn’t trivial, so we’ll discover ways to do it within the subsequent part. We all know what the animation must be: one thing that strikes linearly for a sure length after an preliminary delay, then goes on infinitely. Let’s plug that in with some variables as non permanent placeholders.
place: absolute;
inset-inline-start: var(–marquee-item-offset);
animation: go linear var(–marquee-duration) var(–marquee-delay, 0s) infinite;
}
To animate the marquee gadgets infinitely, we have now to outline two CSS variables, one for the length (–marquee-duration) and one for the delay (–marquee-delay). The length may be any size you need, however the delay needs to be calculated, which is what we’ll determine within the subsequent part.
place: absolute;
inset-inline-start: var(–marquee-item-offset);
animation: go linear var(–marquee-duration) var(–marquee-delay, 0s) infinite;
remodel: translateX(-50%);
}
Lastly, we’ll translate the marquee merchandise by -50% horizontally. This small “hack” handles conditions when the picture sizes are uneven.
See the Pen CSS solely marquee with out HTML duplication, instance 2 [forked] by Silvestar Bistrović.
Animating The Photos
To make the animation work, we’d like the next info:
Width of the logos,
Top of the logos,
Variety of gadgets, and
Period of the animation.
Let’s use the next configurations for our set of variables:
.marquee–8 {
–marquee-item-width: 100px;
–marquee-item-height: 100px;
–marquee-duration: 36s;
–marquee-items: 8;
}
Be aware: I’m utilizing the BEM modifier .marquee–8 to outline the animation of the eight logos. We are able to outline the animation keyframes now that we all know the –marquee-item-width worth.
@keyframes go {
to {
inset-inline-start: calc(var(–marquee-item-width) * -1);
}
}
The animation strikes the marquee merchandise from proper to left, permitting every one to enter into view from the proper because it travels out of view over on the left edge and out of doors of the marquee container.
Now, we have to outline the –marquee-item-offset. We wish to push the marquee merchandise all the best way to the proper aspect of the marquee container, reverse of the animation finish state.
You may suppose the offset needs to be 100% + var(–marquee-item-width), however that might make the logos overlap on smaller screens. To stop that, we have to know the minimal width of all logos mixed. We try this within the following means:
calc(var(–marquee-item-width) * var(–marquee-items))
However that isn’t sufficient. If the marquee container is simply too large, the logos would take lower than the utmost area, and the offset could be throughout the container, which makes the logos seen contained in the marquee container. To stop that, we’ll use the max() perform like the next:
–marquee-item-offset: max(
calc(var(–marquee-item-width) * var(–marquee-items)),
calc(100% + var(–marquee-item-width))
);
The max() perform checks which of the 2 values in its arguments is larger, the general width of all logos or the utmost width of the container plus the only emblem width, which we outlined earlier. The latter will probably be true on greater screens and the previous on smaller screens.
See the Pen CSS solely marquee with out HTML duplication, instance 3 [forked] by Silvestar Bistrović.
Lastly, we’ll outline the difficult animation delay (–marquee-delay) with this components:
The delay equals the animation length divided by a quadratic polynomial (that’s what ChatGPT tells me, at the least). The quadratic polynomial is the next half, the place we multiply the variety of gadgets and variety of gadgets minus the present merchandise index:
Be aware that we’re utilizing a adverse delay (* -1) to make the animation begin within the “previous,” so to talk. The one remaining variable to outline is the –marquee-item-index (the present marquee merchandise place):
.marquee–8 .marquee__item:nth-of-type(1) {
–marquee-item-index: 1;
}
.marquee–8 .marquee__item:nth-of-type(2) {
–marquee-item-index: 2;
}
/* and so on. */
.marquee–8 .marquee__item:nth-of-type(8) {
–marquee-item-index: 8;
}
Right here’s that ultimate demo as soon as once more:
See the Pen CSS solely marquee with out HTML duplication [forked] by Silvestar Bistrović.
Enhancements
This answer could possibly be higher, particularly when the logos should not equal widths. To regulate the gaps between inconsistently sized pictures, we may calculate the delay of the animation extra exactly. That’s doable as a result of the animation is linear. I’ve tried to discover a components, however I feel it wants extra fine-tuning, as you may see:
See the Pen CSS solely marquee with out HTML duplication, instance 4 [forked] by Silvestar Bistrović.
One other enchancment we will get with a little bit of fine-tuning is to forestall large gaps on huge screens. To do this, set the max-inline-size and declare margin-inline: auto on the .marquee container:
See the Pen CSS solely marquee with out HTML duplication, instance 5 [forked] by Silvestar Bistrović.
Conclusion
What do you suppose? Is that this one thing you may see your self utilizing on a venture? Would you method it in a different way? I’m all the time glad once I land on one thing with a clear HTML construction and a pure CSS answer. You’ll be able to see the ultimate implementation on the Heyflow web site.
Additional Studying On SmashingMag
Infinite Scroll UX Performed Proper: Tips and Greatest Practices, Vitaly Friedman
Doc Object Mannequin (DOM) Geometry: A Newbie’s Introduction And Information, Pearl Akpan
Implementing Infinite Scroll And Picture Lazy Loading In React, Chidi Orji
CSS Scroll Snapping Aligned With World Web page Structure: A Full-Width Slider Case Examine, Brecht De Ruyte
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!