Parallax Effect On Mouse Hover In jQuery – parallax.js

Animation
Demo    Download
parallax-mouse-hover-effect
File Size: 5.34 MB
Views Total: 1659 views
Last Update:March 1, 2020
Publish Date: December 22, 2019
Official Website: Go to website
License: MIT

Parallax Effect On Mouse Hover with any direction in jQuery. Parallax.js Engine that reacts to the orientation of a smart device. we have used multiple images (for overlap effect) with help of parallax.js and 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 :

1. 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>

2. Add Simple Html :

<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>

3. Add Parallax script :

<script type="text/javascript">
 $(function(){
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene, {
  relativeInput: true

});
});
</script>


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.