How to Add Vertical Scroll Effects in JupiterX
Vertical Scroll is a motion effect that can greatly enhance the appeal of your website, providing a parallax experience as users scroll through the page. Incorporating this effect in the JupiterX theme using Elementor is straightforward. Follow these steps to add some dynamic vertical movement to your elements:
Step 1: Access Motion Effects
First, select the element you wish to apply the Vertical Scroll effect to. You can do this by clicking on the element within the Elementor page builder.
Step 2: Enable Scrolling Effects
- Look for the 'Advanced' tab.
- Expand the 'Motion Effects' settings.
- Turn 'Scrolling Effects' to ON by sliding the switch.
Step 3: Customize the Vertical Scroll Settings
Click on the pencil edit icon next to 'Vertical Scroll'.
In the settings that appear, you'll find several options:
- Direction: Choose whether you want the element to move 'Up' or 'Down' as you scroll.
- Speed: Adjust the movement's speed between 0 (no movement) and 10 (fastest).
- Viewport: Set the viewport values to specify when the effect should start and end as a percentage of the viewport height. For example, setting it to 50-100 will initiate the movement after you scroll halfway down the viewport.
Step 4: Apply Effects On Specific Devices
- You can also decide on which devices the effect will be visible: Desktop, Tablet, and/or Mobile. Simply check the applicable options.
Step 5: Set Effects Relative To
- Finally, indicate whether the effect is 'Relative To' the Default setting, Viewport, or Entire Page. The 'Viewport' setting makes the most sense for parallax effects, as it's based on the user's visible screen area.
Note: The viewport values are relative to the actual viewable area of the device screen, with the exception of elements that are fixed in position. When you choose a fixed position, the entire page height is taken into account.
Final Steps
After you've made your adjustments, make sure to review your changes by previewing your page. If you're happy with how the effect looks, go ahead and update or publish your page to make the effect live.
Remember, when executed well, motion effects such as Vertical Scroll can greatly improve user experience and make your website more engaging. But use these effects sparingly and thoughtfully to avoid overwhelming your visitors.