JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<div class='portfolio'>
      <h2 class='mainheading'>
        Recent From
        <span class='welcome-heading'>Portfolio</span>
      </h2>
      <hr>
      <div class='portfolio-row'>
        <div class='flip-container portfolio-for-transition jstransitionportfolio' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-1'></div>
            <div class='back back-1'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-2'></div>
            <div class='back back-2'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-3'></div>
            <div class='back back-3'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-4'></div>
            <div class='back back-4'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-5'></div>
            <div class='back back-5'>
              <p>Some Portfolio Website</p>
           ...

CSS

.is-showing-our-services,
.is-showing-jstransitionportfolio{
  color:blue !important;
}
.jstransitionportfolio{
  color:red
}

JavaScript

var setHeight=$(window).height() / 1.2;
var ourServices=$('.our-services-item');
var tranPortfolio=$('.jstransitionportfolio');

$(window).on('scroll',function(){
  var xScroll = $(this).scrollTop();
  ourServices.each(function(){
     var el=$(this);
     if(xScroll>($(this).offset().top-setHeight))
      setTimeout(function(){$(this).addClass('is-showing-our-services')},150);
  });

  $('.jstransitionportfolio').each(function(){
  	 var el=$(this);
     if(xScroll>(el.offset().top-setHeight))
      setTimeout(function(){el.addClass('is-showing-jstransitionportfolio')},150);
  });

});