Skip to content


Subversion checkout URL

You can clone with
Download ZIP


How do i make the text to scroll automatic from top to bottom ? #4

Csharper1972 opened this Issue · 3 comments

2 participants


No description provided.

@risq risq closed this
@risq risq reopened this

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:


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 ?


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() {
}, function() {

as the HTML :

<div id="oneliner">
    <div class="header"> Breaking News </div>
    <ul class="newsticker">

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; }
@risq risq closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.