Анимация CSS3. Создание баннеров

---

Урок 5. Создание новогоднего баннера

Цель: создать анимационный новогодний баннер 750 на 250 пикселей с применением точки трансформации.

Задачи:

• разработать статический баннер 750 на 250 пикселей;
• применить к нескольким элементам баннера одно свойство анимации;
• создать точку трансформации для блока и анимировать ее.

---

Изображения для выполнения данной лабораторной работы размещены в папке image.
Результат работы вы можете увидеть ниже.

Задание №1.

Создайте html форму для баннера, элементов баннера в данной работе много.

Рисунок 1

Задание №2.

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

Задание №3

Понаблюдайте за баннером, посмотрите какие анимации применяются к верхним буквам и снежинкам, сделайте аналогично.
Подсказка: используйте свойство animation-delay, данное свойство вы уже применяли в прошлых уроках. Так же для снежинок используется свойство полупрозрачности.

Задание №4

Примените точку трансформации для нижней надписи, чтобы при применении свойства вращения, наш блок раскачивался по типу маятника.

Для применения точки трансфорации используется свойство transform-origin. Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%.
Значения могут быть как для X оси, так и для Y и Z осей.
Значения по осям Y и Z не являются обязательными, можно их опускать (они примут значения по умолчанию). Сдвиг точки по оси Z нужен для 3D трансформаций. Значения могут задаваться как словами, так и процентами или css единицами.

Пример:

Код примера приведен на рисунке 2.

Рисунок 2

Задайте блоку, который оборачивает буквы - скидки, точку трансформации.
Для этого в свойствах пропишите transform-origin: 80% 10%, вы можете попробовать свои значения.
В ключевых кадрых укажите вращение от минус пяти градусов до пяти градусов, тем самым все эти свойства дадут нам эфект горизонтального маятника.

Рисунок 3

Итоговый листинг

Рисунок 4

---

Контрольное задание

Придумать и реализовать баннер для своей фирмы. Обязательным условием является применение точки трансформации.

Вариант №1. Создать баннер по случаю 23 февраля.

Вариант №2. Создать баннер по случаю 8 марта.

Вариант №3. Создать баннер по случаю 1 мая.

Вариант №4. Создать баннер по случаю 9 мая.

Вариант №5. Создать баннер по случаю 1 сентября.

Вариант №6. Создать баннер по случаю празднования хэллоуина.

Вариант №7. Создать баннер для распродажи по черной пятнице.

Вариант №8. Создать баннер для магазина канцелярии.

Вариант №9. Создать баннер рекламирующий новый телефон.

Вариант №10. Создать баннер предлагающий услуги по упаковке подарков.