j4cobgarby/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style id="jsbin-css">
body {
  background-color: white;
}

* {
  font-family: Roboto;
}

div.header-wrapper {
  height: 45px;
  background-color: #f4f4f4;
  border-bottom: 1px solid black;
}

div.img {
  height: 45px;
  width: 45px;
  background-color: red;
  display: block;
  float: left;
}

span.label {
  margin: 0px 5px;
  float: left;
  display: block;
  height: 45px;
  line-height: 45px;
}

span.label:hover {
  cursor: pointer;
}

div.scroller-wrapper {
  height: 45px;
  width: 600px;
  margin-left: 160px;
  overflow: hidden;
}

div.scroller-panel {
  height: 90px;
  width: 600px;
  line-height: 45px;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
  font-weight: bold;
}

@keyframes scroll-down {
  from {transform: translateY(0px);}
  to {transform: translateY(-45px);}
}
@keyframes scroll-up {
  from {transform: translateY(-45px);}
  to {transform: translateY(0px);}
}

.scrolldown {animation-name: scroll-down;}
.scrollup   {animation-name: scroll-up;}
</style>
</head>
<body>
  <div class="header-wrapper">
    <div class="img"></div>
    <span onclick="scrollup()" class="label">Hello</span>
    <span onclick="scrolldown()" class="label">World</span>
    <div class="scroller-wrapper">
      <div id="panel" class="scroller-panel">
        Hello
        <br />
        World
      </div>
    </div>
  </div>
<script id="jsbin-javascript">
function scrollup() {
  var panel = document.getElementById("panel");
  panel.classList.remove("scrolldown");
  panel.classList.add("scrollup");
}

function scrolldown() {
  var panel = document.getElementById("panel");
  panel.classList.remove("scrollup");
  panel.classList.add("scrolldown");
}
</script>


<script id="jsbin-source-css" type="text/css">body {
  background-color: white;
}

* {
  font-family: Roboto;
}

div.header-wrapper {
  height: 45px;
  background-color: #f4f4f4;
  border-bottom: 1px solid black;
}

div.img {
  height: 45px;
  width: 45px;
  background-color: red;
  display: block;
  float: left;
}

span.label {
  margin: 0px 5px;
  float: left;
  display: block;
  height: 45px;
  line-height: 45px;
}

span.label:hover {
  cursor: pointer;
}

div.scroller-wrapper {
  height: 45px;
  width: 600px;
  margin-left: 160px;
  overflow: hidden;
}

div.scroller-panel {
  height: 90px;
  width: 600px;
  line-height: 45px;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
  font-weight: bold;
}

@keyframes scroll-down {
  from {transform: translateY(0px);}
  to {transform: translateY(-45px);}
}
@keyframes scroll-up {
  from {transform: translateY(-45px);}
  to {transform: translateY(0px);}
}

.scrolldown {animation-name: scroll-down;}
.scrollup   {animation-name: scroll-up;}</script>

<script id="jsbin-source-javascript" type="text/javascript">function scrollup() {
  var panel = document.getElementById("panel");
  panel.classList.remove("scrolldown");
  panel.classList.add("scrollup");
}

function scrolldown() {
  var panel = document.getElementById("panel");
  panel.classList.remove("scrollup");
  panel.classList.add("scrolldown");
}</script></body>
</html>

## jsbin.duvisekowa.css
body {
  background-color: white;
}

* {
  font-family: Roboto;
}

div.header-wrapper {
  height: 45px;
  background-color: #f4f4f4;
  border-bottom: 1px solid black;
}

div.img {
  height: 45px;
  width: 45px;
  background-color: red;
  display: block;
  float: left;
}

span.label {
  margin: 0px 5px;
  float: left;
  display: block;
  height: 45px;
  line-height: 45px;
}

span.label:hover {
  cursor: pointer;
}

div.scroller-wrapper {
  height: 45px;
  width: 600px;
  margin-left: 160px;
  overflow: hidden;
}

div.scroller-panel {
  height: 90px;
  width: 600px;
  line-height: 45px;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
  font-weight: bold;
}

