DiagonalScrollFade
A diagonal scroll fade component that applies a progressive diagonal gradient fade effect based on scroll position.
Made with Workshop
Build your own component with AI
About this Component
# DiagonalScrollFade Component
Create stunning diagonal fade effects that respond to scroll position. Perfect for hero sections, text reveals, and creating depth in your designs.
## ✨ Features
- Progressive Diagonal Fade - Content fades from top-left to bottom-right as users scroll
- Customizable Fade Range - Control exactly when the fade starts and ends
- Adjustable Angle - Change gradient direction from 0 to 360 degrees
- Works with Any Content - Apply to text, images, components, or entire sections
- Smooth Performance - GPU-accelerated animations for buttery-smooth scrolling
- Reverse Mode - Optionally fade from bottom-right to top-left
## 🎯 Use Cases
- Hero section text reveals
- Image galleries with scroll effects
- Progressive content hiding
- Creating visual hierarchy
- Portfolio showcases
- Storytelling websites
## ⚙️ Properties
- Fade Start - Pixel position where fade begins
- Fade End - Pixel position for complete fade
- Gradient Angle - Direction of fade (default: 45°)
- Fade Intensity - Control opacity strength
- Reverse Direction - Flip the fade direction
