precisionĭecimals the element positions will be rounded to. 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. The default value of 0.1 adds some sensible easing. At 1 the layers will instantly go to their new positions, everything below 1 adds some easing. frictionX & frictionYĪttribute: data-friction-x & data-friction-yĪmount of friction applied to the layers. Multiplies the input motion by this value, increasing or decreasing the movement speed and range. Leaving this value at false gives complete freedom to the movement. Limits the movement of layers on the respective axis. Setting both of these values to false will cause the layers to move with the device motion or cursor. Inverts the movement of the layers relative to the input.
calibrateX & calibrateYĪttribute: data-calibrate-x & data-calibrate-yĬaches the initial X/Y axis value on initialization and calculates motion relative to this. Will only work in combination with relativeInput, setting hoverOnly might make sense too. The configuration property expects an HTMLElement, the data value attribute a query selector string. inputElementĪllows usage of a different element for cursor input. Works best in combination with relativeInput. Parallax will only be in effect while the cursor is over the scene element, otherwise all layers move back to their initial position. No effect when gyroscope is used, or hoverOnly is active. This means the movement stops as soon as the edge of the scene element is reached by the cursor. clipRelativeInputĬlips mouse input to the bounds of the scene. Makes mouse input relative to the position of the scene element. 2 ) 2.2 Configuration Options relativeInput You're free to identify it by any means you want, but for now, let's use an ID: Of course, when you've installed via npm, and use browserify/babel, you can also simply do:Ĭonst Parallax = require('parallax-js') Create your HTML elementsĮach Parallax.js instance needs a container element, the scene. If you use the compiled version, either downloaded from the releases page, or copied from the dist folder, include the script like any other Javascript library:
#Anime moments 1.0 code
You will then find the source code in node_modules/parallax-js/src/parallax.js and the browserified, babelified, uglified, production-ready version in node_modules/parallax-js/dist/ 1.2 Preparations Include the Script Copy the file of your choice into your project directory.Use for deployment, because it has a smaller file size.Use parallax.js if you want to snoop around in the code.
#Anime moments 1.0 archive
#Anime moments 1.0 download
Download compiled.zip from the latest release.Getting started 1.1 Installation 1.1 a) Beginners Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.Ĭheck out the demo to see it in action! Table of Contentsġ. Parallax Engine that reacts to the orientation of a smart device.
0 kommentar(er)
