jquery.flip — переворот контента

Автор: Александр Головко Дата публикации: 15.06.2010
иллюзия вращения

Рассмотрим плагин, который реализует интересный эффект — создает иллюзию вращающегося контента. Речь о плагине Flip-jQuery (автор Luca Manno).

На практике это выглядит так:

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

Что качать?

  • jquery.js (55.9 Kb) — библиотека jQuery версии 1.3.2
  • jquery.flip.0-9-9.zip (11.96 Kb) — в архиве jquery-ui-1.7.2.custom.min.js (библиотека, которую использует плагин), jquery.flip.min.js и jquery.flip.js (сам плагин в сжатом и несжатом виде)

Быстрый старт

Подключаем jQuery, библиотеку jQuery UI и сам плагин:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.min.js"></script>

В HTML блоку, который хотим осчастливить умением крутиться, прописываем id:

<div id="flipBox">
	Будем кувыркаться!
</div>

В CSS для наглядности зададим оформление — размеры, цвет.

#flipBox{
	width:200px;
	height:100px;
	background:#539127;
	color:#fff;
	text-align:center;
}

В простейшем варианте блок кувыркнется после загрузки страницы. Для этого добавляем такой скрипт:

<script type="text/javascript">
jQuery(document).ready(function(){
// Смертельный номер - #flipBox будет кувыркаться rl - справа налево
jQuery("#flipBox").flip({
	direction:"rl",
	color:"#539127"
});
});
</script>

А теперь подробнее

Определены две функции:

flip выполняет переворот, согласно заданным параметрам (список см. ниже).
revertFlip выполняет переворот, обратный последнему сделанному с помощью flip. Если предварительного вызова flip не было — ничего не произойдет. Параметров нет.

Прараметры flip()

content определяет новый контент переворачивающегося блока. Представляет собой HTML, текст или объект jQuery.
direction направление переворота:
  • tb — сверху вниз (по умолчанию)
  • bt — снизу вверх
  • lr — слева направо
  • rl — справа налево
color цвет фона элемента после переворота. Осторожно! Определено значение по умолчанию — #999
speed скорость анимации (мс). Значение по умолчанию 500
dontChangeColor флаг определяет окрашивать ли после поворота блок в цвет color:
  • false — не окрашивать (по умолчанию)
  • true — окрашивать
onBefore функция, которая выполнится перед анимацией.
onAnimation функция, которая выполнится на середине анимации.
onEnd функция, которая выполнится после анимациии.

Примеры:

Переворот справа налево, цвет блока после окончания — белый:

jQuery("#flipBox").flip({
	direction:"rl",
	color:"#fff"
});

Переворот сверху вниз, время переворота 1 секунда:

jQuery("#flipBox").flip({
	direction:"tb",
	speed: 1000
});

После окончания переворота выполняем функцию JS (в данном случае выводим окошко с сообщением):

jQuery("#flipBox").flip({
	direction:"tb",
	onEnd: function(){
			alert("перевернулись!");
	}
});

Некоторые особенности

К сожалению, плагин не реализует именно поворот контента, а только эмулирует его. Это хорошо видно, если вращаемому контенту задать фоновый рисунок. См. пример. При повороте контент сереет, а после полного оборота фоновый рисунок появляется вновь!

Второй особенностью является то, что для color (напомню — цвет фона элемента после окончания переворота) определено значение по-умолчанию #999. Поэтому, если явно не задать color, блок автоматически «посереет». В текущей (на момент публикации) версии плагина 0.9.9 введен параметр dontChangeColor. Который можно установить в true, чтобы запретить такое изменение цвета.

Так же в IE6 анимация переворота происходит несколько по-другому, чем в остальных браузерах. Визуально блок во время вращения как бы отезжает чуть назад, а потом возвращается на место. Эффект не становиться ни лучше ни хуже. Просто немного по-другому.

Плюсы:

  • адекватно работает во всех популярных браузерах;
  • умеет вращать 4-мя способами (сверху вниз, снизу вверх, справа налево, слева направо);
  • настраивается скорость вращения;
  • есть возможность вызывать функции до начала вращения, в его середине и после окончания;
  • можно динамически изменить вращаемый контент.

Минус:

  • в момент вращеня контент визуально заменяется на серый прямоугольник.

Считать этот минус фатальным было бы неправильно, так как решения, реализующие именно вращение (с плавной анимированной отрисовкой вращаемого блока) на данный момент нам неизвестны.

Выводы

Имеем толковый плагин. Рекомендуется для реализации эффекта переворота контента.

Материал