parallax

v3.1 is here, featuring a vastly improved Readme and finally working npm releases again! That's right, you can now just do npm install parallax-js and be up-to-date again 🎆

Additionally, I have those features for you:

• Breaking: added selector option, now by default all child elements of the scene will become layers, see Readme on how to restore legacy behaviour
• added hoverOnly option
• added inputElement option
• fixed bug when using deviceMotion events
• polyfilled Object.assign for IE compatibility
• added ready callback
• added destroy method
• some slight performance improvements

Proudly presenting the first release after nearly 3 years!

Let's get the breaking changes out of the way first:

• the jQuery/Zepto version has been removed, use new Parallax($('#scene').get(0)) if you need to
• pointer events are disabled for layers by default, see the #interactivity section of the Readme for details on how to enable them
• HTML inline attributes take priority over the initial JS parameters
• support for old IE versions might be broken, please let me know if so and I'll try to fix it

Those were necessary to bring you these improvements and new features:

• general repository cleanup, more readable code, nicer coding style ✨
• a great build flow for contributors and those curious about the source code 🏗
• with a better documentation 📝
• lightning fast npm install process ⚡️
• you can now actually require and/or import parallax-js 😮
• bugfixes of course 👾
• increased performance and compatibility, especially for mobile devices 📱
• depth can be set independently for X and Y axis 👁
• adjustable precision, set to the best value for both performance and optics 🎯

Let us know what you think! And a big shoutout to all contributors, thank you for making this possible 💖

Choose compiled.zip from below if you want a drag-and-drop JS file.

Updated references.

• Refactored out layer parsing to updateLayers method. See Behaviours: API Example for usage.

• Added origin method to the API.

• Added origin control to the behaviours.

• Fixed motion calculation bug.

• Rewrote layer motion to use px rather than %, allowing for layers to have a zero width and height footprint, which in turn allows for interactive elements to be positioned on multiple layers without blocking one another.
• Created interactive.html to demonstrate the aforementioned functionality.
• Optimised internal css method so that prefixed properties are cached.

• Fixed minor typo bug that broke the jQuery version of the library.

• Updated mouse input to always be relative to the window rather than the page using event.client[X|Y] rather than event.page[X|Y].
• Added relativeInput behaviour to switch the mouse input coordinate system to the element passed to the Parallax constructor. See README for details.
• Added clipRelativeInput behaviour to limit the mouse input influence to the bounds of the element passed to the Parallax constructor. See README for details.
• Created a new example: relative.html to demonstrate this new functionality.