didxga/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[feature friendly pad nav lib]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.card {
  height: 200px;
  width:95%;
  border: 1px solid black;
  margin: auto auto;
  margin-top: 10px;
  transition: width .4s;
}

body {
  transition: transform .4s;
}
</style>
</head>
<body>
  <div class="content pad">
    <div class="card" tabindex="1">1</div>
    <div class="card" tabindex="1">2</div>
    <div class="card" tabindex="1">3</div>
    <div class="card" tabindex="1">4</div>
    <div class="card" tabindex="1">5</div>
    <div class="card" tabindex="1">6</div>
    <div class="card" tabindex="1">7</div>
  </div>
<script id="jsbin-javascript">
;
(function(){

  var currentIndex;
  var cards;
  var len;

  function handleKeydownEvent(e) {
    switch(e.key) {
    case 'ArrowUp':
      nav(-1);
      break;
    case 'ArrowDown':
      nav(1);
      break;
    case 'ArrowRight':
      nav(1);
      break;
    case 'ArrowLeft':
      nav(-1);
      break;
    }
  }

  function nav (move) {
    var next = currentIndex + move;
    if(next>=0 && next<cards.length) {
      normalizeCard();
      var targetElement = cards[next];
      currentIndex = next;
      highlight(cards[next]);
      moveTo(next);
     }
  }

  function highlight(card) {
    card.style.height = "300px";
    card.style.width = "100%";
    card.style.marginTop = "20px";
    card.focus();
  }

  function normalizeCard() {
     for(var i=0, l=cards.length; i<l; i++) {
       cards[i].style.height = "";
       cards[i].style.width = "";
       cards[i].style.marginTop = "";
     }
  }

  function moveTo(i) {
    var distance = i*210;
    if(i != 0) {
      distance -= 100;
    }
    document.body.style.transform = "translateY(-"+distance+"px)";
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    document.body.style.overflowY = "hidden";
    cards = document.querySelectorAll(".card");
    if(cards) {
      len = cards.length;
      highlight(cards[0]);
      currentIndex = 0;
      document.body.addEventListener('keydown', handleKeydownEvent);

    }
  });
})();
</script>


<script id="jsbin-source-css" type="text/css">
.card {
  height: 200px;
  width:95%;
  border: 1px solid black;
  margin: auto auto;
  margin-top: 10px;
  transition: width .4s;
}

body {
  transition: transform .4s;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">;
(function(){

  var currentIndex;
  var cards;
  var len;

  function handleKeydownEvent(e) {
    switch(e.key) {
    case 'ArrowUp':
      nav(-1);
      break;
    case 'ArrowDown':
      nav(1);
      break;
    case 'ArrowRight':
      nav(1);
      break;
    case 'ArrowLeft':
      nav(-1);
      break;
    }
  }

  function nav (move) {
    var next = currentIndex + move;
    if(next>=0 && next<cards.length) {
      normalizeCard();
      var targetElement = cards[next];
      currentIndex = next;
      highlight(cards[next]);
      moveTo(next);
     }
  }

  function highlight(card) {
    card.style.height = "300px";
    card.style.width = "100%";
    card.style.marginTop = "20px";
    card.focus();
  }

  function normalizeCard() {
     for(var i=0, l=cards.length; i<l; i++) {
       cards[i].style.height = "";
       cards[i].style.width = "";
       cards[i].style.marginTop = "";
     }
  }

  function moveTo(i) {
    var distance = i*210;
    if(i != 0) {
      distance -= 100;
    }
    document.body.style.transform = "translateY(-"+distance+"px)";
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    document.body.style.overflowY = "hidden";
    cards = document.querySelectorAll(".card");
    if(cards) {
      len = cards.length;
      highlight(cards[0]);
      currentIndex = 0;
      document.body.addEventListener('keydown', handleKeydownEvent);

    }
  });
})();</script></body>
</html>

## jsbin.hixokad.css
.card {
  height: 200px;
  width:95%;
  border: 1px solid black;
  margin: auto auto;
  margin-top: 10px;
  transition: width .4s;
}

body {
  transition: transform .4s;
}

