Author: | jakecode |
---|---|
Views Total: | 26,290 views |
Official Page: | Go to website |
Last Update: | September 2, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS solution to create an automatic & nice-looking news ticker widget with pause on hover functionality and CSS3 based animations.
How to use it:
Create a news ticker from an html unordered list.
<div class="news red"> <span>Latest News</span> <ul> <li><a href="#">Text 1</li> <li><a href="#">Text 2</a></li> <li><a href="#">Text 3</a></li> <li><a href="#">Text 4</a></li> </ul> </div>
Style the news ticker.
.news { box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5); width: 350px; height: 30px; margin: 20px auto; overflow: hidden; border-radius: 4px; padding: 3px; -webkit-user-select: none } .news span { float: left; color: #fff; padding: 6px; position: relative; top: 1%; border-radius: 4px; box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4); font: 16px; -webkit-font-smoothing: antialiased; -webkit-user-select: none; cursor: pointer } .news ul { float: left; padding-left: 20px; animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite; -webkit-user-select: none } .news ul li {line-height: 30px; list-style: none } .news ul li a { color: #fff; text-decoration: none; font: 14px; -webkit-font-smoothing: antialiased; -webkit-user-select: none } .news ul:hover { animation-play-state: paused } .news span:hover+ul { animation-play-state: paused }
Makes the news scroll from the bottom to top using CSS3 keyframes.
@keyframes ticker { 0% {margin-top: 0} 25% {margin-top: -30px} 50% {margin-top: -60px} 75% {margin-top: -90px} 100% {margin-top: 0} }
Is there a way to modify this so the animation doesn’t seem to start over again and instead simply looks like it’s repeating the list on infinite scroll?