Creating Animated Brick Wall Effects using jQuery Bricklr Plugin

File Size: 9.01 KB
Views Total: 2893
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 () {

4. All the default settings.

$(function () {
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.