Блог

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

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

Code

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

Плагин назовем так:

Code

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

Опции

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

Code

// the options
$.PFold.defaults = {
  // perspective value
  perspective : 1200,

  // each folding step's speed
  speed : 450,

  // each folding step's easing
  easing : 'linear',

  // delay between each (un)folding step (ms)
  folddelay : 0,

  // number of times the element will fold
  folds : 2,

  // the direction of each unfolding step
  folddirection : ['right','top'],

  // use overlays to simulate a shadow for each folding step
  overlays : true,

  // the main container moves (translation) in order to keep its initial position
  centered : false,

  // allows us to specify a different speed for the container's translation
  // values range : [0 - 1]
  // if 0 the container jumps immediately to the final position (translation).
  // this is only valid if centered is true
  containerSpeedFactor : 1,

  // easing for the container transition
  // this is only valid if centered is true
  containerEasing : 'linear',

  // callbacks
  onEndFolding : function() { return false; },
  onEndUnfolding : function() { return false; }
};