The Scroll Effect in Viewport feature allows you to apply different background styles depending on whether an element is currently visible within the viewport. As the user scrolls, the effect dynamically updates the background, helping highlight important sections and improve visual engagement.
You can see an example in Business Consulting 5. Please note that to achieve the desired effect, you should avoid setting the background for the Section (Row for WPBakery).
How Scroll Effect in Viewport Works
When this feature is enabled, Porto detects whether the element is inside or outside the viewport area. Based on its visibility state, different background colors are applied automatically during scrolling. This effect is useful for
- Emphasizing key sections while scrolling
- Creating smooth visual transitions
- Enhancing scroll-based storytelling layouts
Scroll Effect Options
Once Scroll Effect in Viewport is enabled, the following options become available:
| Option | Description |
|---|---|
| Inside Background Color | Background color applied when the element is inside the viewport |
| Outside Background Color | Background color applied when the element is outside the viewport |
| Top Offset | Adjusts the upper detection boundary of the viewport |
| Bottom Offset | Adjusts the lower detection boundary of the viewport |
Offset Behavior
- Top Offset defines how far from the top of the viewport the element must enter before the “inside” state is triggered.
- Bottom Offset defines how far from the bottom of the viewport the element must reach before exiting the “inside” state.
Using offsets allows you to fine-tune when the background transition occurs rather than relying on the exact viewport edges.
Usage Notes
- This effect is scroll-based and updates in real time as users move through the page.
- Background transitions occur automatically without additional scripting.
- Works best on sections that span enough vertical space to clearly enter and exit the viewport.
