If you use React, install component with the implementation of the parlx.js library! More here
First, install the library in your project by npm:
$ npm install parlx.js
Or Yarn:
$ yarn add parlx.js
You can also connect script via one of CDNs:
bundle.run: https://bundle.run/parlx.js
jsDelivr: https://cdn.jsdelivr.net/npm/parlx.js/
unpkg: https://unpkg.com/parlx.js/
Connect libary with project using script tag in HTML:
<script src="/path/to/parlx.js"></script>
ES6 import:
import Parlx from 'parlx.js';
Or CommonJS:
const Parlx = require('parlx.js');
Next use library with:
• Vanilla JavaScript e.g:
const elems = document.querySelectorAll('.parallax');
const parlx = Parlx.init({
elements: elems,
settings: {
// options...
},
callbacks: {
// callbacks...
}
});
• or jQuery e.g:
Connect jQuery in HTML
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Or include via command line and CommonJS
$ npm install jquery
$ yarn add jquery
$ bower install jquery
const jQuery = require('jquery');
And call plugin on element
$('.parallax').parlx({
settings: {
// options...
},
callbacks: {
// callbacks...
}
});
• Plugin supports autoinit
To use it, add data-parlx
to html element e.g:
<div data-parlx></div>
• Destroy method
elems.parlx.destroy();
Name | Type | Default | Description | Available options |
---|---|---|---|---|
direction | string | vertical |
Parallax element move direction | vertical , horizontal , diagonal |
exclude | RegExp | null |
Disable parallax effect on selected user agents | e.g: /(Mozilla|iPad)/ |
height | string | 400px |
Height of parallax element container | e.g: 500px , 70vh , auto |
speed | number | 0.3 |
Parallax speed | values >= -1 and <= 1 |
type | string | background |
Type of parallax | foreground (div move), background (content move) |
Name | Description | Available options |
---|---|---|
onInit | Callback on plugin init | el => { /* code */ } |
onDestroy | Callback on plugin destroy | el => { /* code */ } |
onResize | Callback on window resize | el => { /* code */ } |
onScroll | Callback on window scroll | el => { /* code */ } |
parlxMove
event will output current position of the parallax element
This project is licensed under the MIT License © 2018-present Jakub Biesiada