Проектирование и дизайн ИС Практическая работа №16

Практическое занятие №16

Тема: создание CSS-анимации

Цель работы: создать интерактивную web-страницу с CSS-анимацией

Приобретаемые умения и навыки: Умение работать с CSS, создание css-анимации

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet

План работы

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

2. При наведении курсора на точку города анимация должна становиться на паузу. Когда курсор убран, анимация возобновляется.

3. Также при наведении курсора на точку города должна плавно появляться небольшая выноска с местом и датой концерта, кнопкой для покупки билетов. Когда курсор убран, информационная выноска исчезает.

4. Цвет кнопки в выноске должен меняться при наведении курсора.

Откройте в браузере веб-страницу из практической работы. Перед вами блок с картой, на которой нанесено четыре отметки с названиями городов. Наша задача — создать эффект расходящихся волн вокруг каждой точки. Мы сделаем две волны, в роли которых будут выступать псевдоэлементы :before и :after:

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

Откройте в редакторе кода документ style.css из папки css. В течение урока мы будем соблюдать порядок в таблице стилей, добавляя новые правила не просто в конец документа, а размещая их там, где это будет логично. Поэтому найдите селектор .pin .popover и добавьте над ним следующие стили для псевдоэлементов элемента .pin:

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

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

Найдите в начале таблицы стилей комментарий /* Keyframes */ и запишите под ним два следующих правила @keyframes:

Обе анимации имеют одинаковое начало, но отличаются окончанием. Анимацию pinBeforeWave мы применим к псевдоэлементу :before, и в процессе ее выполнения он увеличится до размеров 40×40 пикселей (маленькая волна). Анимация pinAfterWave предназначена для псевдоэлемента :after, к концу которой он примет размеры 66×66 пикселей (большая волна).

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

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

Обе анимации будут длиться одну секунду. Распределение скорости анимации в течение этой секунды будет происходить по функции ease-in. Анимация будет повторяться бесконечно.

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

Когда пользователь наводит курсор на элемент .pin, анимация псевдоэлементов должна становиться на паузу. CSS позволяет применять стили к дочерним элементам, когда на их родителя наведен курсор. То же самое работает и с псевдоэлементами. Добавьте этот стиль под предыдущим:

Данный код говорит: когда на элемент .pin наведен курсор (состояние :hover), нужно поставить на паузу анимацию псевдоэлементов :before и :after.

При наведении курсора на отметку должно происходить еще одно действие, а именно появление выноски с информацией о концерте. В изначальном состоянии все выноски скрыты от глаз посетителя с помощью свойств visibility: hidden и opacity: 0.

Найдите в файле CSS селектор .pin .popover:before и добавьте следом за ним следующий стиль:

У вас мог возникнуть вопрос, зачем мы скрыли выноску сразу двумя способами. Дело в том, что использования лишь одного из этих свойств будет недостаточно. Если убрать свойство visibility и оставить только opacity: 0, то элемент не будет по-настоящему скрыт: да, он не будет виден для глаз, но его увидит скринридер, что иногда может мешать.

Если же убрать свойство прозрачности и оставить только visibility: hidden, то мы не сможем добиться плавности при появлении элемента, поскольку свойство transition не действует на свойство visibility. Именно поэтому мы использовали сразу два свойства для скрытия выноски.

Кстати о плавности. Если вы сейчас обновите страницу и наведете курсор на точку, то увидите, что выноска появляется, но делает это резко. Настало время обратиться к свойству transition. Найдите селектор .pin .popover и добавьте к нему такую строку:

Теперь выноска появляется плавно: свойство opacity переходит от значения 0 к значению 1 за 200 миллисекунд, а скорость движения анимации соответствует функции ease-in-out.

Идем дальше. Свойство transition-delay, применяется для небольшой задержки выпадающего меню перед его исчезновением, чтобы пользователь успевал навести курсор на ссылку меню. Не лишним будет применить этот эффект и для выноски, чтобы она исчезала с легкой задержкой. Для этого добавьте еще одно значение к свойству transition для селектора .pin .popover — 0.5s перед точкой с запятой:

Но это еще не всё. Сейчас задержка появления выноски срабатывает в обоих направлениях — когда курсор наводится и когда отводится. Чтобы оставить задержку только для второго случая, допишите следующую строку к селектору .pin:hover .popover:

Сохраните изменения и обновите страницу в браузере. Теперь всё работает правильно: выноска появляется плавно и без задержки, а исчезает так же плавно, но с задержкой в полсекунды.

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

В состоянии невидимости выноска будет развернута на 90 градусов по оси Y. Допишите следующий стиль к селектору .pin .popover:

При наведении курсора на точку города выноска должна возвращаться в свое нормальное положение. Для этого добавьте строку ниже к стилю для селектора .pin:hover .popover:

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

1. Цвет кнопки в выноске

Последний пункт плана — плавное изменение цвета кнопки в выноске при наведении курсора на нее. Для начала создадим стиль для кнопки в состоянии :hover. Найдите селектор .pin .popover .button и запишите под ним следующий код:

И, наконец, чтобы переход от начального цвета к конечному происходил плавно, добавьте эту строку к стилю селектора .pin .popover .button:

Снова сохраните изменения и полюбуйтесь результатом.

Контрольные вопросы:

1. Что такое CSS-анимация?

2. Для чего используется CSS-анимация?