Animated background gradient in simple jquery

October 23, 2018 No comments JS Library Javascript gradient css jquery

This lightweight jquery plugin allows you to put some fancy animated gradient on your website.

Animated background gradient in jquery

Demo

Download

Documentation

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>)
{{ message }}

{{ 'Comments are closed.' | trans }}