Анимация произвольного текста для преобразования в полное предложение с помощью jQuery - PullRequest
Новая
       25

Анимация произвольного текста для преобразования в полное предложение с помощью jQuery

1 голос
/ 29 ноября 2011

Я работал над этой проблемой, и мне действительно нужна помощь. Этот скрипт позволяет разбить предложение, а затем каждый созданный промежуток анимируется случайным образом в блоке, мне нужно иметь возможность остановить анимацию и анимировать оригинальное предложение обратно под случайным блоком. Я использую сценарий надписи Дэйва Руперта, чтобы разбить предложение на части.

Анимация фианлы должна иметь реформу букв после выпадения из поля выше. 

    <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>

Ответы [ 2 ]

1 голос
/ 29 ноября 2011

Есть определенные проблемы с вашим кодом:

  • Нет способа остановить отталкивание элемента
  • Ваша реализация pulseRandom на объекте-прототипе jQuerys должна
    • использовать each сам
    • возврат this, чтобы оставаться в цепи
  • Для чего вам нужны эти поля на нечетных, четных и 10-х пролетах?

Я создал http://jsfiddle.net/3vTwR/1/,, дополняющий ваш код. Я использовал top и left вместо margin, что мне кажется более понятным. Обратный вызов с функцией остановки является редким способом, но он работает. Без прототипа pulseRandom я бы использовал 

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});
});
0 голосов
/ 29 ноября 2011

Я добавил несколько массивов и усовершенствовал ваш метод settimeout, вы можете управлять им с этой скрипкой
Я надеюсь, что это помогает ..

...