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. 12 days, 2 hours 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.

    • 12 days, 2 hours 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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More