Интересный пример с наложением сетки на CSS3 | RUDEBOXВ данном уроке мы рассмотрим как создать эффект наложения сетки для сайта с использованием трансформаций css, основная идея состоит в том, что мы имеем плоскость на которой нанесены специальные метки, в данном случае это информация о погоде, при нажатии на данную плоскость, которую, кстати, мы поместили для стилизации вида в корпус iphone, происходит разворот сетки, с возможностью выбора различных вариантов отображения погоды. Все это будет происходить с плавной анимацией, кроме этого мы рассмотрим несколько вариантов сетки.

Данные примеры работают во всех современны браузерах, за исключением IE. В демонстрации мы использовали макет iPhone от талантливого дизайнера  Jakub Kejha. И так, давайте приступим.

Шаг 1. HTML

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

Как только мы нажимаем на элемент сетки, мы будем обновлять содержание устройства контейнера. Давайте перейдем к стилям.

Интересный пример с наложением сетки на CSS3 | RUDEBOX

Шаг 2. CSS

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

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

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

Установим абсолютное позиционирование по правой стороне для плоскостей:

Теперь нам необходимо установить общие параметры стилей для самой сетки, мы хотим отобразить восемь элементов, соответственно у нас будет два ряда по четверо блоков. Мы также добавим переход в -350px по оси Z:

Якоря в сетке будут размещены внутри изображений и будут установлены на 100% ширины.

Мы привели одни с основных стилей, более детально для каждого примера можно просмотреть в исходниках, теперь давайте взглянем на JavaScript.

Шаг 3. JavaScript

Нам необходимо кэшировать и инициализировать некоторые переменные:

Мы будем связывать события c оболочками изображений (якоря) и на экран элементов.

Когда нажали на плоскость, то нам необходимо убрать "AC-GridView", при этом необходимо обновлять исходное изображение и название на соответствующие элементы:

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

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

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