Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Декабрь » 24 » Эластичное перелистывание фотографий


11:19
Эластичное перелистывание фотографий

Эластичное перелистывание фотографий

 


Сегодня мы хотим поделиться скриптом благодаря которому можно реализовать перелистывание набора изображений, с помощью специального жеста.

СМОТРЕТЬ  DEMO              СКАЧАТЬ ИСХОДНИК

Три изображения видны по умолчанию: одно сверху, два остальных под ним. Их мы расположили в оси 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. На следующем графике отображены дистанции:


 

А вот собственно и наш сценарий все очень просто:

 

new ElastiStack( element, {

    // distDragBack: если пользователь не зашёл за пределы, возвращаем изображение на место

    distDragBack : 200,

    // distDragMax: если выходит за эти пределы, убираем изображение

    distDragMax : 450,

    // колбэк

    onUpdateStack : function( current ) { return false; }

} );

 

СМОТРЕТЬ  DEMO              СКАЧАТЬ ИСХОДНИК

 

Источник

Категория: CSS//HTML//JS | Просмотров: 1197 | Добавил: Iron | Теги: фотографий, перелистывание, Эластичное | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди