jQuery Plugin For Pixel Brush Animations - Pixelbrush.js

Pixelbrush.js is a fancy jQuery plugin that applies configurable 'Pixel Brush' animations to your images using JavaScript and HTML5 canvas.

How to use it:

1. Load the necessary JavaScript libraries as listed below:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.newPlugin.js"></script>
<script src="jquery.actual.min.js"></script>

2. Download and load the jQuery Pixelbrush.js script after jQuery library.

<script src="jquery.pixelbrush.js"></script>

3. Insert an image (Transparent PNG) to the webpage and config the 'Pixel Brush' animation using HTML 'data' attributes as these:

<img id="image-id"
     data-plugin="pixelbrush"
     data-mode="fade-in"
     data-loop="false"
     data-autostart="true"
     data-ignore-class="hide"
     data-interval="15"
     data-oncomplete="doSomething();"
     src="bird.png"
     class="img-responsive hide">

4. You can also config the 'Pixel Brush' animation via JavaScript:

<img id="image-id"
     src="bird.png"
     class="img-responsive hide">

$('#image-id').pixelbrush({
  loop: false,
  mode: 'fade-in',
  ignore_class: '',
  interval: 15,
  onComplete: function() { }
});

5. Animation types included:

• fade-in
• fade-out
• focus
• focus-in
• unfocus
• unfocus-out
• bounce

---

This awesome jQuery plugin is developed by seanmsimon. For more Advanced Usages, please check the demo page or visit the official website.