Parallax mixins

[scottkellum]

Add parallax mixins like this to Toolkit along with docs.

[Snugug]

I'm happy to add something like this to Toolkit, but I'm not sure if parallax is the correct way to describe this. While perspective is a big part of parallax, so is the movement of items at different speeds. We know that we can't accomplish this without JavaScript, but it also means that this isn't true parallax. Maybe something like perspective or depth would be better unless we'd like to add some JavaScript to accomplish the different scroll speed.

I'd also like to see support for perspective and transform mixins if they're available. As Toolkit 2.x.x will require Sass 3.3.x at a minimum, we can use the mixin-exists functions.

[scottkellum]

This is movement at different speeds, accomplished without JavaScript, and this IS true parallax.

[Snugug]

Do you have a demo where I can more clearly see that? The linked demo you sent doesn't appear to have the items scrolling at different speeds. I expect to see larger items (closer) to be moving faster that smaller items (further) and the distances between them changing as a result.

[scottkellum]

Are you scrolling through the demo? Because every element moves at a different speed on scroll.

What browser are you using? Works in Chrome and Safari (iOS as well) for me although just tested in Firefox and it appears to be broken. Need to play around with that a bit more.

[Snugug]

Okay, I see the disconnect.

In Safari and iOS, this is bloody fantastic!
However, in Chrome 32.0.1700.77+ (including Canary), Opera 18, and Firefox, this doesn't work and everything is static. Happy to merge this in once it works across the major browsers.

[scottkellum]

Pushed changes, should work now. I wasn’t preserving 3D as bulletproof as I could have it.

[Snugug]

Can you push an update to the pen so I can see it in action?

[scottkellum]

Yeah it should all be up to date: http://codepen.io/scottkellum/pen/bHEcA

[Snugug]

Working in Firefox now, still doesn't appear to be working in Chrome 32/Opera though

[scottkellum]

hm, working on Chrome 32.0.1700.77 for me. Can’t figure out how to get it working in Opera… I may try later.

[Snugug]

Okay, I'm going to merge it in, but I still can't seem to get it to work in any Blink powered browser (despite the fact that it appears to be applying the properties). Thanks for the awesomeness.

[scottkellum]

Just tried in 34.0.1807.0 canary and it worked. Maybe it’s a Chrome retina issue.

[Snugug]

Wouldn't that be fantastic? 👅