@keyframes scroll-down {
  from {transform: translateY(0px);}
  to {transform: translateY(-45px);}
}
@keyframes scroll-up {
  from {transform: translateY(-45px);}
  to {transform: translateY(0px);}
}

.scrolldown {animation-name: scroll-down;}
.scrollup   {animation-name: scroll-up;}

## jsbin.duvisekowa.js
function scrollup() {
  var panel = document.getElementById("panel");
  panel.classList.remove("scrolldown");
  panel.classList.add("scrollup");
}

function scrolldown() {
  var panel = document.getElementById("panel");
  panel.classList.remove("scrollup");
  panel.classList.add("scrolldown");
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<style id="jsbin-css">
	body {
	background-color: white;
	}

	* {
	font-family: Roboto;
	}

	div.header-wrapper {
	height: 45px;
	background-color: #f4f4f4;
	border-bottom: 1px solid black;
	}

	div.img {
	height: 45px;
	width: 45px;
	background-color: red;
	display: block;
	float: left;
	}

	span.label {
	margin: 0px 5px;
	float: left;
	display: block;
	height: 45px;
	line-height: 45px;
	}

	span.label:hover {
	cursor: pointer;
	}

	div.scroller-wrapper {
	height: 45px;
	width: 600px;
	margin-left: 160px;
	overflow: hidden;
	}

	div.scroller-panel {
	height: 90px;
	width: 600px;
	line-height: 45px;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
	font-weight: bold;
	}

	@keyframes scroll-down {
	from {transform: translateY(0px);}
	to {transform: translateY(-45px);}
	}
	@keyframes scroll-up {
	from {transform: translateY(-45px);}
	to {transform: translateY(0px);}
	}

	.scrolldown {animation-name: scroll-down;}
	.scrollup {animation-name: scroll-up;}
	</style>
	</head>
	<body>
	<div class="header-wrapper">
	<div class="img"></div>
	<span onclick="scrollup()" class="label">Hello</span>
	<span onclick="scrolldown()" class="label">World</span>
	<div class="scroller-wrapper">
	<div id="panel" class="scroller-panel">
	Hello
	<br />
	World
	</div>
	</div>
	</div>
	<script id="jsbin-javascript">
	function scrollup() {
	var panel = document.getElementById("panel");
	panel.classList.remove("scrolldown");
	panel.classList.add("scrollup");
	}

	function scrolldown() {
	var panel = document.getElementById("panel");
	panel.classList.remove("scrollup");
	panel.classList.add("scrolldown");
	}
	</script>


	<script id="jsbin-source-css" type="text/css">body {
	background-color: white;
	}

	* {
	font-family: Roboto;
	}

	div.header-wrapper {
	height: 45px;
	background-color: #f4f4f4;
	border-bottom: 1px solid black;
	}

	div.img {
	height: 45px;
	width: 45px;
	background-color: red;
	display: block;
	float: left;
	}

	span.label {
	margin: 0px 5px;
	float: left;
	display: block;
	height: 45px;
	line-height: 45px;
	}

	span.label:hover {
	cursor: pointer;
	}

	div.scroller-wrapper {
	height: 45px;
	width: 600px;
	margin-left: 160px;
	overflow: hidden;
	}

	div.scroller-panel {
	height: 90px;
	width: 600px;
	line-height: 45px;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
	font-weight: bold;
	}

	@keyframes scroll-down {
	from {transform: translateY(0px);}
	to {transform: translateY(-45px);}
	}
	@keyframes scroll-up {
	from {transform: translateY(-45px);}
	to {transform: translateY(0px);}
	}

	.scrolldown {animation-name: scroll-down;}
	.scrollup {animation-name: scroll-up;}</script>

	<script id="jsbin-source-javascript" type="text/javascript">function scrollup() {
	var panel = document.getElementById("panel");
	panel.classList.remove("scrolldown");
	panel.classList.add("scrollup");
	}

	function scrolldown() {
	var panel = document.getElementById("panel");
	panel.classList.remove("scrollup");
	panel.classList.add("scrolldown");
	}</script></body>
	</html>