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 #

前提条件:

• 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 #

1. Select an element
2. Go to Advanced tab
3. 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: の wait time (in ms) before the animation begins. Increase this for staggered “waterfall” effects across multiple columns.
• アニメーションスピード： の 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 の上 allows you to set an オーバーレイカラー; 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.

今 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.