Background Parallax Scrolling Effect with jQuery and CSS3 - xsParallax
File Size: | 3.37 MB |
---|---|
Views Total: | 4973 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

xsParallax.js is a simple jQuery plugin that provides a simple way to implement vertical or horizontal Parallax scrolling effects on your background images. Powered by CSS3 transitions.
How to use it:
1. Include jQuery library and the jQuery xsParallax.js script on your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="xsparallax.js"></script>
2. Prepare your background images (xspl-bg-1.jpg, xspl-bg-2.jpg, ...) and put them into the xspl-backgrounds
folder.
3. The markup structure.
<div id="parallax"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
4. Call the plugin on the 'parallax' element to add images as parallax backgrounds to its child elements
$('#parallax').xsParallax({ direction: 'vertical', offset: 0 });
5. The core CSS/CSS3 style rules for the parallax scrolling effect.
.xspl-layer { display: block; background-size: cover; background-repeat: no-repeat; background-position: 50% 0; background-attachment: fixed; } .horizontal { overflow: hidden; } .scroll-stage { -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .horizontal .xspl-layer { float: left; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -ms-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; }
6. All the default settings.
$('#parallax').xsParallax({ // background folder bgFolder: 'xspl-backgrounds', // file extension fileExtension: '.jpg', // animation speed speed: 5, // distance where the layer start scrolling offset: 100, // vertical or horizontal direction: 'vertical' });
Changelog:
2018-09-21
- removed unnecessary codes
2015-01-29
- used images and position:fixed to gain the same effect with desktop
This awesome jQuery plugin is developed by hoangvuit. For more Advanced Usages, please check the demo page or visit the official website.