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

Category: Animation , Javascript , Recommended | January 7, 2016
Author:Julien-Amblard
Views Total:5,399 views
Official Page:Go to website
Last Update:January 7, 2016
License:MIT

Preview:

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

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

You Might Be Interested In:


One thought on “Wave-style Pixel Hover Effect with JavaScript – Pixel.js

  1. gcstudio

    awesome, thanks for sharing… it doesn’t work on local but it makes sense.

    Reply

Leave a Reply