jQuery Plugin To Create Parallax Scrolling Backgrounds - easyParallax

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.