Universal Parallax Save
Easy parallax plugin using pure javascript. Also works on mobile platforms. Cross browser support.
Universal Parallax
Easy parallax plugin using pure javascript. Lightweight (2kb) and cross browser compatibility - including mobile platforms (iOS, Android).
See demo
:zap: Features
- Easy setup
- Pure JavaScript
- Adaptive height
- Works on mobile devices
- Lightweight (2kb minified)
:floppy_disk: Install
$ npm i universal-parallax -S
:rocket: Setup
#1
Choose between:
- Include this in your
<head>section
<link href="node_modules/universal-parallax/dist/universal-parallax.min.css" rel="stylesheet">
- Or add this CSS
.parallax__container {
clip: rect(0, auto, auto, 0);
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -100;
}
.parallax {
position: fixed;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
/* BG behaviour */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
:zap: BG behaviour in seperate class gives more flexibility controlling them :zap: SASS version available in /dist folder
#2
If <section> is your container, make the parallax element inside it
<section>
<div class="parallax" data-parallax-image="path/to/your_image">
</section>
:zap: You can also use background-image to define your image instead of using data-parallax-image=""
#3
Include the script to your project
<script src="node_modules/universal-parallax/dist/universal-parallax.min.js"></script>
#4
Initialize the JS function
<script>
new universalParallax().init();
</script>
That's it! :checkered_flag:
- If it resembles the demo - you're done :tada:
- 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
new universalParallax().init({
speed: 6.0
});
:zap: 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
.parallax {
opacity: 0.5;
}
Open Source Agenda Badge
