Scroll Reveal Image brings your visuals to life with smooth scroll triggered reveal effects. Instead of static photos, this component lets you add a layer of motion that grabs attention the moment an element enters the viewport. It is perfect for portfolios, landing pages, or any design where you want a premium, high end feel without touching a line of code.
It detects exactly when an image becomes visible as a user scrolls and triggers a polished reveal animation. You can set directions like top down or side to side, adjust the speed and delay, and even add a stagger effect if you are displaying a series of images. It also supports hover scaling and custom background overlays to ensure your media fits perfectly with your site’s aesthetic.
Animation settings: Choose your reveal direction, set the exact duration and delay, and adjust the scroll threshold to control exactly when the movement starts.
Visuals & Content: Toggle captions on or off, add direct links to your images, and enable background masks with custom hex colors.
Interactions: Turn on hover scaling for extra depth and use the stagger feature to create a beautiful sequence when multiple images appear at once.
Portfolio galleries and case studies
Product feature sections
Hero headers and landing pages
Blog post covers
Interactive "About Me" sections
If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
