CODEWITHSUNDEEP
jqueryanimationrandom
Starks
Starks

Reputation: 5

Animating random text to reform as complete sentence with jQuery

I have been working on this problem and really need some help. This script enables a sentence to be broken up and then each span created animates randomly in a box, i need to be able to stop the animation and animate the original sentence back together below the random box. i am using dave ruperts lettering script to break the sentence apart.

The fianl animation should have the letters reform after falling out of the box above.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">/* Lettering.JS 0.6 by Dave Rupert  - http://daverupert.com */
(function($){var methods={init:function(){return this.each(function(){return injector($(this),'','char','')})},words:function(){return this.each(function(){return injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var t=$(this),r="eefec303079ad17405c889e092e105b0";t.children("br").replaceWith(r);return injector(t,r,'line','')})}};function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length>0){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty();t.append(inject)}}$.fn.lettering=function(method){if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else if(method=='letters'||!method){return methods.init.apply(this,arguments)}else{$.error('Method '+method+' does not exist on jQuery.lettering')}}})(jQuery);</script>
<script>
$(document).ready(function() {
    $(".fancy").lettering();
        $.fn.pulseRandom = function () {
        var repulse = function ( $elem ) {
            var rand = Math.floor( Math.random() * 150 ),
            rands = Math.floor(Math.random()* 150 ) + 150,
                time = Math.floor( Math.random() * 200 ) + 200;

            $elem.animate({ 'margin-top':rand, 'margin-left':rands  }, time - 1);
            setTimeout(function(){ repulse( $elem ); }, time);
        };
            repulse( this );
    };

    $('.fancy span').each(function(i,ele){
            $(ele).pulseRandom();
    });
    $('.fancy').click(function(){
        $('.fancy span').animate({
            'margin-top':'300px'
        });
    });
});
</script>
<style>
.fancy{
    border:8px #66CC66 solid;
    padding:5px;
    width:170px;
    height:170px;
    margin-left:150px;
    margin-top:20px;
    position:absolute;
    z-index:10;
}
.fancy span{
    width:15px; height:15px;
    position:absolute;
    margin:10px;
    z-index:30;
    left:-140px;
}
.fancy span:nth-child(odd){
        margin:10px;
}
.fancy span:nth-child(even){
        margin:20px;
}
.fancy span:nth-child(-n+10){
        margin:20px;
}

</style>
<div class="fancy"><p>Merry Christmas Anna, can you see the letters jumbled up?</p></div>

Upvotes: 1

Views: 1146

Answers (2)

Alper
Alper

Reputation: 1105

I've added some arrays and chanced your settimeout method, you can control it from this fiddle
I hope it helps..

Upvotes: 0

Bergi
Bergi

Reputation: 665020

There are certain problems with your code:

  • There is no way to stop an element repulsing
  • Your implementation of pulseRandom on jQuerys prototype object should
    • use each itself
    • return this to stay chainable
  • For what do you need those margins on odd, even and 10th spans?

I've created http://jsfiddle.net/3vTwR/1/, augmenting your code. I've used top and left instead of margin, that seems clearer to me. The callback with a stopping function is a uncommon way, but it works. Without prototyping pulseRandom I would have used

function pulseRandom($element) {
    // do something with $element
    return stopFunction() {
        // clear timeouts
    };
}
var stop = pulseRandom($('.fancy span'));
$('.fancy').click(function(){
    stop();
    $('.fancy span').animate({'top':'300px', 'left':0});
});

Upvotes: 1

Related Questions