Creating Scrolling Parallax Effects with CSS

While this solution is elegant on desktop computers, it does not function on mobile devices. To create a mobile-compatible pure CSS parallax scrolling effect, please visit this post by Keith Clark.

I generally dislike ESPN because they're the McDonalds of sports news but they recently did a piece on Luis Suarez that was eye-catching. The content itself was great but their use of parallax and imagery was outstanding. They've employed this technique in a few of their features now and I've been so impressed that I implored my readers to write about how it's done. The following is a post principally written by Stefan Judis with detail added by myself. Enjoy!

Introduction

For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a nice optical effect and keeps the attention of the visitor.

In web design, the most common way to achieve this is by simply adding a jQuery plugin to a website. Doing this unfortunately has a few disadvantages. These plugins mostly attach an event handler to the scroll event of the window object. This leads to tons of events being handled via JavaScript (handling the scroll event can easily cause performance issues and should be considered carefully). To move the mentioned layers, background positions of images get calculated and set to the depending elements, which then additionally causes a lot of DOM manipulations.

In short: parallax done with JavaScript can decrease the scrolling performance of a website quite quickly.

background-position: fixed to the Rescue

What only a few people may know, is that this effect can be achieved via CSS, too. Check out the example below:

To get this parallax effect, background images have to be placed on different elements. These elements additionally need to have defined background-attachment: fixed. By defining background-attachment the behavior and positioning of any background image can be changed.

The initial value of the property is scroll, which basically means that the image position is fixed to its element. There is nothing fancy about that and we all know this behavior. The user scrolls on a website and elements are moving up and down and so do the background images.

It gets interesting by setting the background-attachment to fixed. fixed defines that the background image position is not fixed to the depending element but rather fixed to the viewport. This means that the image will stay visually on the same position no matter how much scrolling will be done. This leads to the nice visual parallax effect.

Sum up

I personally prefer CSS solutions to JavaScript solutions and this is a perfect example for my preference. There is no logic and no additional DOM manipulation needed, which makes the whole solution pretty nice. But there is still one thing to remember when dealing with parallax effects.

Even with this CSS solution there is a lot of stuff to do for the browser.background-attachment: fixed will lead to much more painting that needs to be done by the browser, which can affect the scrolling performance and maybe drop your FPS (remember the 60FPS goal?). So keeping an eye on the FPS meter e.g. in Chrome when doing these kind of things is always a good idea.

About Stefan Judis

Stefan is a frontend developer from Berlin. He maintains the projects grunt-phantomas and grunt-photobox. Improving performance, automating everything, visualizing datasets and drinking good coffee are the things he is doing most of the time.

The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...

It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...

Digg recently came out with a sweet new feature that allows users to create Tiny Digg URLs which show a Digg banner at the top allowing easy access to vote for the article from the page. While I love visiting Digg every once in a...

One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

Discussion

Øyvind Nordhagen

Just a clarification: The technique discussed here is not parallax. Parallax is when you have animation along two or more parallel lines that move at separate speeds. Think classic platform games like Sonic the Hedgehog and how the background sprite moves slower than the foreground to create a 3D effect in 2D.

Glad to see this, I almost loathe reading anything that is said to be “parallax” when in fact it is not. You probably have encapsulated the true definition of real parallax with your example of Sonic the Hedgehog. Cheers.

Came to say the same as the above. While parallax is the new hotness, some people think it’s just something staying static while other things move on top of it. This is not parallax. This is parallax: http://www.spaceneedle.com/home/

WebsiteGuru

Ok so … Technically it is parallax.
This is actually how parallax started .. then jquery was implemented to even make it “wicked”

However the heading of this article should have been “Parallax Background Fixed Position: CSS only”.
The links you have alluded to are “Full Parallax websites where each element is driven by jquery parallax variable mostly from resources like Github etc.

A smooth moving parallax background is achieved by adding jquery .. however that has huge effects on Google rank/ analytic crawling if you do not know what you are doing.

It’s one of the reasons why “full parallax” websites did not last.
What is more realistic now especially if you want to rank a site good on Google and still add some awesomeness are either jquery Parallax driven backgrounds or complete CSS “static” background-position:fixed/ background-attachment-fixed and background-size: cover” on various div “containers”

So it is parallax not just as fancy as the traditional parallax which has really died and didn’t survive the world of Google page rank and various mobile browsers etc..

Brad

Parallax is so overdone. I can’t wait for designers to finally get bored with it.

chris

I look at it this way – like most really cool effects, it’s not technically overdone, it’s more that it’s almost always done really poorly – i.e., to demonstrate that the designer has technical skills, not to truly compliment a good design. In my opinion, the spaceneedle.com site referenced above by Jason is a beautiful site, and shows how parallax should be used.

As others have said this is not actually parallax, but it is pretty cool and does mimic the ESPN article pretty well. I found this actual pure css parallax on codepen. And I think it may even answer whether or not anyone has considered using translateZ() for this.

Since you’re using a single background image per element, this has been supported since Internet Explorer 4, not 9. Which means it has been supported since 1997 (at least for Internet Explorer). It is also not exactly parallax.

I am glad you pointed this out! No one is talking about this. I don’t think anyone has actually read the new guidelines. You shared great CSS code about scrolling parallax effects that is useful post to all. Thanks Stefan Judis for share great post with us.

Good tip, thanks! The big bold title that say “background-POSITION: fixed to the Rescue” did throw me off for a second there, but it all worked out in the end. ;) Whether or not it’s technically parallax, it’s still the effect I was trying to achieve and I’m pleased it can be done without the use of JS.

I’m trying to get a similar thing going with not only an image but with html content too. The masking and revealing effect I’m going for should be similar. Any pointers? Links? Libraries that can do that? (js=ok)

Great article for those who are considering to implement a parallax scrolling web design. This parallax scrolling method is also implemented on a drupal website: http://www.startechup.com

KJ Roxxx

It doesn’t work on IOS…has anyone else found this issue yet???…

Alex

You don’t contribute anything to the conversation when you point out little technicalities. Who cares if it’s parallax or not. It’s good work and it’s just what I needed, so thank you, and don’t let them get you down

GreenAsJade

“Who cares if it is parallax or not”?

Obviously, people who came to an article entitled “Creating Parallax” looking for a solution to create … parallax. This isn’t a “technicality”. If things don’t move at a different speed, it is not parallax. At all.

Mauro

Hi, this is a nice trick, i used a plugin named Parallax Backgrounds for VC.
But it has issue with IE11 and EDGE (first browser scrolls bad, second can’t see any image).
Is it possible to get a short guide to add your code to a WP theme in style.css? And how i can put the recall of the code inside the article or page?
I whish to add a background fixed scroll in some row.
Thank you.

Continue this conversation via emailGet only replies to your comment, the best of the rest, as well as a daily recap of all comments on this post. No more than a few emails daily, which you can reply to/unsubscribe from directly from your inbox.