- PVSM.RU - https://www.pvsm.ru -

PFold — очень необычный лайтбокс на jQuery

PFold — jQuery-плагин с необычной 3D-анимацией.

PFold — очень необычный лайтбокс на jQuery

Демонстрация [1] Скачать исходники [2]

В браузерах, не поддерживающих CSS 3D transforms или transitions, изображения просто будут увеличиваться без анимации.

Вызов на странице:

<div id="uc-container" class="uc-container">
    <div class="uc-initial-content">
        <!-- initial content -->
    </div>
    <div class="uc-final-content">
        <!-- final content -->
    </div>
</div>

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

Настройки плагина:

// 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; }
};

Автор: grokru


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/17518

Ссылки в тексте:

[1] Демонстрация: http://koulikov.com/wp-content/uploads/2012/10/pfold/

[2] Скачать исходники: http://koulikov.com/wp-content/uploads/2012/10/pfold/PFold.zip