Новости Статьи Статьи |
| Reflection - зеркальное отражение |
Вы на многих сайтах такое видели, хотели посторить и не знали как это работает. Многие делают это в фотошопе. Но есть путь намного проще. Создать эффект зеркального отражения для ваших фото очень просто.Для начала скачайте скрипт Reflection.js, а дальше начнем его настраивать. Установка Reflection Певрое вы уже сделали - скачали данный скрипт по ссылке выше. Второе: Добавить вызов скрипта в тег head
<script src="reflection.js" type="text/javascript"></script>
И последнее - изображениям, для которых нужно создать отражение, нужно добавить класс reflect.
<img src="my_image.jpg" class="reflect" />
Данный скрипт позволяет настраивать некоторые параметры эффекта отражения: 1. Прозрачность 2. Размер отражения
По умолчанию размер зеркального отражения равен половине высоты изображения, а уровень прозрачности равен 50%. Чтобы изменить эти параметры, нужно добавить классы rheight и ropacity со значениями высоты и прозрачности:
<img src="my_image.jpg" class="reflect rheight34 ropacity60" />
Нужно учесть особенность - если заданная вами высота будет больше чем размер изображения, то в Internet Explorer эффект будет отсутствовать.
Еще нужно учесть преобразования, которые осуществляет скрипт. ДЛя отображения используется контейнер div, для которого устанавливаются атрибуты style и class. Самому изображению назначается класс reflected. Например, это изображение:
<img src="my_image.jpg" class="reflect rheight34 ropacity60 my_class" style="float:left;margin:0 4px"/>
преобразуется в следующий вид:
<div class="my_class" style="float:left;margin:0 4px">
<img class="reflected" src="my_image.jpg" /> <canvas/> </div> Как мы увидели все очень просто. Мы можем за считанные секунды получить красивый эффект отражения, а так же управлять данным эффектом. Кроме того его корректно отображают все браузеры.
Добавить в любимые
Закладка
На почту
Кликов: 4181 Комментарии
(0)
|