Ultimatum and the Parallax Effect

Many users of Ultimatum ask us how to achieve the Parallax effect in the child themes they are making. Whilst it is possible to add the effect using a plugin, this tutorial will take a look at the features already built-in to Ultimatum.

What IS the Parallax Effect?

Is is an effect that gives the viewer the impression that a view is moving as they do; a trick of perspective (the word parallax derives from the Greek word parallaxis, which means alteration). Imagine you were in a corridor with a window in it and you were walking along the corridor as you look out of the window. The view you would see moves as you do. Web design Parallax is the same; as the site visitor scrolls the page, the ‘window’ (a container on the page) moves, and so what you see ‘through’ that ‘window’ also moves. Why use it? Because it draws the eye and focusses the eye of the site visitor to that element, holding their attention. Place some information over the container and you make its message stronger.

When to Use the Parallax Effect

The effect works best if the parallax container is some way down a long page. Preferably towards or at the bottom of the screen when the page is first opened, the page should scroll far enough to move it up and off the top of the page. And you need a message to put over it. Because text over images is often hard to read, you might try a simple trick like having the image in a monotone, an effect most image editors can easily achieve.

Ultimatum has Native Parallax Support

Ultimatum already comes built ready for the Parallax effect, so there is no need to use a plugin. No complex coding, but, depending on what ‘look’ you want to achieve, you might need to add a small amount of custom css. Ultimatum uses the Stellar.js JavaScript, written by Mark Dalgleish.

How to do it in Ultimatum

parallax-screenshotInsert a row in a layout where you want the Parallax effect.

In the bottom left find the edit icon and open the Wrapper CSS panel.

In the ‘Background Color and Image’ accordion, insert the desired background image and set ‘Image Repeat’ to No Repeat.

In the ‘Additional Classes’ accordion, give it a Custom CSS Class: parallax. If you want to give it some height and make it responsive, give it a second custom CSS class. I am going to add a class called parallax-1. In custom CSS I set this to:

.parallax-1 {
background-size: cover;
padding-bottom: 40%;

That’s it you have a parallax section in your layout.

Here is an example parallax row: