backgroundor

Backgroundor

Backgroundor is a jQuery plugin made to be the Background Animator and that's where the name came from!, this plugin is originally made to ease the pain of the gradient animation.

Examples

To see the plugin in action go to Backgroundor Plugin Page. You'll find some examples and some cool ideas for using this plugin.

Installation

This plugin depends on jQuery only (any version above/equal 1.7 will be ok), so all you have to do is the following:

<script type="text/javascript" src="/js/jQuery191.js"></script>
<script type="text/javascript" src="/js/backgroundor.jquery.js"></script>

Or you can just install it with npm:

npm install backgroundor

Soon there will be a Vanilla JS version of it.

API Reference

You can call Backgroundor without any parameters like this $('#div').backgroundor(); it will run with the default values.

Other than that Backgroundor takes two parameters and it would look like this $('#div').backgroundor(type, options); Where:

• type is a String to define the type of the animation
• options is a JSON Object to specify the colors, intervaltime, animation curve, ..etc.

type The types of animation are:

• 'opacity' for opacity animation, it's the Default.
• 'lgradient' for linear-gradient animation
• 'rgradient' coming soon for radial-gradient animation

options Options is an object with following elements:

// the values here are the default values
options = {
  opacityval    : 0; // int, only 1 or 0 are accepted now (can be boolean too)
  intervaltime  : 100; // int, interval time value
  values        : [0,51,75]; // array of int, default percentage values for the linear gradient colors
  colors        : ['#499bea','#207ce5','#1679e3']; // array of string (hex values), default colors for the linear gradient
  color         : '#000000'; // string (hex value), default color for opacity animation
  animspeed     : 'linear'; // string, default animation curve
  animdegree    : '90deg'; // string, default linear-gradient degree
}

for the gradient values I would suggest one of the websites below to help you

http://www.colorzilla.com/gradient-editor/

http://www.cssmatic.com/gradient-generator

How to Use it

It's easy like every jQuery plugin, just print the following: $('#div').backgroundor(); The default will opacity animation with 100ms speedtime, to change the defaults look at the API Reference for more information.

License

This project is under the MIT license.

Work in progress

In the future I'll add a function for the radial-gradient animation.