Coin-nado

by eprouver

HTML

<div id="contain">
<div class="spiralstart"></div>
    
</div>

CSS

.spiralstart{

position:relative;
    width:120px;
    height:120px;
    background:red;
    margin:20% auto;

}

@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg)
                   translate3d(0px, 0px, 0)
                   rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg)
                   translate3d(-150px, 0px, 0)
                   rotate(-360deg);
    }
}

.spiralenergy{
    position:absolute;
    width:20px;
    height:20px;
    background:#aaf;
    -webkit-transition:all 5s ease;

}

JavaScript

$.each($('.spiralstart'), function(i, v) {

    var w = $('<div>');
    $(v).replaceWith(w);
    w.parent().append(v);
    w.css({
        'position': 'absolute',
        'top': $(v).offset().top,
        'left': $(v).offset().left - 8,
        'height': $(v).height(),
        'width': $(v).width()
    })

    for (var j = 0; j < 50; j++) {

        var x = $('<div class="spiralenergy">');

        $(w).append(x.css({
            '-webkit-transform': 'rotate(0deg) translate3d(0px, 0px, 0) rotate(0deg)',
            'top': $(w).height() / 2,
            'left': $(w).width() / 2
        }));

    }

});

setTimeout(function() {
    $.each($('.spiralenergy'), function(i, v) {

        $(v).css({
            '-webkit-transform': 'rotate(' + (i * 50) + 'deg) translate3d(' + (80 + (4 * i)) + 'px, 0px, 0) rotate(-' + (i * 50) + 'deg)'
        }).one('webkitTransitionEnd', function() {

            var x = ($(this).position().left - $(this).parent().siblings('.spiralstart').position().left - ($(this).parent().siblings('.spiralstart').width() / 2)) * 20;
            var y = ($(this).position().top - $(this).parent().siblings('.spiralstart').position().top - ($(this).parent().siblings('.spiralstart').height() / 2)) * 20;


            $(this).css('-webkit-transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');

        })

    })
}, 100);