JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<img id='poster_blur' style='position:fixed;top:0;right:0;left:0;bottom:0;' class='image_blur' src='https://img2-placeit-net.s3-accelerate.amazonaws.com/uploads/stage/stage_image/21198/large_thumb_placeit__88_.jpg'>
<ul class="title">
  <li>A</li>
</ul>


<div id="background">
    <img id='poster'src='https://img2-placeit-net.s3-accelerate.amazonaws.com/uploads/stage/stage_image/21198/large_thumb_placeit__88_.jpg' class='stretch' />
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}
  * {
      touch-action: manipulation;
  }
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 5px;
  padding:5px;
  list-style:none;
}

li {
  background-color: rgba(255,255,255,0.1);
  border-radius: 3px;
  padding: 10px;
  font-size: 14px;
}

.title {
  z-index: 1;
  color: rgba(255,255,255,0.8);
  text-align:center;
}

.next_skip_ui {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.next_skip_ui > li {
    background: none;
}

.background {
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.stretch {
    width: 80%;
    height: 80%;
        padding:10%;
}
.image_blur {
    -webkit-filter: blur(100px);
    -moz-filter: blur(100px);
    -o-filter: blur(100px);
    -ms-filter: blur(100px);
    filter: blur(100px);
    z-index: -1;
     min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

var direction = '',
    path = '',
    oldx = 0,
    oldy = 0,
    block = false;    
$(document).bind('touchmove mousemove', function (e) {
  var introunded = 50;
if(e.originalEvent.touches == undefined){
	introunded = 1;
}else{
  introunded = 50;
}
	if(oldx == 0 || oldy == 0)
  {
  	oldy = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : Math.round(e.pageY / introunded) * introunded;
		oldx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : Math.round(e.pageX / introunded) * introunded;
  }
				var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;
   			var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
     
       currentY =  Math.round(currentY / introunded) * introunded;
       currentX =  Math.round(currentX / introunded) * introunded;
        
        direction = d(oldx,currentX,oldy,currentY);

        if(direction == undefined)
        {
        	return;
        }
  
        if(direction == 'top' || direction == 'right')
        {
        	path = '/up';
        }
        if(direction == 'bottom' || direction == 'left')
        {
        	path = '/down';
        }
      console.log(direction);
          
          oldy = e.originalEvent.touches ? 0 : Math.round( e.pageY / introunded) * introunded;
   				oldx = e.originalEvent.touches ? 0 : Math.round( e.pageX / introunded) * introunded;
          if(e.originalEvent.touches == undefined){
						oldy = Math.round( e.pageY / introunded) * introunded;
            oldx = Math.round( e.pageX / introunded) * introunded;
					}

        if(!block){
        block = true;
       const req = new XMLHttpRequest();
      	req.open('GET', location.protocol + '//' + location.host + path, false); 
      	req.send(null);
        if (req.status === 200) {
    block = false;
} else {
    block = false;
}
}

});
function d(sx,ax,sy,ay)
{
	var s = '';
  if(sx - ax > 50 || sx - ax < -50)
  {
  if (ax < sx && sx != 0)
  {
		s = 'left';
  ...