Created
June 4, 2017 12:08
-
-
Save j4cobgarby/281fd069b10db51233616ca4396af383 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/duvisekowa
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment