JSFiddle - React, Tailwind, and code Playground

by Pietro Spagnolo

HTML

<div class="title-box">
    <div class="title">Title</div>
</div>

<div class="gallery">
    <div class="gallery-image"></div>
    <div class="gallery-image"></div> 
    <div class="gallery-image"></div>
    <div class="gallery-image"></div> 
</div>

CSS

.title-box
{
    background-color: #fff;
    width: 100%;
    height: 600px;
}

.title
{
    font-family: sans-serif;
    text-align: center;
    font-size: 50px;
    padding-top: 250px;
}

.gallery-image
{
    background-color: #fed;
    width: 300px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

JavaScript

$(document).ready(function(){
$('.myclass').bind('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
   $("h2").removeClass('myclass');
      alert('found h2!')
  } else {
    // element has gone out of viewport
     $("h2").addClass('myclass');
  }
});
});