Socket
Socket
Sign inDemoInstall

backgroundor

Package Overview
Dependencies
1
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

backgroundor


Version published
Maintainers
1
Created

Readme

Source

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.

Keywords

FAQs

Last updated on 23 Aug 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc