CSS3 Logo

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’.

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.

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.

Then use this to execute the plugin.

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.

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