Анимация CSS3. Создание баннеров
Общий урок. CSS анимация
Урок по css анимации позволяет научиться создавать анимированные изображения без использования Flash. Эта технология постепенно вытесняет создание рекламных и других анимированных баннеров средствами Flash. В уроке рассказывается, как создать полноценный анимированный рекламный баннер средствами языка CSS3.
Для выполнения урока необходимо предварительно скачать исходные материалы
1. Создайте папку для выполнения упражнений.
2. Скопируйте в нее папку img со всеми необходимыми материалами.
1. Переходы
Переходом в css анимации называется плавная смена свойств элемента при наведении на него курсора мыши. При использовании псевдокласса :hover изменение происходит мгновенно, transition же позволяет задать продолжительность и метод перехода.
transition: [свойство,] длительность;
Синтаксис:
transition: all 1s; //для всех свойств длительность перехода 1с
transition: background 0.5s; //для фона длительность перехода 0,5с
Пример. При наведении на элемент div с классом round-to-circle, он из квадрата преобразуется в круг, у него изменяется цвет фона и непрозрачность становится равной 1. Все это происходит плавно, в течение 0.3с, т.к. мы задали свойство transition. Если это свойство не задано, то смена свойств будет происходить моментально.
Рис. 1
Рис. 2
Задание 1
1. Реализуйте этот пример. Сохраните файл под именем 01_perehod.html
2. Измените значение в секундах до 1.5 секунд. Обновите страницу. Оцените разницу.
2. Трансформация
Трансформация — это изменение вида элемента, к которым относятся следующие визуальные модификации: поворот, масштабирование, наклон и сдвиг. Чтобы сделать трансформацию, к селектору добавляется свойство transform, а в качестве значения пишется функция трансформации, и её параметры. В общем виде это записывается так:
transform: функция(параметры);
2.1 Функция поворота – rotate()
Поворачивает элемент на заданный угол
transform: rotate(α)
Здесь: α — угол поворота. Положительное значение поворачивает элемент по часовой стрелке, отрицательное против.
Синтаксис:
transform: rotate(90deg) //поворот по часовой на 90 градусов
transform: rotate(-180deg) //поворот против часовой на 180 градусов
Пример. При наведении на изображение, оно плавно поворачивается на 60 градусов по часовой стрелке.
Рис. 3
Рис. 4
Задание 2
1. Реализуйте этот пример. Сохраните под именем 02_rotate.html
2. Изменяйте значение в секундах. Оцените разницу.
2.2 Функция масштабирования – scale()
Задаёт масштаб элемента по горизонтали и вертикали.
transform: scale(sx[, sy]);
Здесь: sx — изменение масштаба по оси X; sy — изменение масштаба по оси Y. Значение больше 1 увеличивает масштаб элемента, меньше 1, наоборот, его уменьшает. Если задано только одно значение, то масштабирование будет происходить пропорционально в обе стороны: scale(1.2) соответствует scale(1.2, 1.2).
Синтаксис:
transform: scale(3, 1]); //увеличение ширины в 3 раза
transform: scale(1, 0.5); //уменьшение высоты в 2 раза
transform: scale(1.5); //увеличение размера в 1,5 раза
Пример. Уменьшим изображение до 80% от его первоначального состояния –scale(0.8). При наведении на изображение восстановим его прежнее состояние – scale(1).
Рис. 5
Рис. 6
Задание 3
1. Реализуйте этот пример. Сохраните файл под именем 03_scale.html
2. Изменяйте значение в секундах и величину трансформации. Оцените разницу.
2.3 Функция наклона – skew()
Наклоняет элемент на заданное значение по горизонтали и вертикали в плоскости экрана.
transform: skew(ax[, ay])
Здесь: ax — угол наклона по оси X; ay — угол наклона по оси Y. Если значение ay не указано, то оно считается равным 0: skew(30deg) соответствует skew(30deg, 0).
Положительное значение угла наклоняет влево, отрицательно значение – вправо
Синтаксис:
transform: skew(30deg, 60deg])
transform: skew(60deg, 30deg])
transform: skew(30deg) РАВНОСИЛЬНО transform: skew(30deg, 0)
Пример. В этом примере мы задали наклон 30 градусов для элемента p. Но нам нужен наклон только для фона параграфа, а сам текст должен быть выровнен прямо, поэтому мы положили текст внутри элемента span и задали ему компенсирующий наклон.
Рис. 7
Рис. 8
Задание 4
Реализуйте этот пример. Сохраните под именем 04_skew.html
2.4 Функция сдвига – translate()
Сдвигает элемент на заданное значение по горизонтали и вертикали в плоскости экрана.
transform: translate(tx[, ty])
Здесь: tx — значение смещения по оси X в пикселях, процентах или других единицах CSS; ty — смещение по оси Y. Если значение ty не указано, то оно считается равным 0: translate(30px) соответствует translate(30px, 0).
Синтаксис:
transform: translate(30px, 0]) РАВНОСИЛЬНО transform: translate(30px)
transform: translate(0, -30px]) //сдвиг вверх на 30px
transform: translate(60px, 30px])сдвиг вправо на 60px и вниз на 30px
transform: translate(-2%]) //сдвиг влево на 2%
Задание 5
1. Файл 04_skew.html сохраните под новым именем 05_translate.html
2. Кроме масштабирования добавим перемещение вниз на 30px. Для этого изменим стиль .tovar:hover так:
Рис. 9
Теперь при наведении на изображение оно не только масштабируется, но и сдвигается вниз на 30px
Рис. 10
2. css анимации
Свойство animation позволяет создавать более сложные анимации. Эти анимации состоят из двух компонентов: стилевое описание анимации и набор ключей, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.
Создание css анимации начинается с установки ключевых кадров правила @keyframes. Кадры определяют, какие свойства, на каком шаге будут анимированы.
Синтаксис:
@keyframes название_анимации {
from {свойство: параметры;}
50% {свойство: параметры;}
to {свойство: параметры;}
}
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно.
После объявления правила @keyframes, мы должны ссылаться на него в селекторе в свойстве animation.
Синтаксис, сокращенная запись:
h1 {
animation: название_анимации длительность [количество_повторений];
}
Обязательные параметры:
- название анимации
- длительность
Дополнительный параметр
- количество повторений. Если не указано количество повторений – по умолчанию 1. Можно указывать любое другое число, либо использовать ключевое слово infinite – бесконечное количество повторений.
Таким образом для задания css анимации элемента (селектора), полная запись будет выглядеть следующим образом:
h1 {
animation: название_анимации длительность [количество_повторений]; /*в свойстве селектора h1 объявляем анимацию*/
}
@keyframes название_анимации { /*описание анимации для селектора h1*/
from {свойство: параметры;}
50% {свойство: параметры;}
to {свойство: параметры;}
}
У css анимации есть и другие свойства. Например, задержка анимации, направление и т.д. Подробнее можете узнать на сайте: https://webref.ru/css/animation
Пример. Применим к классу sun анимацию rotate длительностью 3 секунды с бесконечным количеством повторений.
Рис. 11
Задание 6
Реализуйте пример с крутящимся солнышком. Сохраните под именем 06_sun.html
Пример. Появление текста слева, справа и посередине.
Рис. 12
Задание 7
Реализуйте пример с движущимся текстом. Сохраните под именем 07_text.html
Повторяющаяся анимация с плавной сменой итераций
Плавный переход от итерации к итерации при повторяющейся анимации можно достичь, используя параметр прозрачности opacity.
Задание 8 1. Реализуйте нижеприведенный код. Сохраните файл под именем 08_media.html
Рис. 13
2. Просмотрите результат. Видно, что после плавного исчезновения текста он снова появляется, но достаточно резко. Это происходит потому, что в стилях в конце итерации непрозрачность равна нулю (строка 18 to{opacity: 0}), а в начале итерации непрозрачность равна 1 (строка 16 from{opacity: 1}). Происходит резкая смена от полной непрозрачности к полной яркости.
3. Внесите изменения в эти свойства следующим образом – установите непрозрачность 0 в начале итерации (свойство from) и добавьте еще один временной промежуток 40% с непрозрачностью 1 и в результате появление текста в начале итерации также будет плавным.
Рис. 14
Итоговое задание
Содержание баннера взято с сайта http://wunder-digital.kz/medijnaya-reklama/
1. Просмотрите css анимацию itog.gif (рис. 15).
Рис. 15. Файл itog.gif
2. Откройте в браузере файл zadanie.html. Как видите, пока анимация не работает.
3. Анимируйте шаблон zadanie.html, для этого напишите стили для анимаций и примените их к соответствующим элементам в соответствии с файлом itog.gif:
- заголовок плавно появляется слева и останавливается примерно на середине фона;
- описание появляется справа и останавливается у левого края заголовка;
- иконки на фоне должны появляться после заголовка и описания;
- после фона с иконками плавно появляется кнопка;
- при наведении на кнопку, она плавно меняет фон.
4. Доработайте пункт 3, чтобы в конце всей анимации все элементы баннера кроме фона плавно исчезали, затем анимация должна начинаться сначала. Смена итераций должна быть плавной без резких скачков.
Творческое (контрольное) задание
Создать рекламный баннер средствами HTML и CSS3
Требования к баннеру
1. Размер не менее 1000px по ширине.
2. Наличие фонового изображения, заголовка и рекламного текста.
3. Должны быть использованы следующие свойства css анимации
- transition
- rotate
- scale
- skew
- перемещение текста (или изображений)
4. Анимация баннера должна быть повторяющейся, переход от итерации к итерации должен быть плавным без резких скачков.
На основании приведенных выше требований Вам необходимо предварительно подобрать материалы (фото, тексты), продумать сценарий анимации.