Xallarap
Super simple, lightweight parallax.
Browser support
Chrome | Edge | Firefox | Safari / iOS | UC Android | Samsung |
---|---|---|---|---|---|
60+ | 14+ | 53+ | 10+ | 11+ | 6+ |
Note: This package does not support IE anymore.
If you're looking for IE11 support, you can install xallarap@^0.2.8
or make sure you're compiling down to ES5 with something like @babel/preset-env
Get Down to Business
npm install xallarap --save
; { if documentreadyState !== 'loading' ; else document; } { ;};
All options can be assigned (or overwritten) with the data attributes seen below.
You can also use ES6 modules to take advantage or tree-shaking with Webpack or Rollup.
; { if documentreadyState !== 'loading' ; else document; } { ;};
Usage
options.foreground.el
Type: string|array|node
Default: [data-parallax]
[data-parallax-compensate]
options.foreground.compensate Type: bool
Default false
[data-parallax-amount]
options.foreground.amount Type: int
Default: 300
options.background.el
Type: array|string|node
Default: [data-parallax-background]
[data-parallax-background]
options.background.image Type: bool
Default false
[data-parallax-amount]
options.background.amount Type: int
Default: Math.ceil(window.innerHeight / 2)
Hello, World.
You can use this method to just toss some parallax on a page quickly.
Hello, world.
Then, you can simply load the script and initial it.
You’re all set!
MIT License. © 2017 Cornelius Ukena.