Parallax Sliders

4 min read Updated

The Parallax Sliders Addon adds parallax and fixed background images to the frames of the SiteOrigin Hero Image, Layout Slider and Image Slider Widgets. A parallax background moves slower than the page when the visitor scrolls. A fixed background stays still while the frame content scrolls over it. For the widgets’ other settings, see their documentation.

View Parallax Sliders on the Hero demo.

Requirements

Go to SiteOriginPremium Addons and activate Parallax Sliders. This also activates the Hero Image, Layout Slider and Image Slider Widgets.

Usage

The addon adds new options to the Background image type setting in each frame. There are no other settings.

Hero Image and Layout Slider

  1. Open the widget form and open a frame in Hero frames (Hero Image) or Slider frames (Layout Slider).
  2. Open the Background section and set a Background image. The Background image type setting shows only when the frame has a background image.
  3. Set Background image type to Parallax or Fixed.

Background image type options, including Premium Parallax

Background image opacity works with both types. At the moment, with Legacy parallax, a Parallax image shows at full opacity. With Parallax and Modern parallax, the widget always uses the full-size image. The Hero Image Image size setting has no effect.

Image Slider

  1. Open the widget form and open a frame in Slider frames.
  2. Set a Background image and a Foreground image.
  3. Set Background image type to Parallax.

The Image Slider gets Parallax only. It doesn’t get Fixed. Parallax works only when the frame has a Foreground image. Without a foreground image, the Image Slider shows the background image as a normal image, and the image doesn’t move.

Background Image Types

Parallax
The background image moves slower than the page as the visitor scrolls. Hero Image, Layout Slider and Image Slider.

Fixed
The background image covers the frame and stays in place while the page scrolls. On screens as wide as the widget’s Responsive Breakpoint global setting or narrower (default 780px), a Fixed image scrolls with the page, because iOS doesn’t support fixed backgrounds. Hero Image and Layout Slider only.

Parallax Type

Parallax Sliders uses the Parallax Type setting of Page Builder. Go to SettingsPage Builder and open the General tab.

  • Modern moves a scaled copy of the image. It works with smaller images and gives better performance. Page Builder recommends it.
  • Legacy moves the background position of the image. Some older sites still use it.

Without Page Builder, the addon uses Modern.

Modern Parallax Settings

With Page Builder active, these Page Builder settings also change the parallax in the widgets:

  • Parallax Delay and Parallax Scale on the General tab. A higher scale gives a stronger effect but lowers the image quality. The addon uses a scale of at least 1.1.
  • Disable Parallax On Mobile on the General tab. It turns parallax off on screens as wide as Mobile Width or narrower. Mobile Width is on the Layout tab.

Without Page Builder, the addon uses a delay of 0.4 and a scale of 1.1, and it keeps parallax on for mobile. To change these values, see Advanced Customizations.

Legacy Parallax

Legacy parallax needs the width and height of the image. Images from the Media Library have them. For an image from an external URL, add the size to the end of the URL after a hash: the width, an x, then the height, with no spaces. For example:

https://example.com/images/northfield-studio.jpg#2048x1366

Without the size, the image doesn’t move.

Legacy parallax moves the image only when the image is taller, in proportion, than the frame. That is, the image’s width divided by its height must be less than the frame’s width divided by its height. When this isn’t true, the image shows centered and covers the frame, with no movement. On mobile, the frame content stacks and the frame gets narrower and taller, so an image can move on desktop but not on mobile.

The Page Builder Disable Parallax On Mobile setting also applies to Legacy parallax.

Advanced Customizations

Add PHP snippets with a plugin such as Code Snippets, or in a child theme’s functions.php file.

Change the Modern Parallax Settings Without Page Builder

This snippet turns parallax off on screens 780px wide or narrower and sets a stronger scale. It applies to every Premium parallax background on the site, not only sliders. When Page Builder is active, its settings replace these values.

function northfield_parallax_settings( $settings ) {
	$settings['mobile-breakpoint'] = '780px';
	$settings['disable-parallax-mobile'] = true;
	$settings['delay'] = 0.4;
	$settings['scale'] = 1.3;
	return $settings;
}
add_filter( 'siteorigin_premium_parallax_fallback_settings', 'northfield_parallax_settings' );