CodePen

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

Sass parallax example

Description

By locking the perspective on the body element and transforming elements in 3D on top of that, you can easily create parallax scrolling effects that don’t require JavaScript and can be much more performant as a result. Mixins can be found here

How it works?

Parallax is simply the effect of depth because objects in the background move more slowly than objects in the foreground. Because we have 3d transforms and perspective objects in the background are smaller and move more slowly than objects in the foreground. If you lock the perspective to the view that is scrolling and preserve that perspective on child elements, a parallax effect will be visible. While these objects move at different speeds they are also scaled differently so this effect can be inverted using the scale() function of CSS transforms so things still move as if they are on different planes but the perspective no longer has impact on the scale of the element. All of this math sounds complicated, so it is bundled into easy to use mixins that can be applied with a given depth. You can also use this alongside other 3d transforms and the perspective shifts will happen to 3d boxes and things.

Some background:

I have been playing with this technique since late 2012 and have iterated on it a few times. My interest was peaked again with @keithclark’s pen that really polished the experience and added scale() to the transforms bringing objects back out of perspective. I refined this so it was more mathematically repeatable with the help of Brenna O'Brien and created Sass mixins to make the whole process really easy.

Tags

  1. parallax
  2. scroll
  3. sass
  4. mixins

Comments

  1. Freakin awesome, love it! Nice work :)

  2. I really like that this emulates how parallax actually works. Objects further away move slower. Makes the javascript equivalent seem hacky and cumbersome. Great job.

  3. Awesome. I can wait to steal this technique. :)

  4. This is the first implementation of parallax that I've seen work well on iOS. Fantastic work!

  5. Excellent job Scott (again) - thanks for sharing :)

  6. Great find, however it's not always working...

    On Chrome at OSX the parallax effect is not visible; tested with: - Chrome 32.0.1700.107 - Chrome 34.0.1819.0 canary

    Both on OS X 10.8.4 (12E55)

    It does however work on Safari (6.0.5) and Firefox (26.0)

  7. @Grezvany13 This is a bug with Chrome on Retina Macs where preserve-3d doesn’t work properly. It is being tracked: https://code.google.com/p/chromium/issues/detail?id=338980&q=parallax&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

    IE (11 and below tested) don’t play nice with with preserve-3d either. However this technique is progressive enhancement so it should appear flat, not broken.

  8. I have long admired the Parallax effect but hated that it had to be a JS thing as it's a presentation item and should be CSS.

    Now it is.... rockstar.

  9. This is amazing, thank you. The big issue I'm finding with this though is there is no momentum scrolling in iOS... which seems weird, because it works on desktop with a trackpad or a magicmouse.

    EDIT: ...nevermind, all it took was -webkit-overflow-scrolling: touch; applied to the parent perspective element.

  10. this is amazing. unfortunately it's not possible to apply overflow hidden to the parent element. this makes it very hard to use.

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

You must be logged in to comment.
  • 51989 Views
  • 11 Comments
  • 545 Hearts
Loading...
Loading...