Специальные эффекты украшают веб-странцу
Постоянная анимация, которой нередко перегружены веб-сайты, нередко вызывает раздражение у пользователей, но изменения, выполняющиеся в ответ на действия посетителя сайта, у большинства вызывают положительные эмоции. Некоторые приемы оживления содержимого продемонстрированы на этой странице. Для реализации эффектов применяется известная библиотека MooTools, позволяющая с помощью простых программ, написанных на языке JavaScript, создавать достаточно сложные и оригинальные спецэффекты.
Отдельно следует отметить тот факт, что если в браузере пользователя JavaScript не поддерживается, все страницы будут правильно функционировать, хотя дополнительные эффекты, естественно, пропадут. Точно так же страницы будут корректно индексироваться поисковыми системами, что сегодня немаловажно.
Пример аккордеона
Эффект, называемый аккордеоном, позволяет вывести больше информации в ограниченном пространстве. Если при традиционном способе несколько разделов выводятся последовательно, и для просмотра используется прокрутка, в аккордеоне выводится только один из разделов и заголовки остальных. Щелкнув мышью на заголовке, вы откроете соответствующий раздел, при этом ранее просматриваемый раздел закроется. Следует отметить, что при отключенной поддержке JavaScript все разделы выводятся последовательно, как при обычном просмотре. Так же последовательно разделы читаются роботами поисковых систем.
Щелкните мышью на заголовке, чтобы открыть один из разделов аккордеона
Всплывающие подсказки
При выводе некоторых текстов полезными окажутся контекстные подсказки, появляющиеся на экране. При наведении на слово указателя мыши, рядом появляется небольшое поле с подсказкой. Точно такие же подсказки можно назначать изображениям.
Если в обычном варианте всплывающие подсказки выглядят не слишком красиво, вот так, то с помощью библиотеки MooTools и таблиц стилей вы можете придать всплывающим элементам более интересный внешний вид.
В этом примере все слова, для которых имеются подсказки, отмечены жирным шрифтом. При наведении указателя мыши на любое из этих слов рядом медленно появляется всплывающая подсказка. Чтобы убрать подсказку с экрана, достаточно отвести указатель мыши от слова.
Конечно, в реальном тексте вряд ли следует размещать так много подсказок, как в этом небольшом примере, но какое-то количество всплывающих подсказок заметно оживят любой документ.
Метаморфозы
Нередко оформление некоторых элементов страницы должно меняться при наведении на них указателя мыши. Чаще всего такое поведение характерно для элементов меню, но иногда полезно менять и другие фрагменты веб-страниц. Изменения могут происходить и при других действиях пользователя, например при щелчке мышью, причем щелчок может приходиться на один объект, а меняться будет другой. Например, щелкнув мышью по надписи, вы можете временно подсветить фрагмент текста.
Оформление фрагментов веб-страниц может меняться в значительной степени. Например, при наведении указателя мыши на текст, расположенный ниже, меняются не только цвета текста и фона, но и размеры шрифта, отступы и некоторые другие параметры.
Изменение оформления фрагментов в ответ на действия пользователя
Наведите указатель мыши на этот объект, чтобы он изменился.
Обратите внимание, что изменения с объектом происходят постепенно, причем длительность метаморфоз можно задать в программе. Конечно, современные средства компьютерной анимации позволяют реализовывать намного более сложные превращения, но и такие преобразования, как в этом примере, могут придать оригинальности любой веб-странице.
Изменение цвета фона
В некоторых случаях требуется изменить стандартное поведение средств управления. Например, колесо мыши используется для прокрутки страниц, но можно сделать так, что с его помощью посетитель сайта сможет менять цвет фона или размер отдельного элемента. При этом вне границ объекта функции колеса останутся стандартными.
Меняйте цвет с помощью колеса мыши
Установите указатель мыши на этом прямоугольнике и прокрутите колесо для изменения цвета фона
Рассмотренные эффекты – только малая часть возможностей, предоставляемой библиотекой MooTools. Конечно, применение каждого эффекта требует дополнительных усилий при создании веб-страниц, но в результате вы получаете интерактивный и красивый сайт, отвечающий современным требованиям.
