JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

//задаем анимацию при появлении на экране
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="slideTop">
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
</div> 
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="slideTop">
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
    <li class="slide-top"></li>
</div> 
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div class="box">kjlnbfklmbvrfklmbfklmbv</div>
</div>
<div data-liffect="zoomIn">
    <div...

CSS

.box{
    background-color:green;
    height:100px;
    margin:25px;
    opacity: 0;
    position: relative;
    -webkit-animation: zoomIn 800ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: zoomIn 800ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: zoomIn 800ms ease both;
    -o-animation-play-state: paused;
    animation: zoomIn 800ms ease both;
    animation-play-state: paused;
}

div[data-liffect="zoomIn"].play .box {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(1.8); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

@-moz-keyframes zoomIn {
    0% { opacity: 0; -moz-transform: scale(1.8); }
    100% { opacity: 1; -moz-transform: scale(1); }
}

@-o-keyframes zoomIn {
    0% { opacity: 0; -o-transform: scale(1.8); }
    100% { opacity: 1; -o-transform: scale(1); }
}

@keyframes zoomIn {
    0% { opacity: 0; transform: scale(1.8); }
    100% { opacity: 1; transform: scale(1); }
}



.slide-top {
    background-color: #008000;
    display: inline-block;
    height: 70px;
    list-style: none outside none;
    width: 70px;
    
    
   opacity: 0;
    position: relative;
    -webkit-animation: slideTop 800ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: slideTop 800ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: slideTop 800ms ease both;
    -o-animation-play-state: paused;
    animation: slideTop 800ms ease both;
    animation-play-state: paused;
}

.play-top .slide-top{
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes slideTop {
    0% { opacity: 0; top: -30px; }
    100% { opacity: 1; top: 0; }
}

@-moz-keyframes slideTop {
    0% { opacity:...

JavaScript

function inWindow(s) {
    var scrollTop = $(window) .scrollTop();
    var windowHeight = $(window) .height();
    var currentEls = $(s);
    var result = [
    ];
    currentEls.each(function () {
        var el = $(this);
        var offset = el.offset();
        if (scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight))
        result.push(this);
    });
    return $(result);
}
function skrollthiswindow() {
    var boxesInWindow = inWindow('.box');
    boxesInWindow.css('background', 'red');
    boxesInWindow.parent() .addClass('play');
    boxesInWindow.css({
        '-webkit-animation-delay': 1000,
        '-moz-animation-delay': 1000,
        '-o-animation-delay': 1000,
        'animation-delay': 1000
    });
}
function skrollTopGroup() {
var tops = inWindow(".slide-top");
tops.each(function (i) {
     $(this).attr("style", "-webkit-animation-delay:" + i * 200 + "ms;"
                + "-moz-animation-delay:" + i * 200 + "ms;"
                + "-o-animation-delay:" + i * 200 + "ms;"
                + "animation-delay:" + i * 200 + "ms;");
        if (i == tops.size() -1) {
            tops.parent().addClass("play-top")
        }
    });
}
$(document) .ready(function () {
    skrollthiswindow();
    skrollTopGroup();
});
$(window) .scroll(function () {
    skrollthiswindow();
    skrollTopGroup();
});