<div class="wrapper full-size">
  <p id="tap-to-me">TAP SCREEN</p>
  <div class="mask-bg-color full-size"></div>
	<div class="blend-multiply full-size">	
		<div class="animated-bg full-size"></div>
		<div class="blend-screen element-mask full-size">
			<span id="circle" class="circle-follow"></span>
		</div>
	</div>
</div>

@import url('https://fonts.cdnfonts.com/css/arial');

body, html {
	position: relative; 
	overflow: hidden;
	width: 100%;  
	height: 100%; 
	margin: 0;
}

.full-size { 
	position: absolute; 
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%; 
}

.mask-bg-color {
	background-color: #ffffff;
}

.blend-multiply {
	mix-blend-mode: difference;
  
}

.animated-bg {
	background-image: url('https://thumb.tildacdn.com/tild3831-3239-4238-b265-626130323766/-/format/webp/999999.png'); 
	background-position: center;  
	background-size: cover;
}

.blend-screen {
	mix-blend-mode: screen;
  background-color: white;
}

.circle-follow {
	position: absolute;
	overflow: hidden;
    filter: blur(10px);
  box-shadow: 0px 0px 10px black;
	width: 256px; 
	height: 256px;
  border-radius: 160px; 
    top: calc( 50% - 128px); 
  left: calc( 50% - 128px); 
  transition: opacity 0.3s cubic-bezier(0.52, 0.01, 0.16, 1);  
	background-color: black;
  opacity: 0;
  &.moving {
    opacity: 1;
  }
}

/* hack to detect ie11 and above - blend mode not supported */
_:-ms-fullscreen, :root .letter-mask {background-color: transparent; }
_:-ms-fullscreen, :root .animated-bg {opacity: 0.2;}
_:-ms-fullscreen, :root .circle-follow {background-color:#ffffff; opacity: 0.2; }

#tap-to-me {
    color: #e30000;
    font-size: 10px;
    z-index: 99999;
    position: relative;
    text-align: center;
    margin-top: 50vh;
    animation: blinker 1s linear infinite;
    font-family: 'arial ce mt black', sans-serif;
    font-weight: 900;
    font-style: normal;
}

@media (min-width: 800px) {
  #tap-to-me {
    display: none;
  }
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

jQuery(document).ready(function($) {

  let mouseX = 0,
      mouseY = 0,
      xp = 0,
      yp =0,
      circle = $("#circle");

  $(document).bind('touchmove', function(e){
    $('#tap-to-me').hide();
    // if mouse startd moving, add class "moving"
    // it will show the circle with opacity transition 
    circle.addClass('moving');
    // get mouse position minus 160px to center the circle
    mouseX = e.changedTouches[0].pageX - 128;
    mouseY = e.changedTouches[0].pageY - 128; 
  });
  
    $(document).bind('mousemove', function(e){
      $('#tap-to-me').hide();
    // if mouse startd moving, add class "moving"
    // it will show the circle with opacity transition 
    circle.addClass('moving');
    // get mouse position minus 160px to center the circle
    mouseX = e.pageX - 128;
    mouseY = e.pageY - 128; 
  });

  // set the momentum with setInterval
  let loop = setInterval(function(){
     // change number to alter damping, higher is slower
     xp += ((mouseX - xp)/6);
     yp += ((mouseY - yp)/6);
     circle.css({left: xp +'px', top: yp +'px'});
  }, 30);

});