Animated background gradient in simple jquery

January 04, 2020 No comments JS Library Javascript gradient css jquery

1. Introduction

In this article we will show the lightweight jquery plugin that allows you to set a fancy animated gradient on your website.

Animated background gradient in jquery

Demo

Download

Documentation

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

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