Elegant, scroll-driven edge masking. One class. Zero
JavaScript.
By one of the creators of
tw-shimmer
CSS-only shimmer effects, with 475k+ weekly npm
downloads.
.
npm i tw-fade
fade-x
fade-y
this feed has a hard edge
add fade-y to the scroll area
do i need another wrapper?
no. use the element that scrolls
at the top, does the fade stay?
no, the top fade clears
and at the end?
the bottom fade clears
the newest message stays clear
horizontal tabs too?
use fade-x on the rail
can i make the fade wider?
set a larger range
top edge by itself?
use fade-t
fade-xy
fade-size-2xl
fade-range-md
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Fade size 2xl Scroll range 2xl
Fades appear only when there is more content to scroll, then ease away again at either edge.
Eased alpha ramps dissolve content into the surface instead of ending on a clipped line.
Axis, size, range, and clear-zone utilities compose directly on the scroll container.
Dissolve Recede Soften Vanish Fade Blur Ghost Diffuse Eclipse Ebb
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。