Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="tickr-box">
              <div id="tickr-scroll">
                <ul>
                  <li>text 1</li>
                  <li>text 2</li>
                </ul>
              </div>
            </div>
          </div>
</body>
</html>
 
#tickr-box 
{
background: #D3D3D3;
max-width: 550px;
padding: 3px;
margin: 0px auto 0px auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
​
.tickr-title 
{
color: #FFFFFF;
font: bold 18px arial, sans-serif;
background: #2A75C1; 
padding: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
​
#tickr-scroll ul
{
margin: 0px;
padding: 0px;
border: 0px;
vertical-align: baseline;
list-style: none;
}
​
#tickr-scroll 
{
background: #4E91D5;
height: 27px;
margin: 3px auto 0px auto;
overflow: hidden;
padding: 0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
​
#tickr-scroll li 
    {
    color: #FFFFFF;
    font: normal 18px arial, sans-serif;
    line-height: 26px;
    }
​
#tickr-scroll a 
{
color: #FFFFFF;
text-decoration: none;
}
​
#tickr-scroll a:hover 
{
color: #CCFF99;
text-decoration: none;
}
​
#tickr-scroll ul
{
padding: 0px 6px 0px 6px;
animation: tickr 6s cubic-bezier(1, 0, .5, 0) infinite;
}
​
#tickr-scroll ul:hover {
animation-play-state: paused;
}
​
@keyframes tickr {
0%   { margin-top: 0; }
50%  { margin-top: -26px; }
100% { margin-top: 0; }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers