Главная > Скрипты и коды > StackSlider: забавный трехмерный слайдер изображений

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


2 января 2013, 15:00. Разместил: Design FactoRy
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

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад