JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div id="canvas"></div>
<div id="log"></div>

<div id="pool">
	<img src="http:placehold.it/300x300?text=one">
	<img src="http:placehold.it/300x300?text=two">
	<img src="http:placehold.it/300x300?text=three">
	<img src="http:placehold.it/300x300?text=four">
	<img src="http:placehold.it/300x300?text=five">
</div>

CSS

html, body {
	font-family: sans-serif;
	font-size: 10px;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

#canvas {
	background: #ff9900; /* FF3.6-15 */
background: -webkit-linear-gradient(left, #000000 0%, #000000 9.75%, #ffffff 10.25%, #ffffff 19.75%, #000000 20.25%, #000000 29.75%, #ffffff 30.35%, #ffffff 39.75%, #000000 40.25%, #000000 49.75%, #ffffff 50.25%, #ffffff 59.75%, #000000 60.25%, #000000 69.75%, #ffffff 70.25%, #ffffff 79.75%, #000000 80.25%, #000000 89.75%, #ffffff 90.25%, #ffffff 100%);
background: -moz-linear-gradient(left, #000000 0%, #000000 9.75%, #ffffff 10.25%, #ffffff 19.75%, #000000 20.25%, #000000 29.75%, #ffffff 30.35%, #ffffff 39.75%, #000000 40.25%, #000000 49.75%, #ffffff 50.25%, #ffffff 59.75%, #000000 60.25%, #000000 69.75%, #ffffff 70.25%, #ffffff 79.75%, #000000 80.25%, #000000 89.75%, #ffffff 90.25%, #ffffff 100%);
background: -o-linear-gradient(left, #000000 0%, #000000 9.75%, #ffffff 10.25%, #ffffff 19.75%, #000000 20.25%, #000000 29.75%, #ffffff 30.35%, #ffffff 39.75%, #000000 40.25%, #000000 49.75%, #ffffff 50.25%, #ffffff 59.75%, #000000 60.25%, #000000 69.75%, #ffffff 70.25%, #ffffff 79.75%, #000000 80.25%, #000000 89.75%, #ffffff 90.25%, #ffffff 100%);
background: linear-gradient(to right, #000000 0%, #000000 9.75%, #ffffff 10.25%, #ffffff 19.75%, #000000 20.25%, #000000 29.75%, #ffffff 30.35%, #ffffff 39.75%, #000000 40.25%, #000000 49.75%, #ffffff 50.25%, #ffffff 59.75%, #000000 60.25%, #000000 69.75%, #ffffff 70.25%, #ffffff 79.75%, #000000 80.25%, #000000 89.75%, #ffffff 90.25%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}

#log {
	background: #fff;
	-webkit-box-shadow: 3px 3px 0 rgba(0,0,255,0.5);
	-moz-box-shadow: 3px 3px 0 rgba(0,0,255,0.5);
	box-shadow: 3px 3px 0 rgba(0,0,255,0.5);
	padding: 10px;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,...

JavaScript

var canvas = document.getElementById('canvas'),
	canvasw = document.getElementById('canvas').offsetWidth,
	slices = 10,
	log = document.getElementById('log'),
	startx = 0,
	dist = 0,
	poolcount = 5;

function getSlice ( pos ) {
	var w = canvasw,
		n = slices,
		x = ( w / n );
	return Math.floor( pos / x ) + 1;
}

canvas.addEventListener('touchstart', function(e){
	var touchobj = e.changedTouches[0]; // first touch point (ie: first finger)
	startx = parseInt(touchobj.clientX); // x pos of touch point relative to left edge of browser
	var slice = getSlice( startx );
	log.innerHTML = 'You are touching slice: ' + slice;
	e.preventDefault();
}, false);

canvas.addEventListener('touchmove', function(e){
	var touchobj = e.changedTouches[0]; // first touch point for this event
	var dist = parseInt(touchobj.clientX);
	var slice = getSlice( dist );
	log.innerHTML = 'You are touching slice: ' + slice;
	e.preventDefault();
}, false);

canvas.addEventListener('touchend', function(e){
	var touchobj = e.changedTouches[0]; // reference first touch point for this event
	log.innerHTML = '';
	e.preventDefault();
}, false);