Universal Parallax
Easy parallax plugin using pure javascript. Lightweight (2kb) and cross browser compatibility - including mobile platforms (iOS, Android).
See demo
⚡️ Features
- Easy setup
- Pure JavaScript
- Adaptive height
- Works on mobile devices
- Lightweight (2kb minified)
💾 Install
$ npm i universal-parallax -S
🚀 Setup
#1
Choose between:
- Include this in your
<head>
section
- Or add this CSS
⚡️ BG behaviour in seperate class gives more flexibility controlling them ⚡️ SASS version available in /dist folder
#2
If <section>
is your container, make the parallax element inside it
⚡️ You can also use background-image
to define your image instead of using data-parallax-image=""
#3
Include the script to your project
#4
Initialize the JS function
That's it! 🏁
- If it resembles the demo - you're done 🎉
- See customizations underneath
- Please report any problems you find
- Otherwise, let me know me for new features or improvements. Thanks!
Custom speed
You can change the parallax speed; the higher the number, the slower the parallax effect
;
⚡️ speed: 1
is the minimum value before the background image is fixed
Tips
Opacity
If you want your backround color to shine through or dampen the image without making it a .png - just add transparency to it