"Обрушение" текста при помощи jQuery

Решил вот с jQuery побаловаться...

Был когда-то такой вирус, под названием "Cascade" (ссылку можно найти внизу страницы). Он вызывал "осыпание" букв, которые были набраны на экране. Попробуем создать похожий эффект. Для этого нам пригодятся пару плагинов: doTimeout и Animation Easing (ссылки на них также можно найти внизу страницы). Увидеть "разрушительное" действие данного эффекта можно, если нажать на кнопку, расположенную ниже.

---

Немного о структуре HTML, использованной в эксперименте. Текст состоит из двух абзацев (p#text1 и p#text2) и заключен в контэйнер (div#text). В качестве отметки для точки "падения" выбрана горизонтальная линия под кнопкой (hr#ground).

Исходный код с комментариями:

  $(document).ready(function() {
      // Считаем максимальное расстояние до "земли"
      var offset = $('hr#ground')[0].offsetTop - $('#text')[0].offsetTop - 15;
      // Подготавливаем токены
      var re = /([а-яёa-z_()<>]+|[:,.?!\-/="])/gi;
      var str = '<span style="position: relative">$1</span>';
      $('#text1').html($('#text1').html().replace(re, str));
      $('#text2').html($('#text2').html().replace(re, str));
      // Настраиваем контэйнер с текстом
      $('#text').css('position', 'relative');
      // Устанавливаем обработчик "onclick" на кнопку
      $('#button').click(
          function() {
              // Для каждого токена
              $('#text span').each(
                  function(i) {
                      // Получаем токен
                      var token = $(this);
                      // Расчитываем длительности "падения" слов
                      var duration = Math.random() * 2000;
                      // Устанавливаем таймаут (3 сек для знаков препинания и 0-2 сек для слов)
                      var timeout = token.text().search(/[:,.?!\-/="]/) != -1 ? 3000 : duration;
                      // Ожидаем таймаут
                      token.doTimeout( timeout, function(){
                          // Запускаем анимацию "падения" токенов
                          this.animate( { top: offset - token[0].offsetTop + 'px' }, {
                              queue: false,
                              duration: Math.random() * 200 + 800,
                              easing: 'bounceEaseOut'
                          });
                      });
                  }
              )
          }
      )
  });

Данный код работает только с чистым текстом. Можно, конечно, доработать его для "обрушения" сложного HTML-кода, но это уже выходит за рамки моего экспенимента.

---

Ссылки по теме:

• Cascade - Тот самый вирус на Википедии
• jQuery (использовалась версия 1.3.2)
• doTimeout plugin (использовалась версия 0.4)
• Animation Easing plugin

---

Цветные вкладки в браузере

Некоторые браузеры (например, Internet Explorer 8 или Firefox при помощи плагина) могут использовать цветовое кодирование вкладок для группировки взаимосвязанных ресурсов.
И мне, в связи с этим, подумалось... А что если бы веб-дизайнеры могли самостоятельно задавать фон вкладки для своего сайта? Например, вот так:  title { background: ... }

По моему, было бы весьма интересно.



Почему только "favicon"?...

---

С Новым кодом!

2010