Background Parallax Effect On Scroll Or Mousemove - parallaxBackground

File Size: 6.95 KB
Views Total: 15697
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 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')">

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() {

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'
  data-parallax-background='{"animationType": "ROTATE", duration": 3, "zoom": 30, "events": ["MOUSE"]}'>
    style="background-image: url('bg.jpg')">


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.