Baraja: раскинем карты

Baraja - экспериментальный и эффектный плагин jQuery, который позволяет перемещать элементы в стиле колоды карт на столе. Он использует трансформации CSS для вращения и перемещения пунктов. Доступны несколько опций, которые открывают большое количество вариантов перемещения элементов, например, для смещения в сторону или по кругу.

Обратите внимание , что трансформации и переходы 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().

Установки для метода по умолчанию:

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

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

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/HQHl-z-gzDQ/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Baraja: раскинем карты | | 2012-11-17 02:54:56 | | Статьи Web-мастеру | | Baraja - экспериментальный и эффектный плагин jQuery, который позволяет перемещать элементы в стиле колоды карт на столе. Он использует трансформации CSS для вращения и перемещения пунктов. Доступны | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: