efek animasi

by dafin defandaky

HTML

<span style="top:-50px;left:155px;" data-animation="[{left:-100},{top:30},{left:90},{top:30},{top:0},{left:0}]">L</span><!--
--><span style="top:90px;left:97px;" data-animation="[{left:100},{top:-50},{left:-30},{top:60},{top:0},{left:0}]">O</span><!--
--><span style="top:22px;left:-34px;" data-animation="[{left:-50},{top:60},{top:50},{left:90},{top:0},{left:0}]">A</span><!--
--><span style="top:83px;left:110px;" data-animation="[{left:50},{top:-60},{top:-10},{left:75},{top:0},{left:0}]">D</span><!--
--><span style="top:57px;left:-200px;" data-animation="[{left:-80},{left:50},{top:30},{left:0},{top:-40},{top:0}]">I</span><!--
--><span style="top:-34px;left:72px;" data-animation="[{left:120},{top:-60},{left:-70},{left:-100},{top:0},{left:0}]">N</span><!--
--><span style="top:-60px;left:-270px;" data-animation="[{left:-15},{top:70},{top:90},{left:0},{top:0}]">G</span>

CSS

body {
    padding:100px 30px;
    text-align:center;
}

span {
    position:relative;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-color:#369;
    color:white;
    display:inline-block;
    margin:0 5px 0 0;
}

JavaScript

$('span[data-animation]').each(function() {
    var anim = eval($(this).data('animation')),
        $span = $(this);
    $.each(anim, function(i) {
        $span.animate(anim[i], 2500);
    });
});