Parallax Sliders

The Parallax Sliders Addon enhances SiteOrigin Slider Widgets by providing parallax and fixed background image options. The following widgets are supported:

  • Slider Widget
  • Hero Widget
  • Layout Slider Widget

Requirements

To make use of this addon, go to PluginsSiteOrigin Widgets and ensure the SiteOrigin Slider, SiteOrigin Hero, and SiteOrigin Layout Slider widgets are activated, assuming you’d like to use them all. Next, go to SiteOriginPremium Addons and activate the Parallax Sliders Addon.

Usage

SiteOrigin Slider Widget

Once you’ve inserted the SiteOrigin Slider Widget, click the down arrow to open the first frame. Using the Background image field, add your background image and then scroll down to the Background image type setting. Use the drop-down menu to select Parallax or Fixed.

In order for Parallax to work for the SiteOrgin Slider Widget, there must be a foreground image set that is smaller in height than the background image. To add a foreground image, click the Choose Media button under the Foreground image heading. The Slider Widget doesn’t have a height constraint setting, height constraint is required for parallax to work. A foreground image provides a constraint in that the slider will use the foreground image’s height as the height of the slider. This limitation only applies to the SiteOrigin Slider Widget.

SiteOrigin Hero Widget

Once you’ve inserted the SiteOrigin Hero Widget, click the down arrow to open the first frame. Using the Background image field, add your background image and then scroll down to the Background image type setting. Use the drop-down menu to select Parallax or Fixed.

SiteOrigin Layout Slider

Once you’ve inserted the SiteOrigin Layout Slider Widget, click the down arrow to open the first frame. Using the Background image field, add your background image and then scroll down to the Background image type setting. Use the drop-down menu to select Parallax or Fixed.

Legacy Parallax Type Considerations

At SettingsPage BuilderGeneral you’ll find the Parallax Type setting. If you’re using the Legacy option, the below considerations apply. The below considerations don’t apply to the Modern parallax type.

Using External Images

Each of the above widgets offers both the option to add a background from the Media Library, local computer, or using an external URL. The parallax module requires the dimensions of the image to be specified if an external URL is used. The dimensions can be added to the URL prefixed by a hash. Example:

http://layouts.siteorigin.com/wp-content/uploads/2015/12/kid-673584.jpg#2048x1366

The suffix in this case is: #2048x1366. Hashtag, width, times by, height, all without spaces.

Image Requirements

To work correctly, parallax scrolling requires that the image height plus the height of the Hero Widget be greater than the image width plus the width of the Hero Widget. When this condition is no longer true, parallax scrolling will switch to a regular background image using background-size: cover; and a centered position. It’s possible for an image to meet the requirements on desktop but not for mobile as the content in the widget stacks and the height increases. If your widget parallax scrolling is functioning correctly on desktop but not on mobile, check to see if the image height is less than the width when parallax scrolling stops.