CodePen

Loading ..................

Pure CSS Parallax Scrolling

Description

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/

Tags

  1. parallax

Comments

  1. What kind of sorcery is this!?

  2. Does this happen simply because of the transform?

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

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

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

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

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

  8. good job sir. kind regards.

  9. +1 for getting the blog post out.

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

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

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

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

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

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

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

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 137023 Views
  • 23 Comments
  • 916 Hearts
Loading...
Loading...