Random Animated Lines Background With jQuery - fancy-background

A jQuery plugin for creating fancy page background that animates background lines with variable colors and different animation speeds.

How to use it:

1. Download and place the fancy-background.js script after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="fancy-background.js"></script>

2. Call the function to create an animated lines background for the whole web page.

$('body').fancyBackground();

3. Set an array of colors to the background lines.

$('body').fancyBackground({
  colors : ['#07579c', '#62285a', '#e9b908', '#43af46', '#ee3427', '#00928d']
});

4. Adjust the default animation speed.

$('body').fancyBackground({
  colors : ['#07579c', '#62285a', '#e9b908', '#43af46', '#ee3427', '#00928d']
  duration : 30
});

5. Specify the number of lines you want to use.

$('body').fancyBackground({
  colors : ['#07579c', '#62285a', '#e9b908', '#43af46', '#ee3427', '#00928d']
  duration : 30,
  lines : 10,
});

6. More configuration options.

// width of lines
lineWidth : 10,

// minimal height percentage of lines
minHeightPCT : 40,

// maximum height percentage of lines
maxHeightPCT : 80,

// space between lines
spaceGutter : false,

---

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