octocatstartv headernumbered-list123split-screen
user profile image

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

An article about this technique is available here: http://keithclark.co.uk/articles/pure-css-parallax-websites/

A newer version can be found here: http://codepen.io/keithclark/pen/vNqxQJ

Comments

  1. What kind of sorcery is this!?

  2. Does this happen simply because of the transform?

  3. Hey this is pretty cool!

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

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

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

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

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

  9. It almost works on mobile.

  10. good job sir. kind regards.

  11. +1 for getting the blog post out.

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

  13. 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?

  14. 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?

  15. 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?

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

  17. 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

  18. 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?

  19. Really well demonstrated.

  20. 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!

  21. 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?

  22. @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)

  23. 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!

  24. 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 http://lorempixel.com/640/480/abstract/6/

  25. Thanks, I'll update that. There's also a new, dependency-free version here: http://codepen.io/keithclark/pen/vNqxQJ

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

  27. Browser support is pretty good and getting better. I recommend applying this effect with @supports to enhance a basic page. Have read of http://keithclark.co.uk/articles/practical-css-parallax/ for more info.

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

You must be logged in to comment.
Loading...
Loading...