DownloadParallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead. parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene. If you don't have a smart device, no worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Most configuration settings can be declared either as data-value attribute of the scene element, or property of the configuration object. The programmatic approach will take priority over the data-value attributes set in the HTML. Some options can also be set at run-time via instance methods. Parallax will only be in effect while the cursor is over the scene element, otherwise all layers move back to their initial position.
Features
- Each Parallax.js instance needs a container element, the scene
- All direct child elements of the scene will become moving objects
- The movement applied to each layer will be multiplied by its depth attribute
- The programmatic approach will take priority over the data-value attributes set in the HTML
- The movement stops as soon as the edge of the scene element is reached by the cursor
- Parallax will only be in effect while the cursor is over the scene element
Project Samples
