JSFiddle - React, Tailwind, and code Playground

by Lena R

HTML

<div id = "block1">
<div class = "kybik2"></div>
</div>
<div id = "block2">
<div class = "kybik"></div>
</div>

CSS

#
  block1 {
      width: 100 % ;
      height: 900 px;
      background: grey;
  }

  #
  block2 {
      width: 100 % ;
      height: 400 px;
      background: lightgrey;
  }

  .kybik {
      animation - duration: 5 s;
      position: relative;
      width: 100 px;
      height: 100 px;
      background: red;
  }

  @
  keyframes move {
      0 % {
          transform: translateX(10 px);
      }
      to {
          transform: translateX(300 px);
      }
  }

  @ - webkit - keyframes move {
      0 % {
          -webkit - transform: translateX(10 px);
      }
      to {
          -webkit - transform: translateX(300 px);
      }
  }


  .kybik2 {
      animation - name: move;
      animation - duration: 5 s; - webkit - animation - name: move; - webkit - animation - duration: 5 s;
      position: relative;
      width: 100 px;
      height: 100 px;
      background: red;
  }

JavaScript

window.onload = function() {
      $(window).scroll(function() {
          console.log('event scroll');
          if (ZagolovokBlock2IsInVision()) {
              ShowText();
          }
      });

      var $block2 = $('#block2');

      function ZagolovokBlock2IsInVision() {
          var windowBottom = $(window).scrollTop() + $(window).height();
          var block2Bottom = $block2.offset().top + $('.kybik').height();
          return windowBottom >= block2Bottom;
      }

      function ShowText() {
          $('.kybik').css('animation-name', 'move');
      }
  }