JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<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 circle-item-19">
    <div class="circle-inner">
      19
    </div>
  </div>
  <div...

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 {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}

.animated {
  transform: scale(1);
}

.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 {
 ...

JavaScript

(function($) {

  $.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 changeClass = function(elem) {
    elem.each(function() {
      if ($(this).checkInViewport()) {
        $(this).addClass('animated');
      } else {
        $(this).removeClass('animated');
      }
    });
  }

  function debounce(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);
      }
    };
  }





  $.fn.isInViewport = function() {

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

    /*var myEfficientFn = debounce(function() {
      	changeClass($testBlock);
    	}, 250);*/

    /*var myEfficientFn = debounce(function() {
      changeClass($this);
    }, 250);

    myEfficientFn();*/







    return this;
  };
}(jQuery));

// EXAMPLE
$('.circle-item').isInViewport();
$(window).on('resize scroll', function() {
  $('.circle-item').isInViewport();
});