Responsive Performant Background Parallax Effect - Parallax Background
File Size: | 10.3 KB |
---|---|
Views Total: | 6000 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another parallax jQuery plugin that makes use of requestAnimationFrame
to implement smooth, performant parallax scrolling effects on the background images when you scroll down/up the webpage. Fully responsive design and works perfectly on mobile devices.
How to use it:
1. Add the jQuery parallax-background.js script to the webpage after you've add jQuery library.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="dist/parallax-background.js"></script>
2. The required html structure for the parallax layers.
<div class="parallax-container"> <div class="img img1"></div> </div> <div class="parallax-container"> <div class="img img2"></div> </div> <div class="parallax-container"> <div class="img img3"></div> </div>
3. The required CSS styles.
.parallax-container { overflow: hidden; position: relative; } .img { background-position: 50% 50%; background-size: cover; display: none; position: absolute; width: 100%; }
4. Add custom parallax images as backgrounds to the layers.
.img1 { background-image: url('1.jpg'); height: 90vh; top: -10vh; } .img2 { background-image: url('2.jpg'); } .img3 { background-image: url('3.jpg'); }
5. Just call the plugin and we're done.
$('.parallax-container').parallaxBackground({ 'image': '.img' });
Change log:
2016-06-30
- Use outerHeight
2016-06-12
- Separate paint laters for each element
This awesome jQuery plugin is developed by luukdv. For more Advanced Usages, please check the demo page or visit the official website.