Wave-style Pixel Hover Effect with JavaScript – Pixel.js

Preview:

Description:

Pixel.js is a fancy JavaScript plugin helps you apply a wave-style directional pixel hover effect to images.

How to use it:

Download and load the Pixel.js JavaScript file in the html document.

<script src="js/pixel.min.js"></script>

Apply the pixel hover effect to your images.

var aThumbs = document.querySelectorAll('.selector');
var aPixel = [];

init = function(){
for (var i = 0; i < aThumbs.length; i++) {
  aPixel.push( new Pixel( aThumbs[i].querySelector('img'), {
    w : 7,
    preload : true
    
  }) );
};
}
window.onload = init;

All available settings.

w: 5,
trace: .1,
addClass: true,
aClass: ["_top", "_right", "_bottom", "_left"],
wave: {
  w: 10,
  speed: 5
},
preload: false