jQuery plugin to turn a list into a rotating text madness machine
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();
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)
$().blurSwap
Turn this bad boy into a blur swapper
$().startSwapping
Do it!
$().stopSwapping
Stop it!
This code is public domain.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent