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

в 21:18, , рубрики: jquery, веб-дизайн, Веб-разработка, метки:

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

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

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

В браузерах, не поддерживающих 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

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js