Scroll Fade Effect
A React component that adds a fade effect to content as you scroll.
Loading...
Features
- Content fades in and out smoothly as you scroll.
- Supports both vertical and horizontal scrolling.
Browser Compatibility
This component uses CSS animation-timeline: scroll(). Check the latest browser compatibility on MDN before using in production.
Installation
pnpm dlx shadcn add @ncdai/scroll-fade-effect
Usage
import { ScrollFadeEffect } from "@/components/ncdai/scroll-fade-effect";<div className="rounded-lg border">
<ScrollFadeEffect className="h-72 w-48">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium
aenean pharetra. Orci eu lobortis elementum nibh tellus molestie. Vulputate
dignissim suspendisse in est. Vel pharetra vel turpis nunc. Malesuada nunc
vel risus commodo. Nisi vitae suscipit tellus mauris. Posuere morbi leo urna
molestie at elementum eu. Urna duis convallis convallis tellus. Urna
molestie at elementum eu. Nunc sed blandit libero volutpat.
</ScrollFadeEffect>
</div>Examples
Horizontal Scrolling
Loading...
shadcn/ui Scroll Area
Loading...
shadcn/ui Scroll Area – Horizontal Scrolling
Loading...
