jQuery Plugin To Create Parallax Scrolling Backgrounds - easyParallax
File Size: | 9.13 KB |
---|---|
Views Total: | 1475 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery parallax plugin which utilizes the CSS position properties to create a simple, fast parallax effect on background images as your user scrolls up and down on the web page. Fully responsive and works on all modern web browsers.
How to use it:
1. Load the jQuery easyParallax plugin and make sure the latest version of jQuery library has been loaded in the webpage.
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="jquery.easyparallax-1.0.0.min.js"></script>
2. Insert the parallax background image to a specified container using data-bg
attribute as follow:
<div class="example" data-bg="bg.jpg"> ... </div>
3. The plugin allows you to have different version of an image for 3 different screen sizes (useful for responsive web design):
- data-bg: screen size is smaller than 500px
- data-bg500: screen size is between 500px and 1000px
- data-bg1000: screen size is larger than 1000px
<div class="example" data-bg="small.jpg" data-bg500="medium.jpg" data-bg1000="large.jpg"> ... </div>
4. Initialize the plugin to apply a default parallax scrolling effect to the background image.
$('.example').easyParallax();
5. Config the parallax scrolling effect with the following settings.
$('.example').easyParallax({ // display data debug through browser console 'debug': false, // alignement of the bg compared to the main block 'alignment': 'center', // the value of the parallax effect 'effectAmount': 400, // The min screen width value beyond which the effect works 'effectThreshold': 0, // callback when parallax bg is loaded and added to stage 'isReady': function(el){} });
This awesome jQuery plugin is developed by davidrichart. For more Advanced Usages, please check the demo page or visit the official website.