WebDesignMagazine.ru – Журнал о веб-дизайне

Создаем анимированный календарь погоды при помощи CSS Clip и эффекта “наложения” (overlay)

0

Сегодня мы будем изучать практическую сторону свойства CSS Clip и rect() функции. Мы создадим аккуратный и простой эффект для показа дополнительного скрытого контента и возможности полноэкранного наложения.
В этой статье пойдет речь о том, как использовать свойство CSS Clip, чтобы сделать плавный переход при нажатии на элемент окна. Идея состоит в том, чтобы показать какие-то наложения, как будто они на самом деле находятся под соответствующим элементом. Нажатие по элементу, создаст эффект “выреза”, открывая еще один слой, который будет расширяться. Звучит мудрено – но на самом деле стоит посмотреть Демо и все сразу станет понятно.

Смотреть Демо   Скачать Ресурс

Дя начала нужно создать список предметов, которые будут выглядеть как боксы в стиле популярного METRO:

animated-calendar

Каждый из квадратов будет содержать элемент (наложение), который будет иметь фиксированное (fixed) положение. Этот элемент будет распологаться на всю страницу, но мы этого не увидим, потому что прозрачность будет установлена на 0. При клике по коробке, мы будет использовать clip: rect(), чтобы обрезать соответствующеи части внутреннего фиксированного элемента. Затем мы анимируем клип, чтобы показать всю ширину и высоту наложения, которая является нашей полной областью просмотра:

При нажатии кнопки “закрыть”, произайдет обратный эффект и наложение (overlay) минимизируется до размера элемента списка и затем исчезнет.
Итак, давайте начнем с HTML.

Разметка HTML

Для квадратов мы будем использовать неупорядоченный список. У каждого элемента списка будет класс “значок” (icon) и дополнительный “span” класс, который будет контролировать ширину коробки. Внутри мы добавим немного текста и раздел наложения. Наложение будет содержать структуру, которая будет иметь колонки. Так как мы выбрали фиктивное приложение погоды, как нашу тему, то тогда будем показывать прогноз погоды на ближайшие семь дней. У каждого из “дней” будет span который, мы будем использовать для будних дней, значка погоды и температуры:

 

CSS

* Обратите внимание, что здесь CSS не содержит никаких префиксов, но вы сможете найти их в файлах демо.

Неупорядоченный список будет централизован в его родителе, и мы также удалим стили списка:

У элементов списка будет динамическая ширина и мы дадим им высоту 15em. Они будут сдвигаться влево:

У нас будет три различных ширины для элементов сетки, “по умолчанию” с 24%, а затем следующие два:

Давайте также стилизуем “Название города”:

Мы прилагаем CSS-файл для шрифта значков, который мы используем в нашем примере. Это Climacons Шрифт от Адама Виткрофта. Вы можете проверить climacons.css, чтобы увидеть, какие значки мы использовали. В основном мы используем класс значка (icon), чтобы добавить иконку с псевдо элементом. В нашей сетке мы хотим, чтобы иконки были расположены абсолютно в правом нижнем углу, и  появлялись немного обрезаными:

Температура будет полупрозрачной и мы добавим переход (transition) для её прозрачности:

При наведении курсора на элемент списка, мы просто будем увеличивать прозрачность:

 

Теперь давайте взглянем на важный раздел наложения. Нашим окончательным результатом должно быть полноэкранное наложение. Поэтому, мы установим его ширину и высоту на 100% и  дадим ему фиксированную позицию. Мы сделали так, что оно появляется поверх всего и у нас получается перекрытие и огромные накладки повсюду, поэтому мы должны сначала установить Z-Index в -1. Это позволит поставить их за содержанием страницы. Установка непрозрачности до 0 сделает их невидимыми:

Это начальное состояние накладок. Как только мы нажимаем на элемент списка, мы установим правильное rect() значения для clip свойства и расширим наложения, анимированием rect() значения.
Но давайте сначала посмотрим на остальную часть стиля.

У каждого наложения будет небольшая кнопка  “закрыть”, которая будет расположена в правом верхнем углу:

Обертка для колонок будет иметь класс “rb-week” (хотя мы также включаем “текущую погоду” в нее). Нам нужно установить её на 100% ширину и высоту, так чтобы мы смогли определить правильную высоту и ширину для её child элементов:

“Колонки” будут иметь ширину 10% (за исключением первой, которая будет 30% в ширину), и они будут двигаться влево:

В общей сложности у нас есть восемь колонок, 7мь раз по 10%, в результате 70%, поэтому у нас остается 30% для первой колонки.

У каждого из спэнов  будет высота в 30% и с небольшим пэддингом в 5%:

У спэна для названия городов будет особый стиль, с более тонким весом шрифтом:

У иконок будет повышенный размер шрифта и нам нужно будет сбросить вес шрифта, потому что мы изменили его в другом правиле:

Значок в “текущем столбце погоды” будет почти прозрачным:

Теперь давайте определим различные цвета фона для каждого пункта списка и каждого столбца в наложениях (overlays). У нас есть 11 элементов списка:

И для каждого наложения у нас есть восемь колонок:

… И так далее для каждой из 11 коробок.

И последнее, давайте позаботимся о маленьких экранах с медиа запросами. Когда пространство ограничено, мы больше не захотим показывать наши квадраты в сетке:

О наложенных столбцах и тексте внутри позаботится плагин FitText, поэтому нам не прийдеться кардинально менять макет. Теперь давайте взглянем на некоторые важные части JavaScript.

animated-calendar2

JavaScript

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

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

При нажатие на один пункт, будут применяться два перехода к соответствующему элементу наложения. Первый из них будет применять clip, который будет обрезать его в том же самом месте что текущий элемент списка. Мы также покажем наложения за счет увеличения его прозрачности. Второй переход, позаботится об анимации клипа, так что наложение будет “расширяться”, чтобы соответствовать ширине и высоте окна. Для первого перехода, необходимые значения соответствуют позиции и размеру элемента. Мы получаем это вызвав “getItemLayoutProp” функцию. Для второго, нам просто нужна ширина и высота окна, чтобы определить правильные значения clip.

Ещё две вещи также должны быть рассмотрены для того, чтобы все правильно работало. Во-первых, мы “отображаем и скрываем” прокрутки страницы между этапами, потому что мы не хотим продолжать скроллинг, как только конечный этап (расширенное наложения) достигнут. Во-вторых, мы устанавливаем наложение Z-индекса на высокое значение, так чтобы он всегда оставался “вверху”, и указатель событий на auto для того, чтобы контент наложения был интерактивным.

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

Что касается клика для закрытых элементов, то мы просто возвращаем (revert) того, что было сделано раньше:

Вот и всё! Надеемся, вам понравился урок и вы найдете ему применение в своих проектах! Также, напишите в комментариях, если вам понравилась наша новая система рейтинга уровня сложности для уроков и качество подачи материала.

Поделиться: