Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
Csharper1972 opened this Issue · 3 comments

2 participants

@Csharper1972

No description provided.

@risq risq closed this
@risq risq reopened this
@risq
Owner
@Csharper1972

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 ?

@risq
Owner

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; }
}
@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.