—»     —»   StackSlider: забавный трехмерный слайдер изображений
  Раздел: Скрипты и коды   Нет комментариев  

StackSlider: забавный трехмерный слайдер изображений



StackSlider представляет собой экспериментальный слайдер изображений на jQuery, который позволяет вам представить миниатюры галереи различными способами, используя трехмерные трансформации на CSS3 и перспективу. Идея заключается в том, чтобы перемещаться по стопке изображений, а эффект напоминает будто кто-то поднимает изображение с самого верха, и перемещает его к центру контейнера для просмотра, а предыдущее просмотренное изображение перемещается в другую стопку.

StackSlider: забавный трехмерный слайдер изображений

Демо представит вам иллюстрации Isaac Montemayor. Вы можете посмотреть другие работы автора на странице в Dribbble, либо на личном сайте.

Пожалуйста учтите, что этот плагин еще не прошел тщательного тестирования. Но очевидно то что трехмерный эффект будет работать только в тех браузерах, где есть соответствующая поддержка. Запасной вариант будет просто отображать и скрывать изображения. Эффект выглядит гораздо более плавным в браузерах семейства WebKit.

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

<ul id="st-stack" class="st-stack-raw">
<li>
<div class="st-item">
<a href="http://drbl.in/fgQV">
<img src="images/1.jpg" />
</a>
</div>
<div class="st-title">
<h2>Graverobber</h2><h3>by Isaac Montemayor</h3>
</div>
</li>
<li> <!-- ... --> </li>
<li> <!-- ... --> </li>
<li> <!-- ... --> </li>
<!-- ... -->
</ul>

Класс st-stack-raw используется не только для того, чтобы скрывать список, когда включен JS. Он может быть использован для стилизации списка, если в браузере будет отключен JS.

Плагин можно запустить следующим образом:

$( '#st-stack' ).stackslider();

Будет сгенерирована новая структура со списком пунктов, двумя стопками, контейнером заголовка и навигацией.

Опции

Также доступны следующие стандартные опции:

// default transition speed
speed : 700,

// default transition easing
easing : 'ease-in-out',

// render both piles
piles : true

Стили указываются в файле style.css, и здесь также используются media queries для настройки размера миниатюр и расположения навигации и заголовка. Если вам хочется опробовать этот плагин, вы можете изменить значения media queries, подстроив плагин под ваш контейнер и размеры изображений.

Проект на GitHub

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: слайд-шоу, CSS, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 5394   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Промышленное колесо
Огромный выбор поворотных и неповоротных колес для оборудования и тележек
promyshlennoe-koleso.ru
Услуги бухгалтерского сопровождения
Услуги бухг. сопровождения. Профессиональный подход
бизнесконсалтингспб.рф
Свадебный букет с пионами
Свадебный портал. Свадебные фотосессии и видеосеты
flower-premium.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31