npm i simple-parallax-js
Repository
Homepage
Installation
Old way
Simply copy/paste the below snippet just before your closing </body> tag:
or use the below CDN link provided by jsDelivr.com:
Via npm/yarn
You can also install it via:
#npm
npm install simple-parallax-js
#yarn
yarn add simple-parallax-js
and then import it as follows:
//ES6 import
;
//CommonJS
const simpleParallax = ;
Initialization
Giving the following HTML:
simply add the following JavaScript code:
const image = document;
image;
and voilà!
You can also choose to apply the parallax on multiple images:
const images = document;
images;
Once simpleparallax has been correctly initialized, it adds the simple-parallax-initialized class on the container.
simpleParallax now works with video:
var video = document;
video;
Settings
| Setting | Type | Default | Hint |
|---|---|---|---|
| orientation | String | up | up – right – down – left – up left – up right – down left – down right |
| scale | Number | 1.3 | need to be above 1 |
| overflow | Boolean | false | |
| delay | Number | 0 | the delay is in second Watch out, sometimes this delay is causing issue on iOS devices #47 |
| transition | String | ” | any CSS transition |
| customContainer | String or Node | ” | |
| customWrapper | String | ” | the selector of the custom wrapper |
| maxTransition | Number | 0 | it should be a percentage between 1 and 99 |
You can apply these settings with the following JS code:
var images = document;
images
delay: 0
orientation: ‘down‘
scale: 13
overflow: true
customContainer: ‘.container‘
customWrapper: ‘.wrapper‘
;
Methods
refresh
Refresh a simpleParallax instance (to recalculate all the positions):
var images = document;
var instance = images;
instance;
By default, the refresh method is fired at every window resize.
destroy
Destroy a simpleParallax instance:
var images = document;
var instance = images;
instance;
DOWNLOAD FULL SOURCE CODE
