Blur Swapper

by andrewray

HTML

<script src="http://andrewray.me/stuff/BlurSwapper/blurswapper.js"></script>
<div class="container">
    <h2>Default, no options</h2>
    <ul id="swp1" class="swapper">
        <li>I am entry one</li>
        <li>This is a second entry</li>
        <li>I'm a third entry</li>
    </ul>
    
    <h2>Direction: 'right'</h2>
    <ul id="swp2" class="swapper">
        <li>I am entry one</li>
        <li>This is a second entry</li>
        <li>I'm a third entry</li>
    </ul>
    
    <h2>Blurred</h2>
    <ul id="swp3" class="swapper">
        <li>I am entry one</li>
        <li>This is a second entry</li>
        <li>I'm a third entry</li>
    </ul>
    
    <h2>Booooring!</h2>
    <ul id="swp5" class="swapper">
        <li>I am entry one</li>
        <li>This is a second entry</li>
        <li>I'm a third entry</li>
    </ul>
    
    <h2>Craaaazy!</h2>
    <ul id="swp6" class="swapper">
        <li>I am entry one</li>
        <li>This is a second entry</li>
        <li>I'm a third entry</li>
    </ul>
</div>

CSS

body, html {
    background:#666;
    font-family:sans-serif;
    font-size:14px;
}

h2 {
    font-family:Georgia;
    font-weight:normal;
    font-size:20px;
    margin:0 0 10px;
    border-bottom:1px dotted #aaa;
}

.container {
    border-radius:6px;
    padding:16px;
    background:#fff;
    box-shadow:1px 1px 6px #000;
    margin:20px;
}
.swapper {
    color:#038;
    list-style:none;
    width:300px;
    margin:0 0 30px;
    padding:0;
    height:26px;
    font-size:26px;
    line-height:26px;
    position:relative;
}
.swapper > li {
    position:absolute;
    text-shadow: #FFF 0px 0px 1px;
}

JavaScript

$(function() {
    $('#swp1').blurSwap().startSwapping();
    
    $('#swp2').blurSwap({
        direction:'right',
        inMoveDist:50,
        outMoveDist:60,
        delay:2000
    }).startSwapping();
    
    $('#swp3').blurSwap({
        direction:'right',
        inMoveDist:50,
        outMoveDist:60,
        delay:1500,
        duration:1000,
        blurred:1
    }).startSwapping();
    
    $('#swp4').blurSwap({
        direction:'left',
        inMoveDist:50,
        outMoveDist:60,
        delay:1500,
        duration:1000,
        blurred:1
    }).startSwapping();
    
    $('#swp5').blurSwap({
        inMoveDist:0,
        outMoveDist:0
    }).startSwapping();
    
    $('#swp6').blurSwap({
        direction:'down',
        blurred:1,
        outMoveDist:50,
        inMoveDist:10,
        windSpeed:4
    }).startSwapping();
});