delay showing

by Yunus Gaziev

HTML

<div class="i-block" data-color="c62828">
    <div class="i-block__contant">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, aperiam, ullam.
    </div>
</div>
<div class="i-block" data-color="2E7D32">
    <div class="i-block__contant">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, aliquam, molestias.
    </div>
</div>
<div class="i-block" data-color="1565C0">
    <div class="i-block__contant">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, pariatur hic.
    </div>
</div>
<div class="i-block" data-color="EF6C00">
    <div class="i-block__contant">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, voluptatibus amet.
    </div>
</div>

SCSS

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    font-family: Arial, sans-serif;
}


body {
    padding: 20px;
    box-sizing: border-box;
}

.i-block {
    background-color: #263238;
    color: #FAFAFA;
    opacity: 0;

    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;

    position: relative;
    top: -40px;

    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;

    box-sizing: border-box;

    transition: opacity .5s ease-in-out, top .5s ease-in-out;
    will-change: top, opacity;
}

.i-block--red {
    background-color: #c62828;
}

.i-block--green {
    background-color: #2E7D32;
}

.i-block--blue {
    background-color: #1565C0;
}

.i-block--orange {
    background-color: #EF6C00;
}

JavaScript

$(function() {

    var water_blocks = $('.i-block');

    $.each(water_blocks, function(index, element) {

        setTimeout(function() {

            $(element).css({
                opacity: 1,
                top: 0,
                backgroundColor : '#' + $(element).data('color')
            });

        }, index * 200);

    });

});