JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/dragdealer/0.9.8/dragdealer.min.js"></script>
<ul>
	<li><a href="#" data-x="0" data-y="0">1</a></li>
	<li><a href="#" data-x="0.5" data-y="0">2</a></li>
	<li><a href="#" data-x="1" data-y="0">3</a></li>
	<li><a href="#" data-x="0" data-y="0.5">4</a></li>
	<li><a href="#" data-x="0.5" data-y="0.5">5</a></li>
	<li><a href="#" data-x="1" data-y="0.5">6</a></li>
	<li><a href="#" data-x="0" data-y="1">7</a></li>
	<li><a href="#" data-x="0.5" data-y="1">8</a></li>
	<li><a href="#" data-x="1" data-y="1">9</a></li>
</ul>

<main id="canvas-mask">
	<div class="handle">
		<section>1</section>
		<section>2</section>
		<section>3</section>
		<section>4</section>
		<section>5</section>
		<section>6</section>
		<section>7</section>
		<section>8</section>
		<section>9</section>
	</div>
</main>

SCSS

body {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC');
}

ul {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	
	li {
		float: left;
		margin: 0 5px;
	}
	
	a {
		background: #fff;
		color: #444;
		border-radius: 20px;
		width: 20px;
		height: 20px;
		display: inline-block;
		text-decoration: none;
		text-align: center;
	}
}

main {
	width: 100vw;
	height: 100vh;
	transition: transform 0.2s;
	overflow: hidden;
	position: relative;
	
	.handle {
		width: 300vw;
		height: 300vh;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	section {
		width: 100vw;
		height: 100vh;
		color: #fff;
		float: left;
		line-height: 100vh;
		text-align: center;
		font-size: 100px;
	}
	
	section:nth-child(odd) {
		background: #ccc;
		color: #eee;
	}
	
	section:nth-child(even) {
		background: #eee;
		color: #ccc;
	}
}

body.zoomed-out main {
	 transform: scale(0.3);
}

JavaScript

// http://skidding.github.io/dragdealer/
// http://tympanus.net/Development/DraggableDualViewSlideshow/

var canvasMask = new Dragdealer('canvas-mask', {
  vertical: true,
  horizontal: true,
  speed: 0.2,
  loose: true,
  requestAnimationFrame: true
});

$('body').on('click', 'ul li a', function(e) {
  e.preventDefault();
  var anchor = $(e.currentTarget);
  canvasMask.setValue(anchor.data('x'), anchor.data('y'));
});