Interactive Parallax Effect For Multiple Images - CZ-Parallax

CZ-Parallax is a small jQuery plugin that applies an interactive parallax effect to multiple foreground and background images on mouse movent.

How to use it:

1. Download and insert the minified version of the jQuery CZ-Parallax plugin after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/CZ-Parallax_jQuery-min.js"></script>

2. Call the function on the target container element and specify the forground & background images.

<div id="parallaxContainer">
</div>

$('#parallaxContainer').CZParallax({
  fg: 'fg.jpg',
  bgs: [
      'bg-1.jpg',
      'bg-2.jpg',
      'bg-3.jpg',
      // more bg images here
  ]
});

3. Set the moving speed of the images on mouse movement. Default: 1.

$('#parallaxContainer').CZParallax({
  fg: 'fg.jpg',
  bgs: [
      'bg-1.jpg',
      'bg-2.jpg',
      'bg-3.jpg',
      // more bg images here
  ],
  speed: 2
});

4. Set the zoom factor of the foreground and background images.

$('#parallaxContainer').CZParallax({
  fg: 'fg.jpg',
  bgs: [
      'bg-1.jpg',
      'bg-2.jpg',
      'bg-3.jpg',
      // more bg images here
  ],
  fgZoom: 1,
  bgZoom: 1.05
});

5. Set the images to move only along the x or y axis. Default: none.

$('#parallaxContainer').CZParallax({
  fg: 'fg.jpg',
  bgs: [
      'bg-1.jpg',
      'bg-2.jpg',
      'bg-3.jpg',
      // more bg images here
  ],
  lock: 'x' // or 'y'
});

Changelog:

2018-01-09

• Smaller bug fixes

---

This awesome jQuery plugin is developed by masicmirza. For more Advanced Usages, please check the demo page or visit the official website.