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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
"Если технология меняется почти каждый день, нет смысла нанимать человека потому, что он обладает специфическим набором профессиональных навыков - все равно эти навыки скоро устареют. Вам нужно стараться принимать на работу людей, которые обладают широкими универсальными способностями к решению проблем, каким бы трудным это ни оказалось." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.