This time I will share jQuery Plugin and tutorial about jQuery Plugin To Animate Background Colors – Color Cycle, hope it will help you in programming stack.
Color Cycle is a jQuery plugin used to smoothly and continuously cycle through an array of predefined background colors of a specific container. Great for creating a nice color transition effect for any element on the webpage.
How to use it:
1. Load the needed jQuery and jQuery UI JavaScript libraries in the webpage.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> |
2. Download the color cycle plugin and load the JavaScript file jquery.colorcycle.min.js after jQuery library.
1 |
<script src="jquery.colorcycle.min.js"></script> |
3. Attach the function colorCycle() to the element you want to animate the background colors.
1 |
$('SELECTOR').colorCycle(); |
4. Change the default colors and animation options.
01 |
$('SELECTOR').colorCycle({ |
04 |
colors: ['#ff0000', '#ff6600', '#ff9900', '#ffcc00', '#ffff00', '#ccff00', '#99ff00', '#66ff00', '#00ff66', '#00ff99', '#00ffcc', '#00ffff', '#00ccff', '#0099ff', '#0066ff', '#0033ff', '#0000ff', '#3300ff', '#6600ff', '#9900ff', '#cc00ff', '#ff00ff', '#ff00cc', '#ff0099', '#ff0066'], |
07 |
animationStartRange: 1000, |
08 |
animationEndRange: 2000, |
This awesome jQuery plugin is developed by learn-co-curriculum. For more Advanced Usages, please check the demo page or visit the official website.
