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($) {
  $.extend($.fn, {
    isInViewport: function(options) {
      if (!this.length) {
        if (options && options.debug && window.console) {
          console.warn("Nothing selected, return nothing.");
        }
        return;
      }
      var isInViewportApp = $.data(this[0], "isInViewport");
      if (isInViewportApp) {
        return isInViewportApp;
      }
      options = options || {};
      isInViewportApp = new isInViewport(options, this[0]);
      $.data(this[0], "isInViewport", isInViewportApp);
      return isInViewportApp;
    }
  });


  var isInViewport = function(options, $el) {
    this.namespace = "plgIsInViewport-" + (+new Date());
    this.settings = $.extend(true, {}, isInViewport.defaults, options);

    this.init($el);
  };

  $.extend(isInViewport, {
    defaults: {
      defClass: 'animated'
    },

    prototype: {
      // init: function() {
      init: function($elem) {
        this.delayScroll($elem);
        this.addHandlear();
      },


      delayScroll: function($elem) {
        this.debounce(function() {
          changeClass($elem);
          //}, 250);
        }.bind(this), 250);
      },


      changeClass: function(elem) {
        elem.each(function(index, el) {
          if (this.checkInViewport(el)) {
            // $(el).addClass(this.settings.defClass);            
            $(el).addClass('aaa');
          } else {
            // $(el).addClass(this.settings.defClass);            
            $(el).removeClass('aaa');
          }
        }.bind(this));
      },

      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;
      },

      debounce: function(func, wait,...