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
- Select the slider.
- Open the Effects panel and turn on Parallax.
- Choose the direction (the image moves up or down while you scroll) and the amount. Small amounts look calmer.
The effect shows on the page, not in the editor. See it on the examples page.
In Gutenslider 7.0 the parallax is done with CSS instead of a script, and it 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.