Эффект движущейся тени в пяти строчках 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.

Индикация загрузки AJAX

 

Вот и все!

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: aext.net/2010/04/jquery-shadow-motion-effect/
Перевел: Сергей Фастунов
Урок создан: 16 Июля 2010
Просмотров: 37003
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 16 Июля 2010 21:04
    positive
    Скучно. К чему так убиваться, когда есть flash и gif.
  • 17 Июля 2010 00:50
    ZektraPlay
    Мне тема понравилась. НО! Помоему автор новости чет недокурил, на винде все прекрасно пашет. Проц амд. А вот скругление углов не пахает. В коде есть, а не исполняемом коде border-radius: нет поэтому опера 10.60 мы видим квадрат
  • 17 Июля 2010 04:30
    ETS
    Да если многочисленные юзеры Оперы (к коим я отношусь) будут видеть квадраты, то ясен перец flash в этом вопросе лучше хД
  • 17 Июля 2010 09:50
    fortune
    У меня вин7, рам 2 гига и проц о 4-х камнях, все работает, странно почему написано, что в винде не пашет. На счет того, что "Скучно. К чему так убиваться, когда есть flash и gif." Вооот это глупость. Ну давайте ездить на телегах как наши деды, зачем автомобили нужны?
  • 17 Июля 2010 12:02
    Oleg
    "как такой эффект правильно называется, кстати?" - движущийся объект оставляе за собой шлейф... даже в винде есть такая настройка для курсора))) А как пример для названия - Движущийся объект с шлейфом.
  • 28 Июля 2010 08:04
    sabio
    Такой эффект в программах анимации называется motion blur. а урок интересный и полезный! Спасибо.
  • 23 Апреля 2011 14:32
    AronTito
    А на Firefox НЕ РАБОТАЕТ:( ПОЧЕМУ?
  • 16 Июня 2011 12:41
    ALEHAN
    У меня не работает ни в одном браузере, действительно значит что то с виндой связано
    • 16 Августа 2011 17:52
      Кетов_Павел
      Здесь не работает, а на сайте источника данного урока всё отлично работает.
^ Наверх ^