This time I will share jQuery Plugin and tutorial about Animating CSS Gradients With jQuery – gradientFade, hope it will help you in programming stack.
gradientFade is a jQuery plugin (script) to create a gradient transition effect by fading through a group of DIV containers with CSS gradients.
Based on the CSS transition and opacity properties.
See Also:
How to use it:
1. Add gradient backgrounds to the DIV elements as follows:
2 |
<div style="background: linear-gradient(to right, #ee9ca7, #ffdde1)" class="gradient active"></div> |
3 |
<div style="background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)" class="gradient"></div> |
4 |
<div style="background: linear-gradient(to right, #ee9ca7, #8a8a8a)" class="gradient"></div> |
5 |
<div style="background: linear-gradient(to right, #34f351, #ffdde1)" class="gradient"></div> |
6 |
<div style="background: linear-gradient(to right, #007991, #78ffd6);" class="gradient"></div> |
2. Make the gradient elements fullscreen.
8 |
transition: opacity 1s; |
3. Set the opacity of the first element.
1 |
.gradient:first-of-type { |
4. Import the latest version of jQuery JavaScript library into the html file.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
5. Download and load the JavaScript file gradientFade.js after jQuery.
1 |
<script src="gradientFade.js"></script> |
6. Initialize the plugin and set the transiton delay in milliseconds. Done.
This awesome jQuery plugin is developed by HarryVerhoef. For more Advanced Usages, please check the demo page or visit the official website.
