How do I parallax?

Are you curious how to achieve a parallax effect on a website? I will try to explain one way of doing it here. This is the way I have done it on munso.no, but there are probably more ways to do it.

To use CSS to achieve the effect is relatively simple once you understand the technique. Note that the browser needs to support CSS version 3, which all the major browsers today to.

To start off, we need to think about how we want our parallaxed sections to be laid out. On munso.no I use “slides” that take up the enitre viewport each. The markup is as follows:

One important thing to note, is that the parallax effect will only happen inside an element that has the css property “perspective” set. And to see the effect, we need to be able to scroll inside that element. Meaning that <div class=”parallax”> needs to be scrollable. It will not have any effect if we scroll the <body> tag – well we could if we set the perspective property on the body element, but that may cause other unwanted behaviour, if say you want a menu that is not affected by the parallax and so on.

Next up, is setting up the css classes. As you see in the HTML code above, there are 3 “main” classes, and 2 “sub-classes”. The main classes here are: “parallax”, “group” and “layer”. The sub-classes are “base” and “back”.

The CSS definitions are as follows:

To (try to) explain; the “parallax” class is the container for all the elements we want to be affected by the effect. It sets the perspective property to have a depth of 300px. This property is explained like this on MDN:

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

It also sets properties for height and width, as well as how the user can scroll with overflow-x/y.

Next up is the group class. Now this class is where you group together the different “depths” in that slide or section of the page. The group is essentially the “slide” in this case. The group ensures that it has the right height, and that is preserves¬†the 3d translations defined inside.

The layer class is where you put your actual content. These are given subclasses to determine on which depth they are to be displayed. The “front” subclass displays the content on a z position value 0, meaning it has not moved from its original position. The “back” subclass moves all content back by 300px, and then scales it by 2. This means that the content will appear to scroll slower than the content in the “front” subclass. We scale it up so that it keeps in original height and width in appearance (cause you know, objects are closer than they appear…or something).

See a JSfiddle: http://jsfiddle.net/c18ffctb/

Well there you have it, at least the basics.. You could add more and more subclasses to add different depths, just change the translateZ and scale values accordingly. I hope this gave you some new insight and inspiration. If you have any questions, do not hessitate to leave a comment below!

A side note: Chrome has a bug, that sometimes breaks the browser-tab in a special situation. If you, by browsing a page with this effect, try to “scroll” with holding the middle-mouse button down (instead of “turning the wheel”) the tab might lock-up, rendering it impossible to do any further mouse-interactions with the page. Workarounds would be to limit the user’s ability to cause this kind of behaviour.

Leave a Reply

Your email address will not be published. Required fields are marked *