Color Background Animation

Color Background Animation

Single color background looks traditional, and gradient background looks little outdated.

then you can set your sections that change its background color in some time interval

it makes fun and amazing design experience to your code.

follow the code below and make color changes as per your needs, its a very easy to customize for developer who can edit code little bit

Very useful for sub pages title or inner sections.

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col height-500px w-100 page-title-colorful"
                data-backgroundColor="#19b5ff,#ff6b5c,#8ecc39,#4dd0e2,#4d74ff,#f7ca17,#202020,#00f2cb,#ff9700,#00bcd5,#ea1e63,#673bb7">
                <div class="d-inline-block height-50px width-50px" style="background-color: #19b5ff"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #ff6b5c"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #8ecc39"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #4dd0e2"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #4d74ff"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #f7ca17"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #202020"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #00f2cb"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #ff9700"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #00bcd5"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #ea1e63"></div>
                <div class="d-inline-block height-50px width-50px" style="background-color: #673bb7"></div>
            </div>
        </div>
    </div>
</section>
.d-inline-block { display: inline-block; }
.height-500px { height: 500px; }
.page-title-colorful { transition-duration: 5s; }
.height-50px { height: 50px; }
.width-50px { width: 50px; }
if ($('.page-title-colorful').length > 0) {
    var colorList = $('.page-title-colorful').attr('data-backgroundColor') || '#2e94eb', colorArray = colorList.split(","), colorArray = colorList.split(","), colorCount = colorArray.length, i = 1, colorCode;
    $('.page-title-colorful').css({ 'background-color': colorArray[0] });
    setInterval(function () {
        colorCode = colorArray[i];
        $('.page-title-colorful').css({ 'background-color': colorCode });
        i++;
        if (i === colorCount) {
            i = 0;
        }
    }, 5000);
}

Leave a Reply