## jsbin.hixokad.js
;
(function(){

  var currentIndex;
  var cards;
  var len;

  function handleKeydownEvent(e) {
    switch(e.key) {
    case 'ArrowUp':
      nav(-1);
      break;
    case 'ArrowDown':
      nav(1);
      break;
    case 'ArrowRight':
      nav(1);
      break;
    case 'ArrowLeft':
      nav(-1);
      break;
    }
  }

  function nav (move) {
    var next = currentIndex + move;
    if(next>=0 && next<cards.length) {
      normalizeCard();
      var targetElement = cards[next];
      currentIndex = next;
      highlight(cards[next]);
      moveTo(next);
     }
  }

  function highlight(card) {
    card.style.height = "300px";
    card.style.width = "100%";
    card.style.marginTop = "20px";
    card.focus();
  }

  function normalizeCard() {
     for(var i=0, l=cards.length; i<l; i++) {
       cards[i].style.height = "";
       cards[i].style.width = "";
       cards[i].style.marginTop = "";
     }
  }

  function moveTo(i) {
    var distance = i*210;
    if(i != 0) {
      distance -= 100;
    }
    document.body.style.transform = "translateY(-"+distance+"px)";
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    document.body.style.overflowY = "hidden";
    cards = document.querySelectorAll(".card");
    if(cards) {
      len = cards.length;
      highlight(cards[0]);
      currentIndex = 0;
      document.body.addEventListener('keydown', handleKeydownEvent);

    }
  });
})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[feature friendly pad nav lib]">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.card {
	height: 200px;
	width:95%;
	border: 1px solid black;
	margin: auto auto;
	margin-top: 10px;
	transition: width .4s;
	}

	body {
	transition: transform .4s;
	}
	</style>
	</head>
	<body>
	<div class="content pad">
	<div class="card" tabindex="1">1</div>
	<div class="card" tabindex="1">2</div>
	<div class="card" tabindex="1">3</div>
	<div class="card" tabindex="1">4</div>
	<div class="card" tabindex="1">5</div>
	<div class="card" tabindex="1">6</div>
	<div class="card" tabindex="1">7</div>
	</div>
	<script id="jsbin-javascript">
	;
	(function(){

	var currentIndex;
	var cards;
	var len;

	function handleKeydownEvent(e) {
	switch(e.key) {
	case 'ArrowUp':
	nav(-1);
	break;
	case 'ArrowDown':
	nav(1);
	break;
	case 'ArrowRight':
	nav(1);
	break;
	case 'ArrowLeft':
	nav(-1);
	break;
	}
	}

	function nav (move) {
	var next = currentIndex + move;
	if(next>=0 && next<cards.length) {
	normalizeCard();
	var targetElement = cards[next];
	currentIndex = next;
	highlight(cards[next]);
	moveTo(next);
	}
	}

	function highlight(card) {
	card.style.height = "300px";
	card.style.width = "100%";
	card.style.marginTop = "20px";
	card.focus();
	}

	function normalizeCard() {
	for(var i=0, l=cards.length; i<l; i++) {
	cards[i].style.height = "";
	cards[i].style.width = "";
	cards[i].style.marginTop = "";
	}
	}

	function moveTo(i) {
	var distance = i*210;
	if(i != 0) {
	distance -= 100;
	}
	document.body.style.transform = "translateY(-"+distance+"px)";
	}

	document.addEventListener("DOMContentLoaded", function(event) {
	document.body.style.overflowY = "hidden";
	cards = document.querySelectorAll(".card");
	if(cards) {
	len = cards.length;
	highlight(cards[0]);
	currentIndex = 0;
	document.body.addEventListener('keydown', handleKeydownEvent);

	}
	});
	})();
	</script>


	<script id="jsbin-source-css" type="text/css">
	.card {
	height: 200px;
	width:95%;
	border: 1px solid black;
	margin: auto auto;
	margin-top: 10px;
	transition: width .4s;
	}

	body {
	transition: transform .4s;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">;
	(function(){

	var currentIndex;
	var cards;
	var len;

	function handleKeydownEvent(e) {
	switch(e.key) {
	case 'ArrowUp':
	nav(-1);
	break;
	case 'ArrowDown':
	nav(1);
	break;
	case 'ArrowRight':
	nav(1);
	break;
	case 'ArrowLeft':
	nav(-1);
	break;
	}
	}

	function nav (move) {
	var next = currentIndex + move;
	if(next>=0 && next<cards.length) {
	normalizeCard();
	var targetElement = cards[next];
	currentIndex = next;
	highlight(cards[next]);
	moveTo(next);
	}
	}

	function highlight(card) {
	card.style.height = "300px";
	card.style.width = "100%";
	card.style.marginTop = "20px";
	card.focus();
	}

	function normalizeCard() {
	for(var i=0, l=cards.length; i<l; i++) {
	cards[i].style.height = "";
	cards[i].style.width = "";
	cards[i].style.marginTop = "";
	}
	}

	function moveTo(i) {
	var distance = i*210;
	if(i != 0) {
	distance -= 100;
	}
	document.body.style.transform = "translateY(-"+distance+"px)";
	}

	document.addEventListener("DOMContentLoaded", function(event) {
	document.body.style.overflowY = "hidden";
	cards = document.querySelectorAll(".card");
	if(cards) {
	len = cards.length;
	highlight(cards[0]);
	currentIndex = 0;
	document.body.addEventListener('keydown', handleKeydownEvent);

	}
	});
	})();</script></body>
	</html>