JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="bg-logo shake-vertical top"></div>
<div class="bg-logo shake-vertical bottom"></div>

SCSS

* {
  cursor: crosshair;
}

body, html {
  width: 100%;
  height: 100%;
  position: relative;
}

.bg-logo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100px;
  &.bottom {
    background-image: url('https://i.stack.imgur.com/1RsOy.png');
    z-index: -2;
  }
  &.top {
    background-color: #e1e1e1;
    background-image: url('https://i.stack.imgur.com/M7CQ1.png');
    z-index: -1;
    top: -20px;
    bottom: -20px;
  }
}

.shake-vertical {
	-webkit-animation: shake-vertical 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-vertical 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-2-18 14:1:35
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-vertical
 * ----------------------------------------
 */
@-webkit-keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}
@keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
   ...

JavaScript

$(document).on('mousemove', function( e ) {
	$(".bg-logo.top").css({ clip: 'rect( 0px, '+ e.pageX +'px, '+ ($(window).height()+40) +'px, 0px)' });
});