Pixel-Banner is a Javascript plugin that displays an animated background in a specified dom element using an HTML5 panel.
The background consists of multiple “pixel” blocks that extend over the selected object, move through the fade, then fade into another random location with a different color. The occurrence of these lumps is affected by the possibility that they are denser towards the center and more scattered towards the edges.
A JavaScript library to create a canvas-based pixel logo that can be used as an animated background in any container.
How to make use of it:
1. Import the pixel-banner.js JavaScript library into the doc.
<script src="pixel-banner.js"></script>
2. Attach the PixelBanner to your container component and executed it.
new PixelBanner({
target: "#pixel_banner_div"
});3. Config the pixel background with the next parameters:
new PixelBanner({
target: "#pixel_banner_div",
opacity: 1,
dynamic_options: {
dynamic: true,
update_mode: "single", // or 'all'
update_interval: 250,
fade_interval_duration: 50
},
pixel_options: {
size: {width: 40, height: 40},
color_pallete: ["#1abc9c", "#2ecc71", "#3498db", "#f1c40f", "#e67e22", "#e74c3c"],
probability: {x_axis: "always", y_axis: "always"}, // or 'distance'
border: {width: 1, color: "#000"}
}
});Animated Pixel Background, Pixel-Banner Plugin/Github, css background animation examples, background animation effects
See Demo And Download
Official Website(wahidmagdy): Click Here
This superior jQuery/javascript plugin is developed by wahidmagdy. For extra Advanced usage, please go to the official website.