JSFiddle - React, Tailwind, and code Playground

by binpinbin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">LOGO </div>
<p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> andffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff here<br /> and here<br /> and here<br /> and here</p>
<div id="line">

<div><img id="repel" src="https://ik.imagekit.io/1eny1266smn/png_square_shape_square_shape_clipart_-_480x480_44yNEBg4y.png?ik-sdk-version=javascript-1.4.3&updatedAt=1645550344501" />
</div>
</div>

CSS

#logo {
  width: 80px;
  background-color: #53befd;
  padding: 20px;
}
#repel:hover {
    content: url('https://ik.imagekit.io/1eny1266smn/png_square_shape_square_shape_clipart_-_480x480_vCXvNMU8Y.png?ik-sdk-version=javascript-1.4.3&updatedAt=1644569140482');
}

#line {
/*  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAMCAYAAABBV8wuAAAAFklEQVR42mNgoB74OEXzPzY8sBLUAwB6PmBV1D+CIAAAAABJRU5ErkJggg==);*/

/*background: linear-gradient(to bottom, #8e593c 100%, transparent 100%) 50% 0/3px 12px repeat-y;*/

background: linear-gradient(to left,  #0F0C08 100%, transparent 200%) 100% 0/2px 50px repeat-y;

  position: fixed;
  top: 0px;
  right: 10px;
  z-index: 20;
  width: 3px;
}

#repel {
  background-color: none; 
  height: 105px;
  width: 40px;
  position: absolute;
  bottom: -50px;
  left: -26px;
  line-height: 35px;
  cursor: pointer;
}
.repel {
  -webkit-animation: repel 1s;
  animation: repel 1s;
}
.line {
  -webkit-animation: line 1s;
  animation: line 1s;
}

.climb {
  -webkit-animation: climb 1s;
  animation: climb 1s;
}

@-webkit-keyframes climb {
  0% {
    -webkit-transform: translatey(0px);
  }

  50% {
    -webkit-transform: translatey(-55px);
  }

  100% {
    -webkit-transform: translatey(0px);
  }
}

@keyframes climb {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-25px);
  }

  100% {
    transform: translatey(0px);
  }
}

@-webkit-keyframes repel {
  0% {
    -webkit-transform-origin: top right;
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform-origin: top right;
    -webkit-transform: rotate(2.5deg)skewy(-5deg);
  }

  100% {
    -webkit-transform-origin: top right;
    -webkit-transform: rotate(0deg);
  }
}

@keyframes repel {
  0% {
    transform-origin: top right;
    transform: rotate(0deg);
  }

  50% {
    transform-origin: top right;
    transform: rotate(2.5deg)skewy(-5deg);
  }

  100% {
    transform-origin: top right;
    transform: rotate(0deg);
 ...

JavaScript

$(function(){
  var topMargin = 20, bottomMargin = 50;
  var repelHeight = $('#arrow').height();
  var $lineElement = $('#line');
  
  $lineElement.height
  (topMargin);
  $(window).scroll(function() {
    var winHeight = $(window).height();
    var actualScrollHeight = $(document).height() - winHeight;
    var lineMaxHeight = winHeight - topMargin - bottomMargin - repelHeight;
    var scrollTop = $(document).scrollTop();
    var lineHeight = scrollTop / actualScrollHeight * lineMaxHeight;
    $lineElement.height(topMargin + lineHeight);
  });
});

$(function() {
  var previousScroll = 0;

  $(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > previousScroll) {
      //down scroll code
      $("#repel").addClass("repel");
      
            $("#line").addClass("repel");
            

      $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
        $('#repel').removeClass('repel');
      });
      
      
      $("#line").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
        $('#line').removeClass('repel');
      });


    } else {
      // upscroll code
      $("#repel").addClass("climb");
      
      $("#line").addClass("climb");
      
      
      $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
        $('#repel').removeClass('climb');
      });
      
      $("#line").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
        $('#line').removeClass('climb');
      });
      
    }
    previousScroll = currentScroll;
  });
}());