Главная » CMS » Reflection, зеркальное отражение на MooTools

Reflection, зеркальное отражение на MooTools

Reflection.js для MooTools — это модифицированный вариант скрипта Reflection.js (зеркальное отражение), переписанный на основе JavaScript-фреймворка MooTools. Он позволяет мгновенно добавить эффект отражения для изображений в современных браузерах, имея довольно небольшой размер — всего 2кб.

Давайте на примере попробуем разобраться, как пользоваться этим скриптом. Для начала загрузим архив (в нем есть также mootools.js). Я взял свежую версию. На момент, когда вы будете использовать Reflection, возможно будет новая версия, поэтому найдите в конце поста ссылку на официальный сайт плагина и загрузите именно ее.

Итак создаем файл с расширение html для тестирования и в той же папке кладем рисунок. В моем случае это изображение легендарного советского танка Т-34 — файл tank.jpg.

HTML:

Теперь немного разберемся что к чему. Сначала мы делаем естественные вещи — подсоединяем MooTools и Reflection.


Далее говорим скрипту, какой именно рисунок следует обработать (добавить зеркальное отражение). В нашем случае — это изображение с id «testReflectionImg». Также в опциях можно задать прозрачность.

JavaScript:

Плагин корректно работает во всех современных браузерах (по заверению разработчика). Мною плагин проверен на Opera 11.11, Firefox 4.0.1 и Chrome 11+.

Официальный сайт плагина Reflection.

Кстати, веб-мастер, обрати внимание на новый бесплатный онлайн генератор HEX кода цвета.

Swedish House Mafia — One (Your Name) музыка дня

Программирование — программированием, но за окном лето и пора оторваться от монитора. Можно рвануть заграницу, а можно отдохнуть с комфортом для организма в .

Запись опубликована в рубрике CMS с метками , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>