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

При помощи CSS 3D Transforms мы можем создать множество интересных эффектов, вращая элементы в трехмерном пространстве. Slicebox использует свойства 3D transforms и позволяет создавать эффекты различных типов. Основная идея заключается в создании трехмерных изображений "порезанных ломтиками", которые будут вращаться и показывать следующее изображение на следующей стороне 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; }
};

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

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

Демонстрация

Проект на Github.

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии  

#1 Илья 27.04.2015 08:50
Классный слайдер, подскажите, как сделать, чтобы слайды менялись автоматически, а не при нажатии на кнопку ПЛЭЙ.
Спасибо
#2 adminv15 02.05.2015 12:23
в конце статьи описаны настройки слайдера, установите autoplay : true

You have no rights to post comments