Home>Blog>New Parallax Scrolling

New Parallax Scrolling

We're excited to announce that Page Builder version 2.12.0 includes a new parallax scrolling setting. The new setting makes use of modern parallax methods, requires smaller images for a more noticeable effect, and offers better performance. Existing Page Builder users can optionally switch to the new setting by navigating to SettingsPage BuilderGeneralParallax Type: Modern. New Page Builder users will default to the new setting and can optionally switch to the Legacy setting.

Parallax scrolling is an option for Page Builder row, cell, and widget background images. SiteOrigin Premium offers parallax scrolling for the SiteOrigin Slider, SiteOrigin Hero, and SiteOrigin Layout Slider widgets. If you're unsure about the difference between fixed and parallax background images, our post What is the Difference Between Fixed and Parallax Background Images? has you covered.

What's Different?

The new parallax setting uses HTML images and the CSS transform property. The legacy parallax setting uses CSS background images and the CSS background-position property. The new setting can be used with smaller images and offers better performance. However, it cannot cover larger areas than the base image; the legacy setting can.

New Setting Demo

The new parallax scrolling effect makes use of the simpleParallax.js library.

Expand Parallax Scrolling to the SiteOrigin Slider Widgets

The SiteOrigin Premium Parallax Sliders addon enhances SiteOrigin slider widgets by providing parallax and fixed background image options. The following widgets are supported: SiteOrigin Slider Widget, SiteOrigin Hero Widget and the SiteOrigin Layout Slider Widget.

Thanks for reading. If you have any questions, comments, or requests, please, let us know in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. 2 years, 10 months ago Eros Bruno

    Good morning,
    Interestingly, however, the parallax in the “hero” widget is not easy to use with full-width rows because the background does not fit the size. Is there a solution that I don’t know of?
    thank you very much.
    Eros Bruno.

    • 2 years, 10 months ago Andrew Misplon
      Hi, I Work Here

      Hi Eros

      Thanks for reaching out.

      Please, contact our premium support desk at [email protected] and include a link to an example. We’ll take a look and advise from there.

  2. 2 years, 9 months ago Guidex

    Hi, is this capable of working on mobile? I know a lot of other Parallax libraries struggle on mobile because the effect requires too much processing power, so they fail to display properly.

    • 2 years, 9 months ago Andrew Misplon
      Hi, I Work Here

      Hi, thanks for reaching out. The parallax method used above works on mobile.

  3. 2 years, 9 months ago Gopal Kaushik

    The parallax does not work with mobile view! Is there any setting I need to change? I am using the modern parallax type already!

    • 2 years, 9 months ago Andrew Misplon
      Hi, I Work Here

      Hi Gopal, thanks for reaching out. At Settings > Page Builder you can try checking that Disable Parallax On Mobile is not enabled. If the issue persists, please, consider opening a support thread at https://siteorigin.com/thread, we can assist further there.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More