Scroll Reveal is a web animation effect where content (text, images, sections) appears gradually as the user scrolls down the page.
Add Scroll Reveal to Your Webpage #
Requisito previo:
- Elementor Builder Plugin (Free Version is enough)
- ElementsKit Pro Version
Let’s dive into the main part: Take a new page or an existing one and start editing with the Elementor editor.
Step 1: Find ElementsKit Scroll Reveal module #
- Select an element
- Go to Advanced tab
- Find ElementsKit Scroll Reveal module
Step 2: Enable ElementsKit Scroll Reveal #
Expand ElementsKit scroll reveal and toggle the button to enable it.
Now all the features are unlocked.
- Animation Direction: Defines the path of entry. You can set elements to slide in from the top, bottom, left, or right to guide the user’s focus.
- Transition Delay: El wait time (in ms) before the animation begins. Increase this for staggered “waterfall” effects across multiple columns.
- Velocidad de animación: El duration (in ms) of the movement. Lower numbers make it “snappy,” while higher numbers make it feel “smooth” or “cinematic.”
- Enable Image Overlay: Toggling this en allows you to set an Color de superposición; toggling it off lets you set the Primary Reveal Color.
- Overlay Color/Primary Reveal Color: The specific color used to mask the image (Overlay) or fill the sliding block (Reveal).
- Reveal Each Time on Scroll: Determines if the animation triggers every time you scroll or only the first time it enters the view.
Ahora publish the page to save your changes, check your scroll reveal by scrolling up and down to ensure the animations, delays, and colors look exactly as you intended.
