Background Parallax Effect On Scroll Or Mousemove - parallaxBackground

Yet another JavaScript/jQuery background parallax plugin which applies subtle animations (rotate and shift) to background images as you scroll the webpage (or triggered by mouse move & gyroscope). 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. Import the necessary JavaScript files into your document.

<!-- Required -->
<script src="/path/to/cdn/gsap.min.js"></script>

<!-- jQuery is OPTIONAL -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- parallaxBackground Plugin -->
<script src="parallaxBackground.umd.js"></script>

3. Add a background image to your parallax container.

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

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

// Initialize with Vanilla JavaScript
new ParallaxBackground(document.querySelector(".parallax-demo"));

// Initialize with jQuery
$(document).ready(function() {
  $('.parallax-demo').parallaxBackground();
});

5. Config the parallax animation by passing the following options to the data-parallax-background attribute:

• animation_type: 'shift' or 'rotate'
• zoom: zoom level
• rotate_perspective: rotate perspective
• animate_duration: duration of animation
• events: 'SCROLL', 'MOUSE', or 'GYRO'

<section 
  class="parallax-demo"
  data-parallax-background='{"animationType": "ROTATE", duration": 3, "zoom": 30, "events": ["MOUSE"]}'>
  <div 
    class="parallax-inner"
    style="background-image: url('bg.jpg')">
  </div>
</section>

Changelog:

v2.0.3 (2023-12-15)

• Event Handling Enhancement
• jQuery is no longer a required dependency
• Transition to Modern GSAP
• Auto-adjustment Offsets
• IntersectionObserver for Gyroscope Event
• TypeScript Integration
• Build System Update
• Package Cleanup
• Code Quality Tools Integration

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.