jQuery Plugin For Gradient Background With Transitions - Backgroundor

Backgroundor is an easy to use jQuery plugin that generates gradient backgrounds from an array of predefined colors, with linear or opacity transition effects based on CSS3 transitions and transforms.

See Also:

• Online CSS Gradient Generator

Basic usage:

1. Place the latest version of jQuery library (slim build) and the jQuery backgroundor plugin's script at the end of the html document.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
script src="js/backgroundor.jquery.js"></script>

2. Apply a linear gradient animation to the #container's background.

$('#container').backgroundor('lgradient',{
  // options here
});

3. Apply an opacity animation to the #container's background.

$('#container').backgroundor('opacity',{
  // options here
});

4. Default options to customize the background gradient effect.

// opacity level
opacityval    : 0; 

// interval time in ms
intervaltime  : 100; 

// percentage values for the linear gradient colors
values        : [0,51,75]; 

// an array of hex color values
colors        : ['#499bea','#207ce5','#1679e3']; 

// default color for opacity animation
color         : '#000000'; 

// animation type
animspeed     : 'linear'; 

// animation degree
animdegree    : '90deg'; 

---

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