PFold: Paper-Like эффект разворачивающейся бумаги

PFold - экспериментальный плагин jQuery, который формирует эффект разворачивающейся бумаги при открытии элементов. Элементы разворачиваются в 3D для вывода дополнительного содержания. Идея заключается в организации нескольких слоев свертки, на каждом шаге размер элемента удваивается, что имитирует разворачивание бумаги. 

Доступны несколько опции для настройки. Например, можно определять направление разворачивания для каждого шага и количество шагов.

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

Для использования плагина применяется следующая структура разметки:

Code
<div id="uc-container" class="uc-container">
  <div class="uc-initial-content">
  <!-- Начальное содержание -->
  </div>
  <div class="uc-final-content">
  <!-- Развернутое содержание -->
  </div>
</div>


Размер развернутого содержания зависит от размера начального содержания (определяется в CSS), направлений разворотов и количества шагов. Например, начальный элемент шириной и высотой 200px, разворачивающийся вниз и влево за два шага образует развернутую область размером 400х400px

Плагин вызывается следующим образом:

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


Опции

Доступны следующие опции:

Code
// Опции
$.PFold.defaults = {
  // Значение перспективы
  perspective : 1200,
   
  // Скорость разворачивания каждого шага
  speed : 450,
   
  // Функция разворачивания каждого шага
  easing : 'linear',
   
  // Задержка между шагами (мс)
  folddelay : 0,
   
  // Количество шагов разворачивания
  folds : 2,
   
  // Направление разворачивания
  folddirection : ['right','top'],
   
  // Использование слоя для имитации тени для каждого шага разворачивания
  overlays : true,
   
  // Перемещение основного контейнера для сохранения исходной позиции
  centered : false,
   
  // Можно определить другую скорость для перемещения контейнера
  // Диапазон: [0 - 1]  
  // Если 0, то контейнер мгновенно перемещается в конечное положение.
  // Используется совместно с опцией centered:true
  containerSpeedFactor : 1,
   
  // Функция перехода для перемещения контейнера
  // Используется совместно с опцией centered:true
  containerEasing : 'linear',
   
  // Возвратные функции
  onEndFolding : function() { return false; },
  onEndUnfolding : function() { return false; }
};

  • FalleN

  • 2412

  • 1

  • 234

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!