<img id="jar" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/skullB.jpg" alt="It seemed to be yet another scary cookie jar, the kind you get for Halloween. But then it started to show me its thousand faces...">
html {
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
}
body {
	margin: 0;
	padding: 0;
	background: #000;
	position: absolute;
	width: 100%;
	height: 100%;
}
img {
	position:absolute;
	top: 0;
	height: 100%;
	image-rendering: pixelated;
}
#jar {
	position: absolute;
	width: 70%;
	left: 15%;
	height: 100%;
}
! function ()
{
	"use strict";
	
	var sjar  = [],
		jar     = document.getElementById("jar"),
		nsli    = 128,
		width   = 0,
		height  = 0,
		hsli    = 0,
		xm      = 0,
		ym      = 0,
		xb      = 0,
		yb      = 0;

	function resize()
	{
		jar.style.visibility = "hidden";
		width  = document.body.offsetWidth;
		height  = document.body.offsetHeight;
		var w   = width - Math.round(width / 3);
		hsli   = Math.round(height / nsli);
		for (var i = 0, j = 0; i < nsli; i++)
		{
			sjar[i].style.left  = Math.round((width - w) / 2) + "px";
			sjar[i].style.width = Math.round(w) + "px";
			sjar[i].style.height = Math.round(height) + "px";
			sjar[i].style.clip  = "rect("+ (j) + "px, auto," + (j + hsli) + "px, 0px)";
			j += hsli + 1;
		}
	}
	onresize = resize;
	document.onmousedown = function (e) { e.preventDefault(); };
	document.ondragstart = function (e) { e.preventDefault(); };

	for (var i = 0; i < nsli; i++)
	{
		sjar[i] = document.createElement("img");
		sjar[i].src = jar.src;
		document.body.appendChild(sjar[i]);
	}
	
	resize();
	
	document.onmousemove = function(e)
	{
		e.preventDefault();
		xm = e.clientX;
		ym = e.clientY;
		var x  = Math.round(ym / (hsli + 1));
		if (x != xb) move(x);
	}
	document.ontouchmove = function(e)
	{
		e.preventDefault();
		xm = e.touches[0].clientX;
		ym = e.touches[0].clientY;
		var x  = Math.round(ym / (hsli + 1));
		if (x != xb) move(x);
	}
	
	function move (x)
	{
		var y = Math.abs(xm - width / 2),
			yp = y,
			sy = (yb - y) / Math.abs(x - xb);
		while (x != xb)
		{
			xb += xb > x ? -1 : 1;
			var j = sjar[xb], w = Math.abs(yp);
			j.style.left  = Math.round(width / 2 - w) + "px";
			j.style.width = Math.round(2 * w) + "px";
			yp -= sy;
		}
		yb = y;
	}
}();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.