Interactive Image Hover Effect With jQuery And GSAP
File Size: | 4.75 KB |
---|---|
Views Total: | 4162 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is an fancy image hover effect that uses jQuery and GSAP's TweenMax.js to create an interactive motion blur effect on layered images when mouse moving.
How to use it:
1. Add images layers to the webpage as follows:
<div class="container"> <div class="hero-section" id="hero-section-a"> <img src="1.jpg"> </div> <div class="hero-section" id="hero-section-b"> <img src="1.jpg"> </div> <div class="hero-section" id="hero-section-c"> <img src="1.jpg"> </div> </div>
2. Load the necessary jQuery and TweenMax.js libraries at the end of the document.
<script src='jquery.min.js'></script> <script src='TweenMax.min.js'></script>
3. The required CSS styles.
.container { position: relative; height: 100vh; overflow: hidden; width: 100%; } .hero-section { filter: grayscale(100%); -webkit-filter: grayscale(100%); z-index: -1; } .hero-section img { position: absolute; opacity: 0.45; margin: auto; width: 150%; top: -25%; right: -25%; bottom: -25%; left: -25%; }
4. The core JavaScript to active the effect.
jQuery(function( $ ){ var $body=$("body"), $heroA=$("#hero-section-a img"), $heroB=$("#hero-section-b img"), $heroC=$("#hero-section-c img"); TweenMax.set( $heroA, { transformStyle: 'preserve-3d' }); TweenMax.set( $heroB, { transformStyle: 'preserve-3d' }); TweenMax.set( $heroC, { transformStyle: 'preserve-3d' }); $body.mousemove(function(e) { var sxPos = e.pageX / $body.width() * 100 - 50; var syPos = e.pageY / $body.height() * 100 - 50; console.log("x:" + sxPos + ", y:" + syPos); TweenMax.to( $heroA, 1, { rotationY: 0.05 * sxPos, rotationX: 0.20 * syPos, rotationZ: '-0.1', transformPerspective:500, transformOrigin:'center center' }); TweenMax.to( $heroB, 1, { rotationY: 0.10 * sxPos, rotationX: 0.15 * syPos, rotationZ: 0, transformPerspective:500, transformOrigin:'center center' }); TweenMax.to( $heroC, 1, { rotationY: 0.15 * sxPos, rotationX: 0.10 * syPos, rotationZ: 0.10, transformPerspective:500, transformOrigin:'center center' }); }); });
This awesome jQuery plugin is developed by jimthornton. For more Advanced Usages, please check the demo page or visit the official website.