#HoverEffects.js
HoverEffects.js is a collection of animated effects on images that are indended to be shown on hover or page load, etc.
##Basic Usage
-
Include the javascript file in your document's
head<head> <script src="hovereffects.js" type="text/javascript"></script> </head> -
Insert the following javascript at the bottom of your body tag. Update the selector in the querySelectorAll function to select your images.
<script> var hoverElements = document.querySelectorAll('img.hover_animate'); for (var i = 0; i < hoverElements.length; ++i) { var animation = animate(hoverElements[i]).erase({ initialOpacity: 0.5, brushSize: 10, margin: 24, spacing: 1, randomness: 20, duration: 3000 }); animation.element.addEventListener( 'mouseover', animation.beginDrawing ); animation.element.addEventListener( 'mouseout', animation.cancelDrawing ); } </script> -
Invoke the animation plugin with the function
animate(element). You can then attach one of the animations available:
-
erase: An eraser effect painting over the image to make it opaque from being transparenterase(options)###Options
- initial opacity: Value from 0-1, where 1 is fully opaque and 0 is transparent
- brush radius: Size of the brush painting on the image
- margin size: How close the brush strokes get to the edge of the image
- line distance: How far apart the brush strokes are when painting
- randomness: Randomizes the margin size and the line distance. 5 is barely random, 20 is fairly random.
- duration: Time length of the animation in milliseconds