This time I will share jQuery Plugin and tutorial about jQuery Plugin For Pixel Brush Animations – Pixelbrush.js, hope it will help you in programming stack.
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:
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="jquery.newPlugin.js"></script> |
3 |
<script src="jquery.actual.min.js"></script> |
2. Download and load the jQuery Pixelbrush.js script after jQuery library.
1 |
<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:
02 |
data-plugin="pixelbrush" |
06 |
data-ignore-class="hide" |
08 |
data-oncomplete="doSomething();" |
10 |
class="img-responsive hide"> |
4. You can also config the ‘Pixel Brush’ animation via JavaScript:
3 |
class="img-responsive hide"> |
1 |
$('#image-id').pixelbrush({ |
6 |
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.
