1. Introduction
In this article we will show the lightweight jquery plugin that allows you to set a fancy animated gradient on your website.
2. Links
3. How to install
Add background gratient class to selected elements on your website.
<div class="xyz">
<div style="background: linear-gradient(to right, #ee9ca7, #ffdde1)" class="gradient active"></div>
<div style="background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)" class="gradient"></div>
<div style="background: linear-gradient(to right, #ee9ca7, #8a8a8a)" class="gradient"></div>
<div style="background: linear-gradient(to right, #34f351, #ffdde1)" class="gradient"></div>
<div style="background: linear-gradient(to right, #007991, #78ffd6);" class="gradient"></div>
</div>
Put gradientFade.js
file before the end of the body tags.
<script src="/path/to/gradientFade.js" charset="utf-8"></script>
or you can also append code into your existing javascript project. It just on simple function:
function gradientFade(delay) {
window.setInterval(function() {
var gradientNo = $(".gradient").index($(".gradient.active")) + 1;
gradientNo = (gradientNo == $(".gradient").length) ? (1) : (gradientNo + 1);
$(".gradient.active").css("opacity",0);
$(".gradient.active").removeClass("active");
$(".gradient:nth-of-type(" + gradientNo + ")").addClass("active");
$(".gradient.active").css("opacity",1);
},delay);
return true;
}
Add link with css stylesheets in the head section of your website.
<link rel="stylesheet" href="/path/to/gradientFade.css">
Then simply run gradientFade
function from the script.
gradientFade(<Transition time in ms>)
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}