Hover effect

Javascript library to draw and animate images on hover.

DEMO

ARTICLE

Example

Use locally

To load the images you'll need to view the demo via a web server, simply go to the demo's folder location and type python -m SimpleHTTPServer 8000 in your terminal. Then access the demo in your browser by typing: localhost:8000

Basic usage

This helper needs Three.js and gsap to do the transition, so you need to include it before this little helper.

Then you only need a div element in HTML to start animating things with a piece of code like this:

<!-- Div to draw the effect -->
<div class="my-div"></div>

<!-- library needed -->
<script src="three.min.js"></script>
<script src="gsap.min.js"></script>

<script src="dist/hover.umd.js"></script>
<script>
    var myAnimation = new hoverEffect({
        parent: document.querySelector('.my-div'),
        intensity: 0.3,
        image1: 'images/myImage1.jpg',
        image2: 'images/myImage2.jpg',
        displacementImage: 'images/myDistorsionImage.png'
    });
</script>

Node JS usage

This helper can also be used in node js environments. Three.js and TweenMax scripts are included as dependencies in the package so you don't need to manually include them.

Install

npm install hover-effect

Import

import hoverEffect from 'hover-effect'

Init

Initialize just as you would in the basic usage example above.

Options

Mandatory parameters

Optional parameters

Methods

Credits

Thanks to :

• Codrops for the creation of the example
• Aarni Koskela for the improvements
• Celso White for the multiple module formats

Made with it

• Codepen demo and Medium article by Alex Brown
• https://stimmt.digital/en/
• https://www.fabiofantolino.com/en
• Youtube tutorial
• https://www.youtube.com/watch?v=9kcOQdJHyIo
• https://www.estudionk.com/en
• https://github.com/AlbanCrepel/vue-displacement-slideshow
• https://digitalpresent.io/about
• https://www.couleecreative.com/
• https://two.zero.nyc/
• https://www.danilodemarco.com/
• https://lsce.com/
• http://vadimtyurin.com/