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

Данный эффект отлично подойдет для оформления миниатюр на сайте, или создания оригинального портфолио. И так, приступим к первому шагу.

Шаг 1. HTML

Для начала мы рассмотрим разметку, в которой произведем разделение классом fc-flip который будет содержать передняя часть и задняя часть открытки. Задняя часть не будет видна, потому что мы поверните ее на 180 градусов по оси координат. Также мы добавим ручку-переключатель, которая будет приводить в действие данную открытку.

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

Шаг 2. CSS

Основная оболочка будет составлять 300 пикселей в высоту и ширину. Для всех элементов круга мы будем использовать текстуру в виде бумаги, которую мы будем накладывать цветовые оттенки, придавая ей реалистичный вид открытки из бумаги. Оболочка будет также в виде круга, так как мы даем ей границы радиусом 50%.

Теперь зададим стили для параметров ручки, которой присвоен класс fc-handle:

Следующий класс будет определять положение середины открытки:

Теперь зададим параметр для большой ручки:

Следующий псевдо-элемент будет использоваться для создания эффекта тени при открытии и закрытии открытки:

Теперь стили для правого куска открытки, то есть тот, который вызовет открытие окружности буклета:

Зададим некоторые градиенты для открытия:

В нижней части, которая будет содержать цитату, содержание будет иметь следующий стиль:

Мы ставим прозрачность на 0, так как мы не хотим, чтобы вызвать зубчатые края круга, когда она закрыта.

Теперь давайте рассмотрим стиль содержания элементов которые будут находиться в открытке:

Собираем вместе стили которые будут вызывать трансформации:

Следующие параметры отвечают за правильную работу элементов 3D:

Диагональные градиенты, которые будут служить в качестве теней для двух частей ручки:

Цвет фона первых двух частей ручки станет темнее:

И конечно, самое главное, что должно случиться: вращение контейнера:

Шаг 3. JavaScript

Когда мы нажимаем на открытку то происходит трансформация, мы будем применять класс fc-wrapper-open к основному контейнеру. Мы определим две простые функции для открытия и закрытия. Мы также добавим поддержку, используя скрипты Hammer.js и JQuery плагин:

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

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

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