Ticker Using CSS Transitions & jQuery

The other day I was looking for a lightweight ticker to show some special offers. I couldn’t do this entirely with CSS (CSS3 Transitions). Some JavaScript is required to toggle an active state. I also wanted the ticker to pause when you mouse over the element. I forgot that I could use the Carousel built into Bootstrap, which the site does use, so I wrote my own jQuery plugin. Rather than delete the plugin, I thought I would share it.

The HTML is simple. You’ll need a wrapping element with some children. Give the wrapping element a class for its role ‘ticker’. For each of the children you want it to toggle the active state, add class ‘item’. The first item you want to show should be given the class ‘active’.

<div class="offers ticker">
    <ul>
        <li class="item active">10% off your first purchase when you <a href="#">sign up</a>!</li>
        <li class="item">Free Shipping on orders over $100!</li>
    </ul>
</div>

Next we need some CSS. There is many transitions you can create. I want a crossfade and a vertical movement. I have provided just what is required to make the animation work.

.offers {
    position: relative;
}

.offers .item {
    position: absolute;
    top: 0;
    -webkit-transition: -webkit-transform .3s ease-in, opacity .3s linear;
    -moz-transition: -moz-transform .3s ease-in, opacity .3s linear;
    -ms-transition: -ms-transform .3s ease-in, opacity .3s linear;
    -o-transition: -o-transform .3s ease-in, opacity .3s linear;
    transition: transform .3s ease-in, opacity .3s linear;
}

.offers .item:not(.active) {
    -webkit-transform: translateY(-100%);
    -moz-transition: translateY(-100%);
    -ms-transition: translateY(-100%);
    -o-transition: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
}

And then finally, the JavaScript. I wrote this using jQuery, which means you will need to add this before my plugin if its not already there.

/*!
 * TSG Ticker Plugin v1.0.0
 * http://www.thatstevensguy.com/
 *
 * Released under the MIT license.
 * Copyright 2015, That Stevens Guy
 */

(function( $ ) {

    $.fn.ticker = function( options ) {
        
        var settings = $.extend( {
            timeout     : 5000,
            targetClass : '.item',
            activeClass : '.active'
        }, options );
        
        this.each( function() {
                        
            var ticker = $( this );
            var interval;
            
            $( ticker ).on( 'mouseover', function() {
                pause( ticker );
            });
            
            $( ticker ).on( 'mouseout', function() {
                start( ticker );
            });
            
            function start()
            {
                interval = setInterval( next, settings.timeout );
            }
            
            function pause()
            {
                clearInterval( interval );
            }
            
            function next()
            {
                var target;
                target = $( ticker ).find( settings.targetClass + settings.activeClass ).next();
                target = target.length ? target : $( ticker ).find( settings.targetClass ).first();
                $( ticker ).find( settings.targetClass + settings.activeClass ).removeClass( settings.activeClass.replace('.', '') );
                $( target ).addClass( settings.activeClass.replace('.', '') );
            }
            
            start( this );
            
        });       
        
    };

}( jQuery ));

Then use this to execute the plugin.

jQuery(document).ready( function($) {
    $('.ticker').ticker();
});

If you are using Bootstrap. You can forget about the jQuery plugin I created. But you can use the CSS, just change class ‘ticker’ to class ‘carousel’ and add the other attributes below.

<div class="offers carousel" data-ride="carousel" data-interval="5000">
    <ul>
        <li class="item active">10% off your first purchase when you <a href="#">sign up</a>!</li>
        <li class="item">Free Shipping on orders over $100!</li>
    </ul>
</div>

All you need to do now is add your own finishing touches!