How to Use Parallax Effect in a Section

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.

Gen 2 Layout – How To Use Parallax Effect In A Section

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.

• Adjust Height: Change the Height parameter to Fixed value and then you can set custom height for the flex section.

Optimize Parallax Effect For Mobile Devices

• Step 1: From the PageFly page editor, switch to Mobile view.
• Step 2: For the Gen 2 editor, you can either adjust the padding or the height of the flex section. Select the Flex section:
  • Styling tab > Spacing > and set the bottom padding top 0px to prevent the section from taking up too much screen space and ruining the mobile experience.
  • Styling tab > Size > set the value under Height parameter to Fixed.

• Step 3: Click Publish to activate the changes.

Legacy Layout – 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 350 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 > 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.
• Background Animations: Add subtle movements to background images to make sections more engaging without distracting from the main content.
• Event Pages: Use parallax to show a background image (like a concert or conference venue) while the event details scroll over it, making the page more exciting and interactive.
• Holiday Sales Sections: Add parallax to the background of seasonal sales sections (e.g., Black Friday or Holiday deals) to catch attention and make the design more eye-catching.
• Service Features: Highlight services by using parallax to show an image (e.g., a repair in progress) with the service description scrolling smoothly over the background.

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. Limit 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

1. 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.

2. 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.

Additional Resources

• 5 Steps to Create Full-width Section on PageFly Pages
• Create a Sticky Section with PageFly