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