Creating Animated Brick Wall Effects using jQuery Bricklr Plugin

Bricklr is a jQuery plugin which allows you to create brick wall animations in any shapes and colors. Perfect for creating animated and interactive background for your web page.

How to use it:

1. Load jQuery library and the jQuery bricklr plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/bricklr.js"></script>

2. Create a container where you want to display the brick wall animation.

<div class="demo-container" id="demo"></div>

3. Call the plugin to initialize the brick wall animation with default settings.

$(function () {
bricklr({target:'#demo'});
});

4. All the default settings.

$(function () {
bricklr({
target : 'body', // Will cover the entire viewport regardless of body dimensions.
brickW : 100,
brickH : 100,
opacity : 1,
behavior : flip.rand,
delay : 200,
effect : effects.fade, // fade, slide or none
effectDuration : 400,
brickBg : 'random', // Can be a hex color string or any of the color.variants members.
repeat : false, // When all bricks are flipped, we can start over.
debugElem : '#bricklr-debug',
onBricksCreated : false // Callback for when all bricks have been created (but not yet displayed).
});
});

---

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