Previously it was very difficult to code it in javascript and make it work with other plugins, but today I decided to make it possible in CSS3 and voila, I succeeded
So lets start with basic html code:
[html]
<div id="bar">
<input type="checkbox" id="close" />
<label for="close" id="header"><span>Click Here!</span></label>
<div id="fluid-bar">
<div id="wrap">
<div id="news_ticker">
<p style="float: left; color: rgb(255, 255, 255); margin: 5px 0pt 0pt 10px;">Latest news</p>
<ul>
<li><a href="#">Samsung Galaxy S2</a></li>
<li><a href="#">LG Optimus Black</a></li>
<li><a href="#">Samsung Note</a></li>
<li><a href="#">Sony Xperia S</a></li>
</ul>
<p style="float: left; color: #000000; margin: 5px 0pt 0pt 10px;">|</p>
<p style="float: left; color: rgb(255, 255, 255); margin: 5px 0pt 0pt 10px;">Notification message</p>
</div>
</div>
</div>
</div>
[/html]
News ticker logic is simple, we make the UL tag height fixed and will change the position of LI to move top all the time.
Notification bar logic is tricky, here we will be using checkbox, if checked then toggle the bar.
CSS for Notification Bar:
[css]
#fluid-bar {
background-color: #F26D5E;
height: 35px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
overflow: hidden;
}
#close {
position: absolute;
right: 5px;
display: none;
}
#close:checked ~ #header:after {
content: "X";
color: #F26D5E;
}
#close:checked ~ #fluid-bar {
height: 0px;
}
[/css]
And the css for notification bar:
[css]
@-moz-keyframes ticker {
0% {
top: 0;
}
25% {
top: -20px;
}
50% {
top: -40px;
}
75% {
top: -60px;
}
100% {
top: 0;
}
}
ul {
background: none repeat scroll 0 0 #FFFFFF;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
height: 20px;
margin: 5px;
float: left;
overflow: hidden;
width: 150px;
}
li {
list-style: none;
}
li a {
color: #35A2D4;
font-family: tahoma;
-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
position: relative;
}
[/css]
You can check the demo and download the files. Share it if you found it helpful.
