jQuery Plugin To Create Gradient Html Elements - rainbow.js

File Size: 330 KB
Views Total: 1850
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Gradient Html Elements - rainbow.js

rainbow.js is a lightweight jQuery plugin which allows you to apply CSS3 radial gradient effects to any Html elements such as headers, text, images and DIVs.

See Also:

Basic Usage:

1. Download jQuery rainbow.js script and link it to your documents, after the jQuery inclusion.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/rainbow.min.js"></script>

2. Create an DIV element with data-OPTIONS attributes to generate a customizable gradient layer.

<div 
class="rainbow" 
data-type="radial" 
data-degrees="45" 
data-color="ea6153-c0392b" 
data-opacity="1" 
></div>

3. All the options.

  • data-type="radial": radila or linear
  • data-degrees="45": The  data-degreesattribute will only work with the linear attribute, it will indicate to rainbow.js by how many degrees you want to rotate your gradient.
  • data-color="ea6153-c0392b": With the  data-colorattribute, you will specify which colors you want to use for your gradients.
  • data-opacity="1": The  data-opacityattribute, will determine the opacity ammount of your gradient, it goes from 0to 1and accept values like .50.

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