StackSlider: забавный трехмерный слайдер изображений
StackSlider представляет собой экспериментальный слайдер изображений на jQuery, который позволяет вам представить миниатюры галереи различными способами, используя трехмерные трансформации на CSS3 и перспективу. Идея заключается в том, чтобы перемещаться по стопке изображений, а эффект напоминает будто кто-то поднимает изображение с самого верха, и перемещает его к центру контейнера для просмотра, а предыдущее просмотренное изображение перемещается в другую стопку.
Демо представит вам иллюстрации 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, подстроив плагин под ваш контейнер и размеры изображений.
Демо представит вам иллюстрации 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, подстроив плагин под ваш контейнер и размеры изображений.
-
FalleN -
3287 -
1 -
191
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...