The best thing about CSS effects is that they are so simple to put in place if you want an image or content to move as the user scrolls down a page.

Just a couple of lines of code will give an effect that will excite people who come to the page, increase engagement and ultimately increase conversions.

What are parallax CSS effects?

Having a basic text and image content site can be uninspiring for users. Parallax can help to bring pages to life and make it more attractive. It’s a visual effect designed to give greater depth to the website and to help engage the user with the content.

As the user scrolls down a page the content moves at the same time. Usually, an image scrolls slower or not at all in the background. It’s the effect of 2 layers scrolling at different speeds in the same viewpoint.

How can Parallax effects benefit users?

The effect is visually pleasing for some, it creates a nice optical effect which consciously or subconsciously can make the page more appealing to the reader.
Can be used to present statistics such as this https://law-social-infographic.reflectdigital.co.uk/ Under the ‘How social are law firms - social icons' section’
Can be used in before/after sections meaning it can be used to break up big sections of text/imagery so the user doesn’t feel like they’re reading an endless post.

Examples of websites who've used it effectively

Here are some sites we’ve built with different levels of parallax:

https://www.smartaupairs.com/

https://www.lyst.co.uk/sneaker-intelligence-unit/game

https://whitecodedesignassociates.co.uk/

https://law-social-infographic.reflectdigital.co.uk/

Other websites who have taken it to another level

http://www.sbs.com.au/theboat/

http://porschevolution.com

https://www.beargrylls.com/

How to give your website some depth by creating a simple parallax effect

We will not be using any javascript for this simple effect. There are a number of plugins available that can do the same effect for us but in our opinion, they are over-complicated for this simple task.

Also, there might be a number of ways this effect can be achieved and we only show one of them so other designers and developers might have a different idea of how this should be done.

Step 1: Mark-up

Choosing descriptive class names helps when going back and maintaining your code. Notice we have a container for the image and content. The container could hold the image on its own as a background image but there are known issues in Safari with a CSS property we’re using: “background-attachment: fixed”. If you ever have cross-browser support concerns about any of your CSS properties you will find https://caniuse.com/ very helpful.

Step 2: Styling

First, we will set properties for our container div that has the role of holding everything together

.parallax-effect-container { height: 400px; overflow: hidden; display: block; margin-top: 200px; margin-bottom: 200px; position: relative; overflow: hidden; }

For the purpose of this example, we have added a fixed height to our container. Different browsers come with different paddings and margins as default and some have no display properties assigned to page elements, therefore, we have to set the basic CSS properties such as overflow, padding, margin and display.

Second, we will set properties for our div with the image and the content container.

.parallax-effect-image { position: absolute; top:0; left:0; width: 100%; height: 100%; bottom: 0; right: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: scroll; background-attachment: fixed; } .parallax-effect-content { position: absolute; display: block; max-width: 100%; top: 50%; left: 0; padding: 16px; width: 100%; transform-style: flat; transform: translate3d(0,-50%,0); }

Again we have some personal choices in our styling for these 2 elements. We have chosen to position both absolute and without the z-index CSS property set, they will sit in layers depending on the order of the divs in the mark-up so we have positioned the image div first (as the bottom layer) and the content div second (as the top layer).

As the parent container div is positioned relative it will constrain both absolute children (image and content). We have defined the position, repeat, size and attachment for our background image that is set inline on the element. If you are using a CMS you will find this choice useful as you could set the image link from the cms.

Thirdly, we can add some special styling for our elements. If the image is light then users might struggle reading the text in the content (if any) so we added some opacity to our image and background colour to our container.

.parallax-effect-container { background: black; } .parallax-effect-image { opacity: .7; }

Lastly to explain the content div properties: We have chosen absolute with a top offset of 50%. In that case, if we didn’t transform the div we would have it starting from the middle of the container like so: http://puu.sh/CWnre/ee30b6b074.jpg

But using transform we have changed the Y axis of the content to be offset by half of its height using the value translate3d(0,-50%,0). Translate3d uses x, y and z-axis in that order. We have not changed x and y so they will have the value 0 however we have changed y-axis to be negative 50% and that gives us a central positioning of the content. There are a number of ways this can be achieved.