parallaxy
v2.0.1
Published
Adds parallax effect to images and videos
Downloads
22
Maintainers
iborthenReadme
What it is
Adds parallax effect to images and videos.
Installation
parallaxy.js is available as an npm package.
npm install parallaxy --saveAdd parallaxy.min.js to the bottom of the <body> like this:
<script src="parallaxy.min.js"></script>Note
This is an very early version of parallaxy.
How to Use
Usage
In this example the image will have a parallaxy effect.
<div data-parallaxy>
<img src="image.jpg">
<div data-parallaxy-ignore>
<h1>Content above</h1>
</div>
</div>After DOM change
If the DOM has changed and you want to reset Parallaxy, just run;
Parallaxy.refresh();Options
Options must be passed via data-attributes. Append the option name to data-parallaxy-, as in data-parallaxy-speed="0.25".
| Name | Type | Default | Description | |---------------|-----------|-----------|----------------------------------------------| | speed | Float | 0.5 | Adjust parallaxy effect from 0-1 (none-max) | | ignore | Boolean | false | Ignore parallaxy effect on this element |
Global options (data-attribute):
| Name | Type | Default | Description | |----------------------|-----------|-----------|----------------------------------------------| | ignoresmoothscroll | Boolean | null | Ignore smoothMouseWheel. Place anywhere |
Browser Support
Coming soon. Uses CSS translate2D to scale and position images.
License
The code is available under the MIT License.