Эффект движущейся тени в пяти строчках jQuery

Кому не нравятся эффекты движения? Тень, которая сопровождает движущийся объект, придает зрелищности в динамичных сценах во многих фильмах, например в Матрице. Хорошая новость заключается в том, что мы можем создавать такие анимации и экспериментировать с ними. Управление дистанцией и движением - достаточно сложная задача (требуется написать сложный код для получения хорошего контроля над эффектом). Удивительное заключается в том, что сделать подобный эффект можно с помощью пяти строчек кода jQuery!

Начнем с простой анимации jQuery

Если у вас есть опыт работы с jQuery, то вы легко реализуете анимацию. В примере происходит перемещение ‘точки’ слева направо с использованием функции animate():

$("#ball").stop(true).animate({left:500}, 1000).animate({left:0}, 1000);

Результат:

Для создания круга используется CSS3 (Пользователи IE будут видеть квадрат!):

#ball {
 display: block;
 width: 80px;
 height: 80px;
 background: #333;
 -moz-border-radius: 40px; /* FF1+ */
 -webkit-border-radius: 40px; /* Saf3+, Chrome */
 border-radius: 40px; /* Opera 10.5, IE 9 */
 position: absolute;
 top: 50px;
 left: 50px;
}

Скучно? Движение тени

jQuery или даже CSS3 не имеют встроенных эффектов или свойств для создания теней (имеются ввиду ситуации с более чем одна тень для объекта). Может ли jQuery сделать что-то наподобие такого?

Конечно! jQuery может создать такой эффект. Трюк заключается в следующем: создадим несколько изображений, затем сделаем так, что они будут следовать за первой анимацией и затухать… Нет, не так. Давайте посмотрим на пример выше. В jQuery есть функция clone(). Метод .clone() - это удобный способ клонировать элементы на странице. Используя данный метод, вы можете сделать множество копий определенного элемента. Заметьте, что нет смысла создавать копии элементов HTML с одинаковым атрибутом ID. Лучше использовать имя класса для элементов. Однако это не означает, что нет способа дублировать элементы по ID.

В данном случае, мы удаляем ID и устанавливаем имя для атрибута класса (создайте стиль css для нового имени класса):

$("#ball").clone().removeAttr("id").attr({class:"ball"})
                   .appendTo("#demo");

Пытаемся дублировать круг в соответствующие номера. Однако движение зависит от скорости основного элемента. Вот как мы будем контролировать дублированный элемент по времени. Если движение происходит быстро, мы будем дублировать его быстро, если движение происходит медленно, нужно будет дублировать один или два кадра… Нужно использовать jQuery Timer для таких фокусов.

В каждую единицу времени мы делаем только одну копию.

$("#ball").everyTime(80, function() {  
                        
    $("#ball").clone().removeAttr("id").attr({class:"ball"})
                   .appendTo("#demo")
                   .everyTime(480, function() {
                    $(this).remove();
    });
        
});  
                    
$("#ball").stop(true).animate({left:500}, 1000)
          .animate({left:0}, 1000, function(){
                            
                $("#ball").stopTime();
                            
});

Выше приведенный код делает одну копию каждые 80 миллисекунд. Но если не прервать метод clone, то можно наделать достаточно кругов для Олимпийских игр на 100 лет. В каждом everyTime(), мы снова вызываем данные метод, но уже ограничиваем его 480 миллисекунд для удаления дубликата. Подсчитаем, у нас есть 6*(480/80) копий, которые следуют за основным элементом.

Результат:

Почти все. Добавим эффект затухания.

$("#ball").everyTime(80, function() {

    $(this).animate({left:500}, 1000).animate({left:0}, 1000);
                        
    $(this).clone().removeAttr("id").attr({class:"ball"})
           .appendTo("#demo").fadeOut(480, function() {
                $(this).remove();
    });
        
});

Результат:

Для контролирования времени дублирования вы также может использовать window.setInterval(), чтобы заменить метод Time().

Скучно? А вот эффект для индикации загрузки AJAX!

Результат:

function animateit() {
      
    var deg=0;
    var dif=3;

    var centerX;
    var centerY;
      

    centerX = $('#demo4').width()/4+20;
    centerY = $('#demo4').height()/2;
 
 
    $("#ball4").everyTime(1, function(){

        /* Инкрементируем угол: */
        deg+=dif;

        /* Вычисляем анимацию для круга */
        var eSin = Math.sin(deg*Math.PI/180);
        var eCos = Math.cos(deg*Math.PI/180);

        /* Устанавливаем свойства css */
        
        $(this).css({
            top:centerX+120*eSin,
            left:centerY+120*eCos
        });
    });
     
    /* Устанавливаем новый таймер для тени с общим количеством 10 теней */              
    $("#ball4").everyTime(80, function() {
        $(this).clone().removeAttr("id").attr({"class":"ball"})
               .appendTo("#demo4").fadeOut(800, function() {
                            $(this).remove();
          });
    });
      
}

Ошибка?

Анимация не работает? Используете Windows? Да, нужно признать наличие ошибки использования процессора. Сверхъестественным образом она проявляется только на Windows, даже при использовании ПК с 8Gbs памяти (Windows 7) и на Windows Vista. Однако анимация работает отлично на Mac OS. Если вы пользователь Windows и вам не посчастливилось увидеть демонстрацию, то ниже приведен скриншот с Mac OS.

Вот и все!

Данный эффект может быть использован для любой анимации, если вы хотите использовать движущуюся тень (как такой эффект правильно называется, кстати?). В уроке предложена только идея такой анимации с использованием jQuery.