690
 

Скрипты зеркального отражения

Не так давно я написал заметку о reflection.js – скрипте, создающем зеркальные отражения для изображений. Пару дней назад я нашел похожий скрипт Reflection.js for Mootools, который может делать то же самое, но с библиотекой Mootools, а вчера наткнулся на еще более продвинутый скрипт – reflex.js. Помимо создания простого отражения, reflex.js может поворачивать их вокруг своей оси, создавая эффект Cover Flow.

reflex.js - эффект Cover Flow

Параметры прозрачности, отступ отражения, границы изображений, углы наклона – всё это очень легко настраивается. Нужно просто указать необходимые классы для изображений.

Дополнительно, в дистрибутиве имеется скрипт cvi_reflex_lib.js, который добавляет еще больше гибкости. Подключив его вместо reflex.js, вы сможете заставить изображения реагировать на действия пользователя – например, если пользователь наводит мышкой на изображение, ее тень изменяет прозрачность, а изображение слегка поворачивается.

Скачать скрипт и посмотреть демо и инструкции можно здесь. Также советую посмотреть список проектов на этом же сайте: http://www.netzgesta.de/cvi/. Все перечисленные там скрипты (их там 12), предназначены для придания специальных эффектов изображениям – создание закругленных углов, превращение изображений в слайды, создание изображений с размытыми границами и многое другое.

ddmenu – контекстное меню на Mootools

ddmenu – это простой скрипт, основанный на Mootools, и позволяющий создавать собственные контекстные меню для разных элементов на странице. По умолчанию, вид меню очень похож на системное – с иконками слева, заголовком меню, но вид можно изменять из подключаемой таблицы стилей. Появляется меню плавно, с применением fade эффекта (можно настраивать). Также можно активировать/деактивировать любые элементы меню. Браузеры, в которых протестирован скрипт – Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 под Windows. Firefox 2, Safari 3 под Mac OS X.

Контекстное меню

В комбинации с нажатой клавишей CTRL, щелчок правой кнопкой мыши покажет меню браузера, а при нажатой клавише SHIFT будут показаны оба меню.

<< читать дальше >>

Mootools для начинающих – работа с элементами и событиями

Этот туториал предназначен для тех, кто делает первые шаги в изучении библиотеки Mootools. Здесь я рассмотрю две основные задачи, без которых практически не обходится ни один скрипт – это получение ссылок на элементы документа и добавление обработчиков событий к ним.

<< читать дальше >>

Скрипт виртуальной клавиатуры

Виртуальные клавиатуры чаще всего используются на веб сайтах, требующих максимального уровня безопасности, защищая нас от всяких клавиатурных шпионов. Также такая клавиатура полезна, если у вас нет нужной раскладки; например, клавиатура только на английском, а нужно ввести русский текст.

Этот скрипт виртуальной клавиатуры поможет вам создать динамически появляющуюся клавиатуру возле текстовых полей. Скрипт поддерживает множество языков, в том числе и русский, и протестирован в большинстве браузеров – Internet Explorer, Firefox, Opera, Safari и др.

Виртуальная клавиатура

Для подключения скрипта нужно добавить следующие две строки в <head>:

<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css" />

В текстовые поля, для которых нужно добавить виртуальную клавиатуру, нужно добавить класс “keyboardInput”:

<input type="text" value="" class="keyboardInput" />

Это все, в результате, возле текстовых полей появится маленькая иконка, по нажатию на которую будет появляться клавиатура.

Посмотреть примеры можно на сайте автора.

Как сделать полупрозрачный ролловер на jQuery

В этой статье я покажу простой метод создания полупрозрачной подсветки (т.н. ролловер) элементов меню, который создает эффект мягкого фонового свечения. Эффект работает во всех браузерах, включая IE 6 – это возможно за счет использования полупрозрачных изображений в формате png и скрипта pngfix для вышеупомянутого браузера. Результат будет примерно следующим:

Полупрозрачный ролловер

Этот метод был создан Брюсом Крозе (Bruce Kroeze), статью которого можно найти здесь.

<< читать дальше >>

JSToolbox создан на основе WordPress