jQuery plugin to turn a list into a rotating text madness machine
JavaScript
Latest commit adda8b4 Jan 29, 2013 @AndrewRayCode committed with Andrew Ray Making kode public domain
Permalink
Failed to load latest commit information.
README.md
blurswapper.js

README.md

BlurSwapper

jQuery plugin to turn a list into a rotating text madness machine

Demo

Demo on jsFiddle

Usage

Suggested markup:

<ul id="swapper" class="swapper">
    <li>I am entry one</li>
    <li>This is a second entry</li>
    <li>I'm a third entry</li>
</ul>

Suggested CSS:

.swapper {
    list-style:none;
    width:100px;
    height:20px;
    position:relative;
}
.swapper > li {
    position:absolute;
}

Then DO IT

$('#swapper').blurSwap(options).startSwapping();

Options

direction:

The direction the text moves in and out. One of 'up' 'down' 'left'
or 'right'

inMoveDist:

How far the text will move when appearing

outMoveDist:

How far the text will move when disappearing

duration:

How long the switching animation lasts

delay:

How long to wait before showing the next item

blurred:

Whether or not to show motion blur on the text (boolean)

windSpeed:

How far each blurred element should be (pixels)

Methods

$().blurSwap

Turn this bad boy into a blur swapper

$().startSwapping

Do it!

$().stopSwapping

Stop it!

This code is public domain.