Оригинальное перелистывание фотографий на CSS | RUDEBOXВ данном уроке мы рассмотрим процесс построения весьма интересной стопки изображений, которые сможете перелистывать весьма необычным способом. Идея состоит в том, чтобы создать бумажную стопку, с постоянной подгрузкой изображений, то есть у нас образуется бесконечный набор картинок, оформленного весьма простым стилем, но на этом не все, мы добавим функцию «бери и тащи», это позволит нам перелистывать изображения способом сбрасывания картинки со стопки, сделать это можно в любую сторону экрана.

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

Шаг 1. HTML

Разметка будет проста, у нас будут изображения, обвернутые соответствующим классом:

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

Оригинальное перелистывание фотографий на CSS | RUDEBOX

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: