Красивые эффекты заполонили сердца веб-мастеров, с выходом 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; }
};Каждый элемент расписан, более детально останавливаться не будем.
Вот и все. Готово!
Материал взят из зарубежного источника - tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect и представлен исключительно в ознакомительных целях.
