Создаем простое мокап-слайд шоу для сайтаСегодня мы бы хотели рассказать немного о необычном варианте организации слайд-шоу у Вас на сайте. Дело пойдет о мокап слайд-шоу. Некоторое время назад Франклин Та написал статью и создал классный скрипт для трансформаций элементов в 3D пространстве. В этой статье он описал, как можно воспользоваться вспомогательным скриптом для создания 3D матриц трансформации с целью внедрения iframe в изображение. Мы подумали, что было бы здорово создать слайд-шоу с использованием данной техники.

 

Для обеспечения адаптивности (трансформация производится над пискселям), мы меняем размеры основного мокапа для того, чтобы он поместился в свой родительский контейнер. Здорово, что благодаря сложным вычислениям, которые описал Франклин мы можем обеспечить полную адаптивность. И так, давайте приступим.

Шаг 1. CSS

так как разметка практически идентична для всех примеров, мы решили рассказать только о разработке трансформаций, Вот пример, демонстрирующий использование трансформаций (демо 1):

Не забудьте добавить префикс -webkit- для поддержки работы слайд-шоу в Safari, iOS Safari и браузерах для Android.

Создаем простое мокап-слайд шоу для сайта

В данном примере используется CSS анимации для отображения и скрытия слайдов. Можно писать как свои варианты, так и пользоваться соответствующими библиотеками такими как animate.css. Пример стилей, используемых в слайд-шоу:

Нам необходимо “спрятать” слайды, перемещая их влево (вместо того, чтобы задействовать прозрачность). Текущий слайд содержит класс “current”. Пример классов, обеспечивающие анимацию (демо 2):

В последнем примере у нас два слайд-шоу запускаются в разное время. По-моему, это превосходный способ показать, что ваше приложение адаптивно.

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

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