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?

  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?

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

You must be logged in to comment.
  • 75079 Views
  • 19 Comments
  • 535 Hearts
Loading...
Loading...