Запись была отнесена к рубрике «JavaScript» 16.02.2008, Сб в 05:11. Вы можете следить за общением по теме этой записи с помощью RSS 2.0 ленты. Вы можете оставить отзыв, или trackback с Вашего сайта.
- RSS
- SVN
- HTML
Эффект всплеска при клике
Порочно угнездившееся во многих умах «красота спасет мир» заставляет вышеупомянутый мир биться в конвульсиях и постанывать от очередной попытки привести его к точке благоденствия.
Представим, что история предшественников ничему нас не научила и украсим document.body со всей жестокостью, на которую способен человеческий разум в погоне за прекрасным — заставим страничку откликаться всплеском как от хорошо булькнувшего в болоте камешка.
Нам понадобится Mootools, редактор Flash, чувство меры, руки и непредвзятое отношение ко всему, что будет дальше.
Что необходимо получить
Нет нужды перебирать достоинства или недостатки flash. Как в случае со многими технологиями необходимо просто прийти к решению использовать его или отказаться. В этом примере мы решили закрыть глаза на все минусы и применить в качестве фундамента.
Озадачимся созданием анимационного эффекта всплеска от клика на канве страницы с поддержкой полупрозрачности.
следует заметить
Эффект надо бы назвать псевдовсплеском ввиду того, что он не деформирует поверхность как это есть при реальных кругах на воде.
Также необходим механизм выборочного отключения эффекта для различных элементов и их групп.
Эффект в действии
Если вы хотите что-либо изучить, а не выучить, то лучший способ этого добиться — смотреть код самостоятельно. Документация это замечательно, код — лучше. Поэтому рекомендуется просто заглянуть в код этой страницы. Для нетерпеливых выборочные участки кода приведены ниже.
В самом простом случае включение эффекта осуществляется подключением pellet.js и созданием объекта эффекта:
<html>
<head>
//…
<script type="text/javascript" src="/js/pellet.js"></script>
//…
</head>
<body>
<script type="text/javascript">
var myPellet;
window.addEvent('domready', function(){
myPellet = new pellet();
});
</script>
</body>
</html>
Смысл заключается в создании объекта после загрузки всего дерева элементов страницы. Реализуется это силами Mootools в теле обработчика нестандартного события onDomReady. Это все.
Подгонка эффекта
Как изменить цвет всплеска, его размеры, фактуру? Просто откройте pellet.fla и рисуйте. Стоит, однако, помнить, что если вы изменили габариты flash-ролика, то об этом надо сообщить и js-части.
Для того чтобы задать элементы при клике на которых эффект воспроизводиться не будет, используется один из параметров конструктора exclude. Параметр представляет собой строку, где через запятую в синтаксисе CSS перечислены правила для исключаемых элементов.
на заметку
Mootools — правильный «браузер» и поддерживает большинство из всех мыслимых комбинаций селекторов. Обратитесь к шпаргалке по CSS, если хотите узнать о них больше. Это автоматически расширит ваши возможности в исключении элементов из «поля видимости» эффекта.
Немного примеров:
var myPellet = new pellet(); /* все параметры по умолчанию: ролик находится по /flash/pellet.swf ширина: 50px высота: 50px исключаемые элементы: *[disabled], input[type=text], input[type=checkbox], input[type=radiobutton], textarea, select */
myBluePellet = new pellet({flash: '/flash/bluePellet.swf'});
/*
ролик находится по /flash/bluePellet.swf
все остальные параметры по умолчанию:
ширина: 50px
высота: 50px
исключаемые элементы: *[disabled], input[type=text], input[type=checkbox], input[type=radiobutton], textarea, select
*/
myCustomPellet = new pellet({flash: '/flash/customPellet.swf', width: 40, height: 40, exclude: '#header, div.blackHole, input[type~=submit]'});
/*
все параметры переопределены:
ролик находится по /flash/customPellet.swf
ширина: 40px
высота: 40px
исключаемые элементы: #header, div.blackHole, input[type~=submit]
*/
Подводные камни и нюансы
- Когда начинать? Создание объекта должно произойти только после полной загрузки объектной модели документа. IE, например, имеет дурную привычку выводить сообщение о невозможности загрузить страницу при попытке писать в еще не загрузившийся document.body.
- IE и фоновое изображение. IE иногда глючит, забывая обновить фоновую картинку после того как всплеск исчез. В этом можно убедиться, кликнув на грани градиентного фона внизу страницы.
- Linux. В большинстве дистрибутивов Linux и Unix наблюдается отвратительная поддержка прозрачного фона flash-ролика — ее попросту нет. Ужасное зрелище, особенно на темных страницах. Рекомендуется определять тип платформы чтобы не использовать эффект который плохо поддерживается.
примечание
В Mootools 1.2dev имеется набор свойств Client.Platform который поможет в детектировании платформы. К сожалению, это полезное семейство отсутствует в версии 1.11 которая является стабильной веткой фреймворка.
- Когда лучше? В случае светлой странички — мелкие цветовые артефакты эффекта заметны менее, да и оттенки видны лучше.
- Минус. Заключается он в перекрытии собой на время проигрывания всего, что находится под ним. Например, в случае сгруппированных рядом чекбоксов не всегда получится с должной скоростью прощелкать по всем ним — клик будет попадать по «всплеску».
Заключение
В качестве вкусного напоследок будет архив с примерами, исходниками двух «плюх», их swf версиями и самим js-классом. Приятного аппетита чтения.
2 комментария на «Эффект всплеска при клике»
Оставить отзыв
Ну что-же вы столько дивов плодите! Надо очищать дом после себя.
На каждый клик по обжекту создавать и не удалять их!
+ появляется очень неприятное побочное действие, когда кликаешь и попадаешь на уже созданную флешку, то она выделяется и виден квадрат!
Как невнимательно :), видимо выбросил вызов деструктора при переводе на MT. Вы молодец.