jquery.flip — плагин для переворота контента

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

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

• Демо пример 1. Блок крутится по команде, причем в любую сторону.
• Демо пример 2. Вращение блоков с разной скоростью.

Проверено в:

• 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()

Примеры:

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

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

Минус:

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

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

Выводы

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

Материал

• Flip! А jquery plugin v 0.9.9