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 #
- 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: 그만큼 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.
