CodePen

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

Pure CSS Parallax Scrolling

Description

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

Still have a few issue to iron out

Tags

  1. css

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?

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

You must be logged in to comment.
  • 63658 Views
  • 18 Comments
  • 495 Hearts
Loading...
Loading...