Parallax Animation On Mouse Hover In jQuery – parallax.js

Animation
parallax-mouse-hover-effect
File Size: 5.34 MB
Views Total: 8479 views
Last Update:March 29, 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>
      </div>
  </div>

Add Parallax script :

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

});
});

Done

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

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.