jQuery.reflect — эффект отражения для текста и изображений
Дата публикации: 01.06.2011
Задача
Получить гибкий инструмент для добавления эффекта отражения.
Требования
- гибкость: отражение должно добавляться автоматически к любым изображениям и элементам содержащим текст, не требуя от администратора ресурса производить предподготовку изображений и/или правок CSS;
- независимость от фона;
- простота использования;
- возможность настройки отражения: удаленность от оригинала, скорость затухания и тому подобное.
Решение
Демо пример использования jquery.reflect на однородном фоне и на неоднородном. Или забрать архивом. Проверено в:
- IE 6-9
- Firefox 4
- Opera 11
- Safari 5
- Chrome
Что качать
Быстрый старт
Подключаем необходимые скрипты и инициализируем плагин:
<script src="path-to/jquery-min.js"></script>
<script src="path-to/jquery.reflect-0.1.min.js"></script>
<script>
window.onload = function() {
var reflectOptions = {
el: ".reflect",
height: 0.7,
opacity: 0.5,
distanceV: 3,
addHeight: true,
IEbackground: "white"
}
reflection(reflectOptions);
};
</script>
Элементу, к которому будет применен эффект отражения добавляем одно обязательное правило:
.reflect {
position: relative;
}
Параметры
| el | элемент, к которому будет применен эффект. Доступны селекторы jQuery (например, #id-name, .class-name any-element) |
|---|---|
| height | высота отражения. Значение в диапазоне от 0 до 1. При значении меньше 1 отражение не искажается, а обрезается |
| opacity | начальная прозрачность отражения. Конечное значение всегда 0 (эффект растворения) |
| distanceV | отступ по вертикали отражения от оригинала. Положительные значения удаляют отражение, отрицательные приближают. |
| addHeight | может принимать два значения: true (увеличить высоту элемента на высоту отражения), false (не увеличивать). изменение размеров элемента иногда полезно, когда есть желание чтобы другие элементы (в нормальном потоке) не закрыли отражение. |
| IEbackground | нужно для фикса бага в IE с применением фильтра |
В текущей версии при инициализации обязательно нужно задавать все параметры (при апдейте устраню).
Некоторые тонкости
- При применении эффекта к изображению, изображение оборачивается контейнером, которому передаются стили позиционирования изображения (position, float, margin) переносится class. Делается для того, чтобы после применения эффекта картинка осталась на том же месте.
- Если применяется эффект к изображению, которое обрамлено ссылкой, то отражение ссылкой не будет (сделано специально).
- Если нужно применить эффект для текстовой ссылки и при этом не хочется чтобы отражение было ссылкой, тогда эффект нужно применять к обертке для ссылки (смотри меню на демо примере).
- Некоторые техники подсмотрены в reflection.js
По теме
Показать комментарии