Overview
Summary: The Parallax effect is a visual technique that creates a 3D scrolling effect by making background elements move at a different speed than those in the foreground. This adds depth to your web pages and enhances your site’s visual appeal.
In PageFly, the Parallax effect can be applied exclusively to sections and only functions on live pages. This guide will show you how to effectively use the Parallax effect in a section of your PageFly page.
Requirements
Before starting following this guide, you should have at least one high-resolution image ready that you intend to use for the parallax background.
How To Use Parallax Effect In A Section
In PageFly, you can add the parallax effect to a section, customize its look, and optimize it for different devices.
You can watch a video tutorial version of this guide here:
Add Parallax Effect To A PageFly Section
To add parallax effect to a PageFly section, follow these steps:
- Step 1: In the PageFly editor, either select an existing section to which you want to add the parallax effect or create a new one.
- Step 2: Go to the menu on the left, navigate to Styling > Background > Background Style and select Parallax.
- Step 3: Click on Select image under Image source to upload a background image for the section.
Customize Parallax Effect
After adding the parallax effect, you can also change the following settings:
- Adjust Settings: Click More Settings under the image to customize the Parallax speed or add an Overlay color.
- Adjust Padding: Increase the section’s top and bottom padding to create more vertical space so the effect will look better. In the below example, we adjust top and bottom padding to 250 px each.
Optimize Parallax Effect For Mobile Devices
- Step 1: From the PageFly page editor, switch to Mobile view.
- Step 2: Select the Section, go to Styling tab > Spacing > and set the bottom padding to 0px to prevent the section from taking up too much screen space and ruining the mobile experience.
- Step 3: Click Publish to activate the changes.
Use Cases
- Highlighting Featured Products: Use the parallax effect on the section showcasing new arrivals or featured products to draw user attention and create a dynamic shopping experience.
- Storytelling on About Us Page: Enhance the “About Us” page by using the parallax effect to add depth as the story unfolds.
Tips and Best Practices
- Choose Appropriate Images: Select high-quality images with clear, distinct layers for the background. This ensures the parallax effect enhances the depth perception and doesn’t distract from the foreground content.
- Keep Mobile Experience in Mind: Parallax effects can slow down mobile sites. Llimit its use on mobile devices or adjust settings to reduce performance impact.
- Test and Tweak: Regularly preview your page in different browser environments and devices to ensure the parallax effect works smoothly..
Frequently Asked Questions
Can I Use Multiple Parallax Backgrounds On A Single Page?
Yes, you can use multiple parallax backgrounds on one page, but ensure each is optimized to not overload the page’s loading time.
How Do I Fix Slow Loading Times When Using The Parallax Effect?
Optimize your background images by reducing their file size and consider reducing the number of parallax sections on your page.
Previous article