Baraja - плагин для создания карточных эффектов

Есть несколько примеров, которые создают различные возможности перемещения элементов, например, перемещение элементов в сторону или вращение их в веером. Обратите внимание, что CSS трансформация и переходы работают только в браузерах, которые их поддерживают.

Для использования плагина, нам понадобится неупорядоченный список с классом "baraja-container", в нашем демо мы используем следующий код:

<ul id="baraja-el" class="baraja-container">
    <li>
        <img src="images/1.jpg" alt="image1"/>
        <h4>Coco Loko</h4>
        <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
    </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <!-- ... -->
</ul>

Плагин можно вызвать так:

$('#baraja-el').baraja();

Ниже приведен пример вызова плагина с некоторыми параметрами:

$('#some-button').on('click', function(event) {
    baraja.fan({
        speed : 500,
        easing : 'ease-out',
        range : 90,
        direction : 'right',
        origin : { x : 25, y : 100 },
        center : true,
        translation : 0
    });
});

Параметры

По умолчанию доступны следующие параметры:

// настройки
$.Baraja.defaults = {
    // если мы хотим указать селектор, который вызывает функцию next(). 
    // Например: '#baraja-nav-next'
    nextEl : '',
    // если мы хотим указать селектор, который вызывает функцию previous().
    prevEl : '',
    // скорость переходов по умолчанию
    speed : 300,
    // параметр смягчения переходов по умолчанию
    easing : 'ease-in-out'
};

Доступны следующие методы: fan(), next(), previous(), close(), add().

Настройки по умолчанию для метода fan следующие:

this.fanSettings = {
    // скорость открытия/закрытия
    speed : 500,
    // смягчение открытия/закрытия
    easing : 'ease-out',
    // Разница/диапазон возможных углов, которые будут иметь элементы
    // Например: при range:90 и center:false первый элемент будет иметь угол наклона 0 градусов, а последний - 90;
    // если center:true, тогда первый элемент будет иметь 45 градусов
    // а последний -45deg; в обоих случаях разница в 90 градусов
    range : 90,
    //определяет позицию первого элемента
    // (справа, слева)
    // и его угол (по часовой стрелке/против часовой стрелки)
    direction : 'right',
    // трансформация:
    // вы можете также передать minX и maxX значения, т.е. левое значение
    // будет варьироваться между minX и maxX
    origin : { x : 25, y : 100 },
    // дополнительный перевод каждого элемента
    translation : 0,
    // если карты должны быть отцентрированы после преобразования, то установите true
    center : true,
    // добавляет случайный фактор для финального преобразования
    scatter : false
};

Основные стили определяются в файле baraja.css, и вы можете увидеть пример настройки стилей в custom.css.

Демо содержит множество примеров возможностей плагина, а также содержит пример того, как добавить дополнительные элементы. Нажатие на первую карту будет сворачивать колоду карт. При нажатии на элемент внутри колоды будет перемещать его на первую позицию.

Обратите внимание, что в зависимости от того, сколько элементов у вас есть, они будут распространяться в соответствии с заданными параметрами. Поскольку элементы имеют абсолютное позиционирование, они могут располагаться за пределами экрана в зависимости от их количества, так что рекомендуется перепроверить, что они остаются в окне просмотра.