How to Add a Horizontal Scroll Effect in JupiterX
If you want to create a dynamic and engaging experience on your website, you can use the Horizontal Scroll effect in JupiterX. This effect allows elements on your page to move left or right as visitors scroll up or down. Here’s how you can add this cool feature to your site.
Step-by-Step Guide to Implement Horizontal Scroll:
- Open the Elementor editor for the page where you want to add the scroll effect.
- Select the element, such as a Container, Section or Widget, to which you want to apply the Horizontal Scroll effect.
- Go to the 'Advanced' tab.
- Look for the 'Motion Effects' section.
- Toggle the 'Scrolling Effects' to ON.
- Click on the pencil edit icon next to 'Horizontal Scroll.'
- Configure your Horizontal Scroll settings:
- Direction: Choose whether you want your element to move 'To Left' or 'To Right' as the page is scrolled.
- Speed: Set the motion speed of the horizontal scroll, from 0 (stationary) to 10 (fastest).
- Viewport: Determine when the horizontal movement starts and stops based on the viewport height. For instance, setting it between 50 – 100 means the movement begins only after scrolling beyond half the viewport height.
- Select the devices you want the effect to apply to:
- Apply Effects On: Choose Desktop, Tablet, and/or Mobile to ensure your effect is visible across different devices.
- Effects Relative To: Choose 'Default', 'Viewport', or 'Entire Page' to determine how the effect behaves in relation to the scroll.
Remember:
- The viewport values are based on the height of the visible part of the device's screen, not the full page height.
- For fixed position elements, the effect is relative to the entire page.
- Tip: Test out different speeds and directions to see what works best for your design. Remember to preview the effect on all device types to ensure a consistent experience for all users.
Example of Horizontal Scroll Effect:
Imagine a heading title that seamlessly moves to the right as your visitor scrolls down and moves back to the left when scrolling up. Not only does it look impressive, but it also adds a layer of interaction to your site.
That’s it! You've successfully added a Horizontal Scroll effect to your elements. Experiment with different elements and settings to create unique and attractive designs that capture your visitors' attention. If you have questions or need further assistance, feel free to reach out to our support team. We are here to help!