mmansion/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#output {
  height: 100px;
  width: 300px;
  background:green;
  font-size: 48px;
}
img {
  position: absolute;
  width: 1000px;
  left: 0;
}
</style>
</head>
<body>
<div id="output">0</div>

<img id="rainbow" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDuiEY4tQ4CY8wDZdiK7cwTZhS2zOfQqIFgaWzebu2LQgwVh4EFA"></img>
<script id="jsbin-javascript">
$( document ).ready(function() {
   window.addEventListener("wheel", myFunction);

  var img = $('#rainbow');
  var pos = 0;
  var dir = 0;
  var spd = 10;

  function myFunction(e) {

    spd = (e.deltaY > 20) ? 20 : e.deltaY;

    spd = Math.abs(spd);

    pos = e.deltaY;

    dir = (pos > 0) ? 1 : -1;

    //console.log(dir);

    scrollImage(dir); // mock socket.io to front-end

  }

// ------------------------------
// FRONT END CODE


  function scrollImage(dir) {

    var pos =  parseInt(img.css('left')) + (dir * spd);

    //if(pos > 300) pos = 300;
    if(pos < 0) pos = 0;

    img.css('left', pos);

    console.log(pos);

  }
});
</script>


<script id="jsbin-source-css" type="text/css">#output {
  height: 100px;
  width: 300px;
  background:green;
  font-size: 48px;
}
img {
  position: absolute;
  width: 1000px;
  left: 0;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">$( document ).ready(function() {
   window.addEventListener("wheel", myFunction);

  var img = $('#rainbow');
  var pos = 0;
  var dir = 0;
  var spd = 10;

  function myFunction(e) {

    spd = (e.deltaY > 20) ? 20 : e.deltaY;

    spd = Math.abs(spd);

    pos = e.deltaY;

    dir = (pos > 0) ? 1 : -1;

    //console.log(dir);

    scrollImage(dir); // mock socket.io to front-end

  }

// ------------------------------
// FRONT END CODE


  function scrollImage(dir) {

    var pos =  parseInt(img.css('left')) + (dir * spd);

    //if(pos > 300) pos = 300;
    if(pos < 0) pos = 0;

    img.css('left', pos);

    console.log(pos);

  }
});

</script></body>
</html>

## jsbin.ralokuh.css
#output {
  height: 100px;
  width: 300px;
  background:green;
  font-size: 48px;
}
img {
  position: absolute;
  width: 1000px;
  left: 0;
}

## jsbin.ralokuh.js
$( document ).ready(function() {
   window.addEventListener("wheel", myFunction);

  var img = $('#rainbow');
  var pos = 0;
  var dir = 0;
  var spd = 10;

  function myFunction(e) {

    spd = (e.deltaY > 20) ? 20 : e.deltaY;

    spd = Math.abs(spd);

    pos = e.deltaY;

    dir = (pos > 0) ? 1 : -1;

    //console.log(dir);

    scrollImage(dir); // mock socket.io to front-end

  }

// ------------------------------
// FRONT END CODE


  function scrollImage(dir) {

    var pos =  parseInt(img.css('left')) + (dir * spd);

    //if(pos > 300) pos = 300;
    if(pos < 0) pos = 0;

    img.css('left', pos);

    console.log(pos);

  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#output {
	height: 100px;
	width: 300px;
	background:green;
	font-size: 48px;
	}
	img {
	position: absolute;
	width: 1000px;
	left: 0;
	}
	</style>
	</head>
	<body>
	<div id="output">0</div>

	<img id="rainbow" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDuiEY4tQ4CY8wDZdiK7cwTZhS2zOfQqIFgaWzebu2LQgwVh4EFA"></img>
	<script id="jsbin-javascript">
	$( document ).ready(function() {
	window.addEventListener("wheel", myFunction);

	var img = $('#rainbow');
	var pos = 0;
	var dir = 0;
	var spd = 10;

	function myFunction(e) {

	spd = (e.deltaY > 20) ? 20 : e.deltaY;

	spd = Math.abs(spd);

	pos = e.deltaY;

	dir = (pos > 0) ? 1 : -1;

	//console.log(dir);

	scrollImage(dir); // mock socket.io to front-end

	}

	// ------------------------------
	// FRONT END CODE


	function scrollImage(dir) {

	var pos = parseInt(img.css('left')) + (dir * spd);

	//if(pos > 300) pos = 300;
	if(pos < 0) pos = 0;

	img.css('left', pos);

	console.log(pos);

	}
	});
	</script>


	<script id="jsbin-source-css" type="text/css">#output {
	height: 100px;
	width: 300px;
	background:green;
	font-size: 48px;
	}
	img {
	position: absolute;
	width: 1000px;
	left: 0;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">$( document ).ready(function() {
	window.addEventListener("wheel", myFunction);

	var img = $('#rainbow');
	var pos = 0;
	var dir = 0;
	var spd = 10;

	function myFunction(e) {

	spd = (e.deltaY > 20) ? 20 : e.deltaY;

	spd = Math.abs(spd);

	pos = e.deltaY;

	dir = (pos > 0) ? 1 : -1;

	//console.log(dir);

	scrollImage(dir); // mock socket.io to front-end

	}

	// ------------------------------
	// FRONT END CODE


	function scrollImage(dir) {

	var pos = parseInt(img.css('left')) + (dir * spd);

	//if(pos > 300) pos = 300;
	if(pos < 0) pos = 0;

	img.css('left', pos);

	console.log(pos);

	}
	});

	</script></body>
	</html>