jQuery Plugin For CSS Gradient Transitions - Gradientify
File Size: | 7.97 KB |
---|---|
Views Total: | 2622 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Gradientify is a jQuery plugin that uses CSS3 Linear Gradients to create a radial gradient background with transition.
See also:
- Create An Animated Radial Gradient Background With jQuery and CSS3
- Creating Animated Background with Random Gradient Transitions using jQuery
- jQuery Plugin For Multi-layered Gradient Background with CSS3 - Shards
- Gradient Color Background Plugin For jQuery - Add Shine
How to use it:
1. Load the latest version of jQuery JavaScript library and the jQuery gradientify plugin in the document.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="jquery.gradientify.js"></script>
2. Call the function on the target element and specify the RGB colors for the CSS3 gradients.
$("body").gradientify({ gradients: [ { start: [237,85,101], stop: [218,68,83] }, { start: [70,207,176], stop: [52,188,157] }, { start: [52,152,219], stop: [41,128,185] } ] });
3. More config options.
$("body").gradientify({ // Gradient angle angle: '0deg', // Frames per second fps: 60, // Transition time transition_time: 8 // Gradients gradients: [ { start: [237,85,101], stop: [218,68,83] }, { start: [70,207,176], stop: [52,188,157] }, { start: [52,152,219], stop: [41,128,185] } ] });
This awesome jQuery plugin is developed by codefog. For more Advanced Usages, please check the demo page or visit the official website.