Blog

Adding a parallax slider to a page

2 min read
Mountain ridges at sunset

In a parallax slider the background images move slower than the page while you scroll. It adds depth without extra content. Parallax is part of Gutenslider Pro. (Updated for Gutenslider 7.0.)

Parallax is a setting of its own, separate from the effect, so it works with every slide transition: slide, fade, or a 3D effect such as coverflow or cube for a 3D parallax slider. Pro also has a Parallax transition, where the image and the content move at different speeds as the slides change. All effects are compared in Slider animations.

Turn it on

  1. Select the slider.
  2. Open the Effects panel and turn on Parallax.
  3. Choose the direction the image moves while you scroll: up, down, left or right.
  4. Set the strength, from 1.1 to 2 (the default is 1.3). The image is scaled up by this factor so it has room to move, so a higher value also crops more. Small values look calmer.

The effect shows on the page, not in the editor. See it on the examples page, where you can try each direction and strength.

A 3D parallax slider

Parallax and the effect are two separate settings, so a 3D parallax slider takes both:

  1. In the Effects panel, choose a 3D effect: Coverflow, Cards or Cube. Cards and Cube show one slide at a time; Coverflow shows the slides next to the active one too.
  2. Turn on Parallax and keep the strength low, because the 3D effect already adds a lot of movement.
  3. Check it on the published page by scrolling past the slider while it changes slides.

Browsers and reduced motion

Since Gutenslider 7.0 parallax is done with CSS scroll-driven animations instead of a script, so it adds no JavaScript library to the page. In a browser without them, the slider works as usual and the image stays still. It also stays still when the visitor’s system asks for reduced motion.

Setup 1: a photo portfolio

  • Transition slide, two slides per view (one on phones).
  • Content mode fixed, with one heading, for example “Portrait photography”.
  • Parallax down, a small amount.

Setup 2: a holiday rental

  • Your best photos of the place, alignment wide.
  • Parallax on, direction up.
  • Changing content with a short line per room, and a booking button on the last slide.

Tips

  • Use photos with some room at the top and bottom: parallax crops a little more of the image.
  • Combine parallax with shape dividers for sections that flow into each other.