JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circles-block">
  <div class="circle-item circle-item-1">
    <div class="circle-inner">
      01
    </div>
  </div>
  <div class="circle-item circle-item-2">
    <div class="circle-inner">
      02
    </div>
  </div>
  <div class="circle-item circle-item-3">
    <div class="circle-inner">
      03
    </div>
  </div>
  <div class="circle-item circle-item-4">
    <div class="circle-inner">
      04
    </div>
  </div>
  <div class="circle-item circle-item-5">
    <div class="circle-inner">
      05
    </div>
  </div>
  <div class="circle-item circle-item-6">
    <div class="circle-inner">
      06
    </div>
  </div>
  <div class="circle-item circle-item-7">
    <div class="circle-inner">
      07
    </div>
  </div>
  <div class="circle-item circle-item-8">
    <div class="circle-inner">
      08
    </div>
  </div>
  <div class="circle-item circle-item-9">
    <div class="circle-inner">
      09
    </div>
  </div>
  <div class="circle-item circle-item-10">
    <div class="circle-inner">
      10
    </div>
  </div>
  <div class="circle-item circle-item-11">
    <div class="circle-inner">
      11
    </div>
  </div>
  <div class="circle-item circle-item-12">
    <div class="circle-inner">
      12
    </div>
  </div>
  <div class="circle-item circle-item-13">
    <div class="circle-inner">
      13
    </div>
  </div>
  <div class="circle-item circle-item-14">
    <div class="circle-inner">
      14
    </div>
  </div>
  <div class="circle-item circle-item-15">
    <div class="circle-inner">
      15
    </div>
  </div>
  <div class="circle-item circle-item-16">
    <div class="circle-inner">
      16
    </div>
  </div>
  <div class="circle-item circle-item-17">
    <div class="circle-inner">
      17
    </div>
  </div>
  <div class="circle-item circle-item-18">
    <div class="circle-inner">
      18
    </div>
  </div>
  <div class="circle-item...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.circles-block {
  padding: 50px 0;
}

.circle-item {
  width: 31.333333%;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  margin-right: 1%;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  float: left;
  position: relative;
  font-size: 25px;
  transition: transform 600ms cubic-bezier(0.8, 0, 0, 0.8);
  transform: scale(0.3);
}

.circle-item::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}

.circle-item-1 {
  background-color: #ed194b;
}

.circle-item-2 {
  background-color: #f37c78;
  transition-delay: 0.1s;
}

.circle-item-3 {
  background-color: #f8a19a;
  transition-delay: 0.1s;
}

.circle-item-4 {
  background-color: #f7921e;
}

.circle-item-5 {
  background-color: #faac57;
  transition-delay: 0.1s;
}

.circle-item-6 {
  background-color: #fdc78b;
  transition-delay: 0.2s;
}

.circle-item-7 {
  background-color: #ffd401;
}

.circle-item-8 {
  background-color: #ffe500;
  transition-delay: 0.1s;
}

.circle-item-9 {
  background-color: #fef46e;
  transition-delay: 0.2s;
}

.circle-item-10 {
  background-color: #a6ce3a;
}

.circle-item-11 {
  background-color: #bed82f;
  transition-delay: 0.1s;
}

.circle-item-12 {
  background-color: #d6e167;
  transition-delay: 0.2s;
}

.circle-item-13 {
  background-color: #00bbbd;
}

.circle-item-14 {
  background-color: #72cbcf;
  transition-delay: 0.1s;
}

.circle-item-15 {
  background-color: #9bd8d9;
  transition-delay: 0.2s;
}

.circle-item-16 {
  background-color: #016bb5;
}

.circle-item-17 {
  background-color: #628ac8;
  transition-delay: 0.1s;
}

.circle-item-18 {
  background-color: #8aa4d5;
  transition-delay: 0.2s;
}

.circle-item-19 {
  background-color: #af72ae;
}

.circle-item-20 {
  background-color: #c196c4;
  transition-delay: 0.1s;
}

.circle-item-21 {
  background-color: #d0b1d3;
  transition-delay: 0.2s;
}

.circle-item-22 {
  background-color: #ba3599;
}

.circle-item-23...

JavaScript

(function($) {

  $.fn.isInViewport = function(options) {

    options = $.extend({
      defClass: 'animated'
    }, options);

    /*$.fn.checkInViewport = function() {
        var elementTop = $(this).offset().top;
        var elementBottom = elementTop + $(this).outerHeight();

        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();

        return elementBottom > viewportTop && elementTop < viewportBottom;
    }*/

    var checkInViewport = function(elem) {
      var $elem = $(elem);
      var $window = $(window);
      var elementTop = $elem.offset().top;
      var elementBottom = elementTop + $elem.outerHeight();

      var viewportTop = $window.scrollTop();
      var viewportBottom = viewportTop + $window.height();

      return elementBottom > viewportTop && elementTop < viewportBottom;
    }

    //var changeClass = function(elem) {
    var changeClass = function(elem) {
      var $this
      elem.each(function() {
        $this = $(this);
        /*if ($(this).checkInViewport()) {*/
        if (checkInViewport($this)) {
          $(this).addClass(options.defClass);
        } else {
          $(this).removeClass(options.defClass);
        }
      });
    }

    // function debounce(func, wait, immediate) {
    var debounce = function(func, wait, immediate) {
      var timeout;
      return function() {
        var context = this;
        var args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) {
            func.apply(context, args);
          }
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) {
          func.apply(context, args);
        }
      };
    }

    /* start run */
    var $elem = $(this);
    var delayScroll = debounce(function() {
      changeClass($elem);
    }, 250);

    delayScroll();

    $(window).on('resize scroll', function()...