Эластичное
перелистывание фотографий
Сегодня мы хотим
поделиться скриптом благодаря которому можно реализовать перелистывание набора
изображений, с помощью специального жеста.
Три изображения
видны по умолчанию: одно сверху, два остальных под ним. Их мы расположили в оси
Z. Если же, перетащить верхнее изображение, то оно пропадёт, верхним станет
предыдущее и так далее...
СМОТРЕТЬ DEMO СКАЧАТЬ ИСХОДНИК
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 СКАЧАТЬ ИСХОДНИК
Источник
| 
