Utilizing scroll shadows, particularly for cell units, is a delicate little bit of UX that Chris has coated earlier than (certainly, it’s one in all his all-time favourite CSS methods), by layering background gradients with completely different attachments, we are able to get shadows which might be coated up once you’ve scrolled to the bounds of the ingredient.
Geoff coated a newer strategy that makes use of the animation-timeline property. Utilizing animation-timeline, we are able to tie CSS animation to the scroll place. His instance makes use of pseudo-elements to render the scroll shadows, and animation-range to animate the opacity of the pseudo-elements primarily based on scroll.
Right here’s yet one more method. As a substitute of utilizing shadows, let’s use a CSS masks to fade out the perimeters of the scrollable ingredient. This can be a barely completely different visible metaphor that works nice for horizontally scrollable parts — locations the place your scrollable ingredient doesn’t have a definite border of its personal. This strategy nonetheless makes use of animation-timeline, however we’ll use customized properties as a substitute of pseudo-elements. Since we’re fading, the impact additionally works no matter whether or not we’re on a darkish or mild background.
First, we’ll outline our scrollable ingredient with a masks that fades out the beginning and finish of the container. For this instance, let’s take into account the notorious desk that may’t be responsive and needs to be horizontally scrollable on cell.
Let’s add the masks. We will use the shorthand and discover the masks as a linear gradient that fades out on both finish. A masks lets the desk fade into the background as a substitute of overlaying a shadow, however you can use the identical method for shadows.
.scrollable {
masks: linear-gradient(to proper, #0000, #ffff 3rem calc(100% - 3rem), #0000);
}Defining the customized properties and animation
Subsequent, we have to outline our customized properties and the animation. We’ll outline two separate properties, --left-fade and --right-fade, utilizing @property. Utilizing @property is critical right here to specify the syntax of the properties in order that browsers can animate the property’s values.
@property --left-fade {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --right-fade {
syntax: "";
inherits: false;
initial-value: 0;
}
@keyframes scrollfade {
0% {
--left-fade: 0;
}
10%, 100% {
--left-fade: 3rem;
}
0%, 90% {
--right-fade: 3rem;
}
100% {
--right-fade: 0;
}
} As a substitute of utilizing a number of animations or animation-range, we are able to outline a single animation the place --left-fade animates from 0 to 3rem between 0-10%, and --right-fade animates from 3rem to 0 between 90-100%. Now we replace our masks to make use of our customized properties and tie the scroll-timeline of our ingredient to its personal animation-timeline.
Placing all of it collectively
Placing all of it collectively, we now have the impact we’re after:
We’re nonetheless ready for some browsers (Safari) to assist animation-timeline, however this gracefully degrades to easily not fading the ingredient in any respect.
Wrapping up
I like this implementation as a result of it combines two newer bits of CSS — animating customized properties and animation-timeline — to realize a sensible impact that’s extra than simply ornament. The method may even be used with scroll-snap-based carousels or playing cards:
It really works no matter content material or background and doesn’t require JavaScript. It exemplifies simply how far CSS has come currently.
