Background Parallax Effect On Scroll Or Mousemove - jQuery parallaxBackground

Yet another jQuery background parallax plugin which applies subtle animations (rotate, shift and zoom) to background images as you scroll the webpage (or triggered by mouse move). Heavily based on GSAP HTML5 and javascript animation library.

How to use it:

1. Install & download the jQuery parallaxBackground with NPM:

# NPM
$ npm install parallax_background --save

2. Add a background image to your parallax container.

<section class="parallax-demo">
  <div class="parallax-inner"
       style="background-image: url('bg.jpg')">
  </div>
</section>

3. Calling the function on the parent container will apply the parallax effect to the background image as you scroll down/up the page.

$('.parallax-demo').parallaxBackground();

4. Change the default animation type and config the animation whatever you like.

$('.parallax-demo').parallaxBackground({

  // 'shift', 'fade'
  animation_type: 'shift',

  // zoom level
  zoom: 20,

  // rotate perspective
  rotate_perspective: 1400,

  // duration of animation
  animate_duration: 1
  
});

5. The parallax effect also can be triggeded by mouse movement.

$('.parallax-demo').parallaxBackground({

  event: 'mouse_move'

});

6. React to gyroscope event.

$('.parallax-demo').parallaxBackground({

  gyroscope_event: true

});

7. If you want to ignore z-index property.

$('.parallax-demo').parallaxBackground({

  ignore_z_index: false

});

Change log:

v1.0.9 (2018-04-25)

• Added gyroscope event, ignore z-index

---

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