JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>

  </head>

  <body>

    <div class="image">

    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsum vitae, eius a reprehenderit eaque provident, labore repudiandae possimus sapiente doloribus sunt dolorem debitis laboriosam itaque alias at maiores perferendis. >Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Quisquam ipsum vitae, eius a reprehenderit eaque provident, labore repudiandae possimus sapiente doloribus sunt dolorem debitis laboriosam itaque alias at maiores perferendis. >Lorem ipsum dolor sit
      amet, consectetur adipisicing elit. Quisquam ipsum vitae, eius a reprehenderit eaque provident, labore repudiandae possimus sapiente doloribus sunt dolorem debitis laboriosam itaque alias at maiores perferendis.>Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Quisquam ipsum vitae, eius a reprehenderit eaque provident, labore repudiandae possimus sapiente doloribus sunt dolorem debitis laboriosam itaque alias at maiores perferendis.>Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Quisquam ipsum vitae, eius a reprehenderit eaque provident, labore repudiandae possimus sapiente doloribus sunt dolorem debitis laboriosam itaque alias at maiores perferendis. a reprehenderit eaque provident, labore repudiandae possimus sapiente
      doloribus sunt dolorem debitis laboriosam itaque alias at maiores perferendis.>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsum vitae, eius a reprehenderit eaque provident, labore repudiandae possimus sapiente doloribus sunt
      dolorem debitis laboriosam itaque alias at maiores perferendis. a reprehenderit eaque provident, labore repudiandae possimus sapiente doloribus sunt dolorem debitis laboriosam itaque alias at maiores perferendis.>Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Quisquam ipsum vitae, eius a...

CSS

.image {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin-top: 200px;
  top: 20%;
  visibility: hidden;
  background-image: url('https://i.imgur.com/QD8jUBJ.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

JavaScript

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 180) {
      $('.image').css("visibility", 'visible');
      setTimeout(function() {
        $('.image').css("background-image", "url('https://i.imgur.com/puMdXYN.gif')");
      }, 4000);
    } else {
      $('.image').css("visibility", 'visible');
    }
  });
});