PFold — jQuery-плагин с необычной 3D-анимацией.
Демонстрация Скачать исходники
В браузерах, не поддерживающих 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