jquery / css: make text inside div scroll horizontally like a news ticker no plugin

Question

anyone have some tips on how to make text inside a div scroll horizontally from right to left in a \"news ticker\" fashion without having to use a plugin. Here is an example of

Answer 1

I recently solved this with CSS keyframe animations.

Essentially your ticker needs a wrapper div with overflow hidden on it. The tickers contained items should display inline-block so they are in a line:

    

        
Letterpress chambray brunch.
        
Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.
        
Ugh PBR&B kale chips Echo Park.
    

Example CSS:

.ticker-wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    height: 4rem;
    background-color: rgba(51, 51, 51, 0.5);
    padding-left: 100%; // offsets items to begin
}

.ticker {
    display: inline-block;
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    padding-right: 100%; // taken from container as display inline-block
}

.ticker__item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 2rem;
    color: white;
}

I have a demo that uses the css keyframe animation to then transform the content all the way from one side to the other infinitely. n.b. Vendor prefixed versions not shown.

@keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);

    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

The only tweak you need is to set the animation duration and apply it to .ticker.

.ticker {
    animation-name: ticker;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 25s; // tweak based on number of items/desired speed
}

You can see the full demo