I used to be taking part in this sport on Apple Arcade the opposite day known as wurdweb. It’s a enjoyable little sport! Little touches just like the little form dudes that stroll across the display (however in any other case don’t do something) give it plenty of character. I kinda need little form dudes that stroll round on web sites. However one other UI selection caught my eye, the best way that transitions between screens have these diagonal strains that develop and fill the display, like window blinds closing, kinda.
Right here’s a fast screencast displaying how these wipes work:
I wished to have a crack at constructing this.
The very first thing that went by way of my thoughts is repeating-linear-gradient and the way that may be used to construct stripes. So say we arrange like this:
.gradient {
background-image:
repeating-linear-gradient(
45deg,
#ff8a00,
#ff8a00 10px,
#e52e71 10px,
#e52e71 20px
);
}
That may purchase us stripes like this:
We are able to use clear as a coloration although. That means if we lined the display with stripes like these, we might see by way of the place that coloration is. Say like this:
In that gradient definition, we use 10px because the “begin” and 20px because the “finish” of the gradient earlier than it repeats. A part of the trick right here is holding that 20px “finish” the identical and animating the “begin” quantity as much as it. Once we do this, it really covers the display in a strong coloration. The issue is… how do you animate it? You possibly can’t do that:
What we have to do is animate that “begin” pixel worth quantity alone. We are able to use a customized property, however it’s a bit of difficult as a result of with out declaring them, customized properties are simply strings, and never animatable lengths. So we’d need to do it like this.
@property –start {
syntax: “<size>”;
inherits: false;
initial-value: 10px;
}
#cowl {
place: fastened;
high: 0;
left: 0;
width: 100%;
peak: 100%;
background-image: repeating-linear-gradient(
45deg,
#ff8a00,
#ff8a00 var(–start),
clear var(–start),
clear var(–end, 20px)
);
animation: cowl 1s linear infinite;
}
@keyframes cowl {
to {
–start: 20px;
}
}
We’ve obtained to use @property right here to do that, which I actually like however, sadly, has restricted browser assist. It does work although! I’ve obtained all that arrange, together with a fast prefers-reduced-motion media question. I’m utilizing a smidge of JavaScript to vary the background midway by way of the animation (whereas the display is roofed) so you possibly can see the way it is perhaps used for a display transition. Once more, word that that is solely working in Chromium-based browsers in the intervening time:
Discover I’ve used CSS customized properties for different issues as nicely, just like the angle and dimension of the stripes and the velocity of the animation. They’re each very trivial to vary! I’ve chucked in knobs so you possibly can alter issues to your liking. Knobs? Yeah, they’re cool:
Like and subscribe
This entire factor began as a tweet. On this case, I’m glad I did as Temani Afif chimed in with a approach to do it with masks as nicely, that means fairly strong assist throughout all browsers:
I don’t suppose animating background coloration stops or a masks place is especially performant, however since we’re speaking “display wipes” right here, one might think about that the web page isn’t prone to be interacted with anymore till the web page transition is over, so possibly that’s not the world’s greatest deal.
The submit Diagonal Stripes Wipe Animation appeared first on CSS-Methods. You possibly can assist CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!