Parallax Sliders

The parallax scrolling addon enhances SiteOrigin slider widgets by providing parallax and fixed background image options.

Requirements

To make use of this addon, go to SiteOriginPremium Addons, locate Parallax Sliders and click the Activate button.

Available Widgets

  • SiteOrigin Slider Widget
  • SiteOrigin Hero Widget
  • SiteOrigin Layout Slider Widget

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

Using External Images

Each of the above widgets offers both the option to add a background from the Meda 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 onto 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.