Slicebox – новый 3D-слайдер для изображений

Основная идея заключается в создании трехмерных изображений "порезанных ломтиками", которые будут вращаться и показывать следующее изображение на следующей стороне 3D-объекта. В случае, если браузер не поддерживает 3D-преобразования, обычный слайдер будет использоваться в качестве запасного варианта.

Обратите внимание, что вы можете видеть 3D-эффект Slicebox только в браузере, который поддерживает эти свойства CSS3.

Изображения, используемые в демо от ND Strupler. Они распространяется на условиях лицензии Attribution 2.0 Generic (CC BY 2.0).
Использование

Для того чтобы использовать Slicebox, разместите ваши изображения в виде неупорядоченного списка с классом "sb-slider":

<ul id="sb-slider" class="sb-slider">
    <li>
        <a href="#" target="_blank">
            <img src="images/1.jpg" alt="image1"/>
        </a>
        <div class="sb-description">
            <h3>Описание</h3>
        </div>
    </li>
    <li>
        <img src="images/2.jpg" alt="image2"/>
        <div class="sb-description">
            <h3>...</h3>
        </div>
    </li>
    <li><!-- ... --></li>
    <!-- ... -->
</ul>

Вы можете использовать DIV с классом "sb-description", чтобы добавить описание для соответствующих изображений. Как показано в этом примере, вы также можете добавить анкор для изображения.

Затем вы можете вызвать плагин:

$('#sb-slider').slicebox();

Настройки

Slicebox имеет набор параметров, которые можно настроить для различных типов эффектов:

$.Slicebox.defaults = {
    // ориентация (v)-вертикальная, (h)-горизонтальная или (r)-рандомная
    orientation : 'v',

    // значение перспективы
    perspective : 1200,

    // количество ломтиков
    // нужно чтобы было четное число от 15 до 0 (если вы хотите увеличить лимит,
    // измените функцию the _validate).
    cuboidsCount : 5,

    // если true тогда количество ломтиков будет рандомным (cuboidsCount is overwitten)
    cuboidsRandom : false,

    // the range of possible number of cuboids if cuboidsRandom is true
    // it is strongly recommended that you do not set a very large number :)
    maxCuboidsCount : 5,

    // each cuboid will move x pixels left / top (depending on orientation).
    // The middle cuboid doesn't move. the middle cuboid's neighbors will
    // move disperseFactor pixels
    disperseFactor : 0,

    // цвет скрытых сторон
    colorHiddenSides : '#222',

    // the animation will start from left to right. The left most
    // cuboid will be the first one to rotate
    // this is the interval between each rotation in ms
    sequentialFactor : 150,

    // скорость анимации
    // this is the speed that takes "1" cuboid to rotate
    speed : 600,

    // transition easing
    easing : 'ease',

    // если true, то slicebox будет начинать анимацию автоматически
    autoplay : false,

    // время (ms) между каждым поворотом, если анимация автоматическая
    interval: 3000,

    // the fallback will just fade out / fade in the items
    // this is the time fr the fade effect
    fallbackFadeSpeed : 300,

    // callbacks
    onBeforeChange : function( position ) { return false; },
    onAfterChange : function( position ) { return false; }
};

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

Надеюсь, что вам понравилось!

Источник