Новые концепции разработки сайта, креативные подходы к отображению материала будут всегда цениться пользователями сайта, ведь пора менять тенденции разработки, и создавать нечто новые варианты отображения контента, чтобы добавить ту самую изюминку к своему ресурсу. Большую часть сайтов используют изображения, зачастую организация происходит в довольно простой форме, что не впечатляет посетителя. В данном уроке мы рассмотрим как создать замечательную стопку изображений, с элементом объемного вращения.

Такой вид трансформации поддерживают только браузеры Webkit. Во всех остальных браузерах будет только приближенный вариант отображения. И так, приступим.

Шаг 1. HTML

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

Мы будем использовать класс «st-stack-raw” только для того, чтобы скрыть список, когда JS включен. Он может быть использован для стилизации списка без запасного варианта JS. Теперь нам необходимо вызвать плагин, делаем это с помощью следующей команды.

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

Опции

Плагин имеет несколько базовых настроек, которые вам помогут настроить плагин и анимацию на свое усмотрение.

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

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

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