Демонстрация работы эффекта «Волшебная палочка»

Описание

На странице продемонстирован эффект «Волшебная палочка». Эффект представляет из себя курсор, заменённый на изображение волшебной палочки (файл в архиве, можете его заменить), из которого сыплются чёрные пузыри (это такая оригинальная волшебная палочка :)),

(Если вы не видете на этой странице ничего подобного, значит, к сожалению, ваш браузер не способен отобразить данный эффект — смотрите системные требования)

Кое-что о принципе работы даного скрипта можете прочитать здесь: mysitez.km.ua/Programming/?javamfx

Содержание архива

В архиве есть:

  1. файл “mwand.js” — основной файл, содержащий скрипт
  2. файл “wand.cur” — курсор, который используется в эффекте
  3. файл “readme.html” — этот самый файл, который вы читаете
  4. папка “images” c gif-файлами — изображениями частиц

Сам архив лежит в инете по адресу: mysitez.km.ua/Downloads/files/magicwand.zip

Возможности

Кроме движения мышью, скрипт также реагирует на нажатия клавиш и на щелчки кнопкой мыши (попробуйте). При удерживании нажатой клавиши клавиатуры, из курсора будут сыпаться пузыри, однако гораздо дальше, чем обычно. Щелчок мыши (как и однократное нажатие клавиши) вызывает испускание курсором одной частицы.

Системные требования

Эффект тестировался (и гарантированно работает) на браузерах семейства Internet Explorer 6.0. Однако, вполне возможно (не проверял) что скрипт будет также работать на более младших версиях IE (например 5.0 или 5.5).

Скрипт абсолютно не тормозит на системе с Athlon 2500+ и 512 Mb памяти, при нескольких запущенных ресурсоемких приложениях (при тестировании был запущен Photoshop, а также 3D Studio MAX 6, рендерящий картинку 1200×800). Соответственно, у меня есть надежда, что и на более слабых компьютерах работа скрипта не будет тормозить систему.

Но даже если вы обнаружите что у вас скрипт работает медленно, можете уменьшить количество используемых частиц (см. коментарии в файле скрипта)

Установка скрипта

Скрипт с эффектом очень легко подключается к любой HTML-странице. Для этого нужно:

  1. Положить в каталог вашего сайта файл “mwand.js”.
  2. На страницах, где вам необходим данный эффект, в разделе <body></body> (желательно в начале) вставить:
    <script language=javascript src="путь/mwand.js"></script>
    <script language=javascript>initRibbon();</script>
    
    Обратите внимание, чтобы путь соответствовал местоположению файла “mwand.js”.
  3. Все, можно наслаждатся эффектом.

Модификация

Для модификации эффекта, вы можете заменить изображения пузырей (файлы папки “Images”) на свои собственные, который более соотвествуют вашему представлению о волшебных палочках, или более подходят по стилю вашему сайту. Также вы можете заменить файл курсора, для придания палочке подходящего внешнего вида.

Недостатки

Есть. Например, при большом размере картинок-частиц (большом, значит больше 3 пикселей) появляется проблема с нажатием ссылок (картинки, которые «толпятся» возле курсора, не дают пробится до ссылки). Это вы можете наблюдать в даном примере. Лечится путем использования маленьких картинок, либо уменьшения их количества.

Лицензионное соглашение

...э-э-э, ну да — вам продавать эту штуку нельзя. Только дарить ;)


mysitez.km.ua © Сергей Василенко akи mickron, 2004.