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

По теме