Оригинальное перелистывание фотографий c использованием плагина elastiStack.js

Сегодня мы хотели бы поделиться с вами небольшим скриптом, который позволяет перемещаться по стопке эскизов. Все работает проще чем звучит, а выглядит еще лучше, следующее изображение будет появляться плавно, а изображение перед ним плавно угасать. Три изображения видны по умолчанию: одно сверху, два остальных под ним. Их мы расположили в оси Z. Давайте посмотрим, как реализовать данный концепт.

HTML

Код
<ul id="elasticstack" class="elasticstack">
  <li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li>
  <li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li>
  <li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li>
  <li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li>
  <li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li>
  <li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li>
</ul>

При перетаскивании изображений, мы применяем эффект "отскакивания”. Дистанция может быть выставлена в параметре distDragBack. Область, выйдя за которую, изображение пропадёт, выставляется в параметре distDragMax.


JS

Подключим 2 javascript файла которые будут обрабатывать сам слайдер и его эластичность + эффект drag and drop. Далее следует инициализация скрипта.

Код
<script src="js/draggabilly.pkgd.min.js"></script>
  <script src="js/elastiStack.js"></script>
  <script>
  new ElastiStack( document.getElementById( 'elasticstack' ) );
  </script>

Кроме этого нам установить некоторые параметры, для работы плагина:

Код
new ElastiStack( element, {
  // distDragBack: если пользователь не зашёл за пределы, возвращаем изображение на место
  distDragBack : 200,
  // distDragMax: если выходит за эти пределы, убираем изображение
  distDragMax : 450,
  // колбэк
  onUpdateStack : function( current ) { return false; }
} );

  • FalleN

  • 2138

  • 1

  • 285

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!