Displays an Animated Background In The Specified DOM Element | Pixel-Banner

Pixel-Banner

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

background-image-pixel-banner-effect


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.