user profile image

A prototype parallax scrolling technique that uses CSS 3D transforms. No JavaScript!

An article about this technique is available here:

A newer version can be found here:


  1. What kind of sorcery is this!?

  2. Does this happen simply because of the transform?

  3. Ahah, tricky !

  4. Hey this is pretty cool!

  5. Well, I really need explanations on this... Any blog post about it?

  6. blog post +1

  7. A blog post explaining the technique is coming. I'll post a link here when it's published

  8. I don't get why using a ::before inside slide 1 and 3. The background work fine on theses too.

  9. That's meta level.

  10. Had to register just to comment that us commoners find this wizardry intimidating

  11. Hurry up with the blog post :D Very curious :)

  12. It almost works on mobile.

  13. good job sir. kind regards.

  14. +1 for getting the blog post out.

  15. This is pretty impressive, will definitely be playing around with this for a future project.

  16. This looks really pretty on desktops but the mobile experience is a bit lacking - intertial scrolling is lost altogether in Chrome and Safari on iOS and it basically doesn't work in Android at all - do you think the theory can be adapted to work on these platforms?

  17. This is truly awesome, it really is! Just wondering, how would you go about to have a sticky header with this parallax technique? I've tried with the regular methods like making the header "position: fixed;" and "top: 0;" but can't get it to work. Anyone know's how i can make this possible?

  18. There seems to be an issue with IE 11. Whenever the background layer is affected by parallax scrolling, such as the second slide here, IE displays the full size image instead of automatically resizing it to fit the screen, which ends up looking ugly. Does anybody know how to fix this?

  19. This is awesome. Is it possible to modify this to make the content shift down the page rather than up?

  20. thanks a lot dude, i get the parallax background part, but the wiggling image effect confuse the hell out of me, thanks for the blog too! :D

  21. Is it possible to have elements that are siblings to the most top-level .parallax element (the one with the "perspective" property on it?

    In your blog, when you say,

    "There are no hard and fast rules for dealing with layering as implementations will differ between designs."

    are you referring positioning the elements so that they show up at the right place at the right time, or are you referring to something else?

  22. Really well demonstrated.

  23. I just want to thank you for making a great set of code that makes this way more understandable. I had a client come and ask for something like this and I tried a number of things before searching it out. I found your blog post through reddit. Thanks for this great demo!

  24. Hi Keith, Great piece of code. One problem I have is that when I tried to make the heading a link it was not clickable!!! Any ideas?

  25. @keithclark you might want to check your profile page. Some showcased pen is causing the page to freeze ;) (Oh how often I had to rearrange because of that issue)

  26. This is great! any idea how to add a hyperlink to the #title slide? Simply adding an "a href" attribute does not work on the first slide for some reason... Great work!

  27. Pictures are broken, not crucial for the functionality - but quite difficult to see whats going on without them :)¨ Easy fix is to replace the filenames to something like

  28. Thanks, I'll update that. There's also a new, dependency-free version here:

  29. Awesome!! Can you tell me about browser compatibility? Is it legit to make sites with this technique?

  30. Browser support is pretty good and getting better. I recommend applying this effect with @supports to enhance a basic page. Have read of for more info.

  31. Too bad, doesn't work in ipad and phones

  32. One problem I ran into with the all CSS method of parallax is that because the of overflow and 100vh you lose control of onscroll events. Even though you are scrolling the window, the container element never fires the scroll event.

  33. @pjwiebe :

    scroll events work fine with CSS parallax. You just need to remember to add the event handler to the parallax container element. In the case of this demo, it's it the body element:

    document.body.addEventListener('scroll', function (e) {

    There's more info in my latest parallax article.

  34. Hello Keith,

    On my iPad Pro 11.3, the text boxes in slide 1 and 3 do not show? And IE 11 suffers from the same problem, plus that there is no parallax effect in it?

  35. this is some black magic right here

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.