Animated Pixel Background In JavaScript – Pixel Banner

Preview:

Description:

A JavaScript library to generate a canvas-based pixel banner that could be used as an animated background in any container.

How to use it:

1. Import the pixel-banner.js JavaScript library into the document.

<script src="pixel-banner.js"></script>

2. Attach the PixelBanner to your container element and done.

new PixelBanner({
    target: "#pixel_banner_div"
});

3. Config the pixel background with the following 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"}
    }
});