Ultimatum and the Parallax Effect

parallax
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. Here is an example:


Sample Parallax page.

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:

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

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

by Trevor Nelmes

Trevor is the head of support and testing at Ultimatum Theme and owns a WordPress-based web design business called CDNWebDesign. He has been programming since the 1970’s and web designing since 1999. In his spare time, he likes to take scenic photographs in the beautiful Cotswolds in the UK.

Comments

  1. Great post! Thank you for this. One question. Is there a way to use this within a page in a instead of creating a row in the Ultimatum layout?

  2. Hi Trevor, I’m an absolute beginner of ultimatum, I’m just trying to make some initial training. I did it all, but, where should I add this text?
    .cwp-parallax {
    background-size: cover;
    padding-bottom: 40%;
    }