Parallax Animation On Mouse Hover In jQuery – parallax.js

File Size: 5.34 MB
Views Total: 8504 views
Last Update:April 20, 2024
Publish Date: August 01, 2013
Official Website: Go to website
License: MIT
Plugin Author: wagerfield
Demo    Download

Any Image or HTML Element Effect With Parallax On Mouse Hover with any direction in jQuery. Parallax.js Engine that reacts to the orientation of a smart device. we have used with multiple images (for overlap effect) with help of parallax with help of some jQuery & css code. parallax.js is light weight jquery library. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

How to use :

Add jQuery & parallax Scripts :

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="parallax.min.js"></script>

Add Simple Html Code :

<div class="panel section-5" id="fifth" data-section-name="fifth">
      <div class="parallax" id="scene">
        <div class="parallax-img-1"></div>
        <div class="parallax-img-2" data-depth="0.2"></div>
        <div class="parallax-img-3"></div>

Add Parallax script :

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene, {
  relativeInput: true



Thanks for make jQuery plugin is developed by wagerfield For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v3.1
  • v3.0
  • v2.1.3
  • v2.1.2
  • v2.1.1
  • v2.1.0
  • v2.0.1
  • v2.0.0
  • v1.1.1
  • v1.1.0
  • v1.0.0


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.