PFold: Красивый эффект разворота бумаги

jQuery 27.04.2013

Красивые эффекты заполонили сердца веб-мастеров, с выходом jQuery сайтостроение изменилось в корни, появились новые возможности, стали появляться различные плагины, подключив которые можно достичь невиданные ранее эффекты. Буквально на каждом сайте можно найти различные изображения, которые оформлены достаточно просто без всяких эффектов. В данном уроке мы рассмотрим как скрасить изображения и не только применив интересный плагин для разворота. PFold является очень экспериментальным jQuery плагином.

ДЕМО

ИСХОДНИКИ

Для браузеров, которые не поддерживают трансформации CSS 3D и переходы, для них будет выводится запасной вариант. В демонстрации мы рассмотрим несколько вариантов использования плагина.

Шаг 1. HTML

Для начала мы рассмотрим построение разметку, которая достаточно простая, нам понадобится контейнер с содержанием.

<div id="uc-container" class="uc-container">
 <div class="uc-initial-content">
 <!-- Начало содержания -->
 </div>
 <div class="uc-final-content">
 <!-- Конец содержания -->
 </div>
</div>

Теперь вызов самого плагина, для этого разместите ниже приведенный код в необходимом документе, заключив данный код в теги <script> и</script>.

$('#uc-container').pfold();

C разметкой закончили, теперь перейдем к следующему шагу.

Опции

Рассмотрим некоторые опции плагина которые можно настроить на свое усмотрение.

// Опции
$.PFold.defaults = {
 // perspective value
 perspective : 1200,

 // Скорость шага
 speed : 450,

 easing : 'linear',

 // Задержка между каждым шагом
 folddelay : 0,

 // Количество элементов
 folds : 2,

 // Направления каждлго шага
 folddirection : ['right','top'],

 // Имитация теней при накладке
 overlays : true,

 // Движения контейнеера, чтобы сохранить свое первоначальное значение
 centered : false,

 // Задаем различные скорости для разворота
 значение : [0 - 1]

 containerSpeedFactor : 1,
 containerEasing : 'linear',

 // Обратные вызовы
 onEndFolding : function() { return false; },
 onEndUnfolding : function() { return false; }
};

Каждый элемент расписан, более детально останавливаться не будем.