Skip to content

Instantly share code, notes, and snippets.

@mtandre

mtandre/text-scroller.html

Last active August 29, 2015 14:24
Show Gist options
  • Save mtandre/3e8046f45f2461884686 to your computer and use it in GitHub Desktop.
Save mtandre/3e8046f45f2461884686 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
text-scroller.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>text ticker / scroller</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.text-ticker {
-webkit-animation: textscroller 30s linear infinite;
animation: textscroller 30s linear infinite;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.text-ticker:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused
}
@-webkit-keyframes textscroller {
0% { text-indent: 20% }
100% { text-indent: -400% } /* based on text length */
}
@keyframes textscroller {
0% { text-indent: 20% }
100% { text-indent: -400% } /* based on text length */
}
</style>
</head>
<body>
<p class="text-ticker">
Fashioned at last into an arrowy shape, and welded by Perth to the shank, the steel soon pointed the end of the iron; and as the blacksmith was about giving the barbs their final heat, prior to tempering them, he cried to Ahab to place the water-cask near.
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment