Closed Csharper1972 closed 10 years ago
risq thank you. Another question please how can i create in my website this design of the text and button of breaking news like in this site: http://www.jqueryscript.net/demo/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker/
?
I'm using in my site in Weebly with the Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker and it's working. But i want to use my oqn button and design the same they show in the demo page.
Any ideas how to do it ? Or how to use the design they are using ?
Hi, This is the first demo of the plugin I made for its first release. You can check the sources of the demo on jqueryscripts, since this demo is not on github anymore (I think). Feel free to copy the HTML/CSS/JS for your website and customize it if you need, to see how it works ;)
Basically the js code is very simple :
//initialize the plugin
var oneliner = $('#oneliner .newsticker').newsTicker({
row_height: 44,
max_rows: 1,
time: 5000,
nextButton: $('#oneliner .header')
});
// Pause newsTicker on .header hover
$('#oneliner .header').hover(function() {
oneliner.newsTicker('pause');
}, function() {
oneliner.newsTicker('unpause');
});
as the HTML :
<div id="oneliner">
<div class="header"> Breaking News </div>
<ul class="newsticker">
<li>...</li>
<li>...</li>
</ul>
</div>
and for the CSS, I used css animations and keyframes for the glow effect :
#oneliner {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
position: relative;
margin: 80px auto 40px auto;
width: 900px;
height: 44px;
background-color: #fff;
border-radius: 2px;
}
#oneliner:before, #oneliner:after {
border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
bottom: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
content: "";
left: 10px;
position: absolute;
right: 10px;
top: 50%;
z-index: -1;
}
#oneliner .header {
background-color: #ff2e2e;
display: inline-block;
width: 180px;
height: 44px;
text-transform: uppercase;
font-weight: 500;
line-height: 44px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-align: center;
border-radius: 2px 0 0 2px;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-animation: redPulse 4s infinite;
-moz-animation: redPulse 4s infinite;
animation: redPulse 4s infinite;
}
#oneliner:hover .header {
-webkit-animation: redPulse 1s infinite;
-moz-animation: redPulse 1s infinite;
animation: redPulse 1s infinite;
}
#oneliner .header:active {
background-color: #000;
margin-left: -12px;
color: #aaa;
}
#oneliner ul.newsticker {
display: inline-block;
height: 44px;
width: 710px;
overflow: hidden;
margin: 0 0 0 -3px;
padding: 0 0 0 6px;
line-height: 44px;
font-weight: 500;
background-color: #fafafa;
}
#oneliner ul.newsticker > li{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px dotted #888;
}
@-webkit-keyframes redPulse {
from { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; -webkit-box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
}
@-moz-keyframes redPulse {
from { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; -moz-box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
}
@keyframes redPulse {
from { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
}
You can set the same value for speed and duration : it will continuously scroll, but the speed may not be exactly constant... Check this fiddle: http://jsfiddle.net/rFnC3/
2014-03-10 17:23 GMT+01:00 Csharper1972 notifications@github.com: