—»     —»   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   Прочитано (раз): 7039   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Камышовая крыша цена
Платно анализ цен на заказ. Любой уровень сложности
ukrkamish.com.ua
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2018    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930