Support3d transform

[craigblagg]

I was just implementing this with some pretty large image layers. And using top/left to move elements was pretty jolty.

I've added support for using translate3d rather than top/left where it is supported. Default to true. * This does however require a bump in jQuery dependency support to 1.8.0+

I've also implemented an option, allowing for use of this, on plax layers contained within fixed elements. Currently if the plax layer is a fixed element, and following scroll it would be calculated as outside the viewport, movement is stopped even though it is still visible. I've added an option to declare that the plax is fixed - and continue it's movement.

Updated all examples to use jQuery 1.8.0, bower.json, and README to document the 2 additional options above.

[cameronmcefee]

:metal: Thanks for this. I like the smoothness that the 3d provides. I imagine this will actually yield better performance.

It seems like there are some tab/space issues that are messing with the alignment of things. Would you be willing to clean those up before this merges?

[craigblagg]

No problem, will clean up over the next day or 2 and update the pull request when done.

[cameronmcefee]

:+1: Once that's ready I'll get this merged.

[cameronmcefee]

I've also implemented an option, allowing for use of this, on plax layers contained within fixed elements. Currently if the plax layer is a fixed element, and following scroll it would be calculated as outside the viewport, movement is stopped even though it is still visible. I've added an option to declare that the plax is fixed - and continue it's movement.

Sorry, I forgot to ask about this. I haven't had a chance to test out the case you've mentioned this resolves, but from your description this sounds like it's a bug, more than something that needs a feature toggle. Should the fixed position be something that is detected rather than flagged with a setting, or can you see situations where you'd actually want the erratic behavior?

[craigblagg]

Very good point.

I’ll remove that from being a flag, and just be expected behaviour.

On 27 Mar 2014, at 17:36, Cameron McEfee notifications@github.com wrote:

I've also implemented an option, allowing for use of this, on plax layers contained within fixed elements. Currently if the plax layer is a fixed element, and following scroll it would be calculated as outside the viewport, movement is stopped even though it is still visible. I've added an option to declare that the plax is fixed - and continue it's movement.

Sorry, I forgot to ask about this. I haven't had a chance to test out the case you've mentioned this resolves, but from your description this sounds like it's a bug, more than something that needs a feature toggle. Should the fixed position be something that is detected rather than flagged with a setting, or can you see situations where you'd actually want the erratic behavior?

— Reply to this email directly or view it on GitHub.

[craigblagg]

That should now be looking tidier.

And handling of fixed position elements is no longer behind a flag, and simply default behaviour.

[cameronmcefee]

:cool: Thanks. I appreciate the improvements!

[Acccent]

Note: apparently using translate3d, while it does increase performance significantly, messes up with the stack order... more info here: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d (using the solution suggested in that link didn't fix anything for me)

Also for some reason no more than 9/10 layers can be displayed without going back to the top/left method.

edit: well I changed all of the instances of translate3D to use only translate itself, which takes no z value, and it works: http://pastebin.com/hV3ZXRFj I don't know how to commit a change on GitHub, and also I removed the browser support check because I didn't know how to adapt it to the new method (so now if the browser doesn't support translate but it's set on in the plugin's options, the parallaxing just won't work instead of reverting back to top/left)

[cameronmcefee]

Hi @Acccent, thanks for the info. I'll have to look into that. If this is currently causing you issues, this is the code from the commit right before this change, which still uses the non-3d method.