wagerfield / parallax

Parallax 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. Check out the **demo** to see it in action! Table of Contents • 1. Getting started • 1.1 Installation • 1.2 Preparations • 1.3 Run Parallax • 2. Configuration • 2.1 Programmatic vs Declarative • 2.2 Configuration Options • 3. Methods • 4. Development • 4.1 Running the Project • 4.2 Opening an Issue • 4.3 Known Issues • 5. FAQ • 6. Information • 6.1 License • 6.2 Contributors • Getting started 1.1 Installation 1.1 a) Using the CDN • Add to your markup • Done! Many thanks to the fine folks over at cdnjs for hosting our library. 1.1 b) Beginners • Head over to the releases Section • Download from the latest release • Extract the ZIP archive and locate the and files • Use if you want to snoop around in the code • Use for deployment, because it has a smaller file size • Copy the file of your choice into your project directory • So far, so good! 1.1 c) Professionals You will then find the source code in and the browserified, babelified, uglified, production-ready version in 1.2 Preparations Include the Script If you use the compiled version, either downloaded from the releases page, or copied from the folder, include the script like any other Javascript library: Of course, when you've installed via npm, and use browserify/babel, you can also simply do: or Create your HTML elements Each Parallax.js instance needs a container element, the scene. You're free to identify it by any means you want, but for now, let's use an ID: Per default, all direct child elements of the scene will become moving objects, the layers. You can change this to a custom query selector, but again, we're going with the easiest approach for now: While all other options and parameters are optional, with sane defaults, and can be set programatically, each layer needs a attribute. The movement applied to each layer will be multiplied by its depth attribute. 1.3 Run Parallax As soon as your DOM is ready and loaded, you can create a new Parallax.js instance, providing your scene element as first parameter. That's it, you're running Parallax.js now! • Configuration 2.1 Programmatic vs Declarative 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. Declarative: Programmatic: Using Methods at Runtime: 2.2 Configuration Options relativeInput Property: **relativeInput** Attribute: **data-relative-input** Value: *boolean* Default: *false* Makes mouse input relative to the position of the scene element. No effect when gyroscope is used. clipRelativeInput Property: **clipRelativeInput** Attribute: **data-clip-relative-input** Value: *boolean* Default: *false* Clips mouse input to the bounds of the scene. This means the movement stops as soon as the edge of the scene element is reached by the cursor. No effect when gyroscope is used, or is active. hoverOnly Property: **hoverOnly** Attribute: **data-hover-only** Value: *boolean* Default: *false* Parallax will only be in effect while the cursor is over the scene element, otherwise all layers move back to their initial position. Works best in combination with . No effect when gyroscope is used. inputElement Property: **inputElement** Attribute: **data-input-element** Method: **setInputElement(HTMLElement)** Value: *null* or *HTMLElement* / *String* Default: *null* Allows usage of a different element for cursor input. The configuration property expects an HTMLElement, the data value attribute a query selector string. Will only work in combination with , setting might make sense too. No effect when gyroscope is used. calibrateX & calibrateY Property: **calibrateX** & **calibrateY** Attribute: **data-calibrate-x** & **data-calibrate-y** Method: **calibrate(x, y)** Value: *boolean* Default: *false* for X, *true* for Y Caches the initial X/Y axis value on initialization and calculates motion relative to this. No effect when cursor is used. invertX & invertY Property: **invertX** & **invertY** Attribute: **data-invert-x** & **data-invert-y** Method: **invert(x, y)** Value: *boolean* Default: *true* Inverts the movement of the layers relative to the input. Setting both of these values to *false* will cause the layers to move with the device motion or cursor. limitX & limitY Property: **limitX** & **limitY** Attribute: **data-limit-x** & **data-limit-y** Method: **limit(x, y)** Value: *false* or *integer* Default: *false* Limits the movement of layers on the respective axis. Leaving this value at false gives complete freedom to the movement. scalarX & scalarY Property: **scalarX** & **scalarY** Attribute: **data-scalar-x** & **data-scalar-y** Method: **scalar(x, y)** Value: *float* Default: *10.0* Multiplies the input motion by this value, increasing or decreasing the movement speed and range. frictionX & frictionY Property: **frictionX** & **frictionY** Attribute: **data-friction-x** & **data-friction-y** Method: **friction(x, y)** Value: *float* between *0* and *1* Default: *0.1* Amount of friction applied to the layers. At *1* the layers will instantly go to their new positions, everything below 1 adds some easing. The default value of *0.1* adds some sensible easing. Try *0.15* or *0.075* for some difference. originX & originY Property: **originX** & **originY** Attribute: **data-origin-x** & **data-origin-y** Method: **origin(x, y)** Value: *float* between *0* and *1* Default: *0.5* X and Y origin of the mouse input. The default of *0.5* refers to the center of the screen or element, *0* is the left (X axis) or top (Y axis) border, 1 the right or bottom. No effect when gyroscope is used. precision Property: **precision*…