How to Use Parallax Effect in a Section

OverviewClick to copy

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.

RequirementsClick to copy

Before starting following this guide, you should have at least one high-resolution image ready that you intend to use for the parallax background.

Legacy Layout – How To Use Parallax Effect In A SectionClick to copy

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 SectionClick to copy

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 EffectClick to copy

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 Settings

  • 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 Padding

Optimize Parallax Effect For Mobile DevicesClick to copy

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

Optimize Parallax Effect For Mobile Devices

Gen 2 Layout – How To Use Parallax Effect In A SectionClick to copy

Add Parallax Effect To A PageFly SectionClick to copy

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.

Add Parallax Effect To A PageFly Section

Customize Parallax EffectClick to copy

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 Settings
  • 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 Padding

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

Adjust Height

Optimize Parallax Effect For Mobile DevicesClick to copy

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

set the bottom padding top 0px

    • Styling tab > Size > set the value under Height parameter to Fixed.

set the value under Height parameter to Fixed

  • Step 3: Click Publish to activate the changes.

Use CasesClick to copy

  • 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 PracticesClick to copy

  • 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 QuestionsClick to copy

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 ResourcesClick to copy

Thank you for your feedback!

Navigate this category

Could not find the answer
to your question?

Chat with us
Great news! PageFly Help Center is now available in Japanese 🇯🇵. Explore now by switching the language in the Header section ☝️