---

Урок 4. Создание баннера туроператора

Цель: создать анимационный баннер 240 на 400 пикселей для туристического оператора с применением множества анимаций.

Задачи:

• научиться совмещать множество анимаций для одного элемента;
• научиться применять анимацию к псевдоклассу :hover.

---

В данном уроке мы научимся применять множественные анимации к одному объекту и создадим баннер для туроператора размером 240 на 400 пикселей. Итоговый результат вы можете видеть ниже.
Логотип для баннера, который расположен в левом верхнем углу, взят с сайта туроператора - tui.ru
Все изображения для выполнения работы вы можете взять в папке image.

Для того, чтобы создать рекламный блок, можно сначала реализовать html-код, разместить все элементы на свои места, а затем анимировать каждый из блоков. Именно так мы и поступим в данном уроке.

Задание №1

Создайте html-файл и напишите код из листинга на рисунке 1. 

Рисунок 1

Результат можно увидеть на рисунке 2

Рисунок 2

Дальнейшия действия в лабораторной работе будут происходить в файле со стилями.

Задание №2. Опишем классы.

Для нашего контейнера, в котором будет находиться баннер зададим размер 240 на 400 пикселей. Цвет укажем - #ffdc52. Так же укажите рамку в 1 пиксель, это создаст немного контраста. Позиционирование в данном стиле будет - relative.

Рисунок 3

Результат можно увидеть на рисунке 4.

Рисунок 4

Для логотипа стили будут как на рисунке 5. Результат на рисунке 6.

Рисунок 5

Рисунок 6

Для блока со скидками код будет, как на рисунке 7, а результат на рисунке 8.

Рисунок 7

Рисунок 8

Допишем стили для остальных блоков (рисунок 9). Результат на рис. 10.

Рисунок 9

Рисунок 10

Задание №3. Анимация изображения

1. Зададим свойства блоку с изображением (блок с классом banner4image). Сделаем так, что бы наше изображение плавно выдвигалось снизу в верх. А так же сразу зададим данному элементу вторую анимацию, уже с другим направление. По результату картинка будет подниматься, при этом ее видимость будет повышаться и она будет поворачиваться в разные стороны на пару градусов.

2. Для первой анимации зададим имя - bannerforimage, длиться она будет три секунды и скорость направления ее будет равномерной.

3. Для второй анимации имя bannerforimages, длительностью так же три секунды, а вот скорость направления будет другой, зададим значение ease.

4. Зададим ключевые кадры для анимаций.
В первом случае будет только свойства в значениях 0% и 100%. Для начала анимации укажем свойство bottom: -180px, а для 100% - bottom: 0. Таким образом наша картинка будет появляться снизу вверх.
Для второй анимации укажем сразу 6 ключевых кадров - 0%, 80%, 90%, 95%, 97% и 100%. Ниже в таблице можно увидеть какие свойства находятся в ключевых кадрах.

Ключевой кадр	Свойство
0%	transform: rotate(0deg); opacity: 0;
80%	transform: rotate(10deg);
90%	transform: rotate(-10deg);
95%	transform: rotate(8deg);
97%	transform: rotate(-5deg);
100%	transform: rotate(0deg); opacity: 1;

Стили для блока banner4image и двух анимаций на рисунке ниже. Результат на рисунке 12.

Рисунок 11

Рисунок 12

Задание №4. Анимация при наведении.

Анимируем блок с надписью «Хочу в отпуск». Анимация у нас будет при наведении, т.е указывать ее надо в свойстве с псевдоклассом :hover.
Зададим параметры анимации: Имя - hochuvotpusk, длительность - 1 секунда, скорость будет равномерная, анимация будет повторяться бесконечно от начала до конца и в обратную сторону.

В ключевых кадрах укажем то, как она будет изменяться. Сделаем так что бы при наведении, она увеличивалась и уменьшалась. Для этого необходимо указать параметр transform:scale(). Значение подберите сами.

Рисунок 13

Результат на рисунке ниже.

Рисунок 14

Задание №5. Зададим переход цвета надписи - скидка до 50%

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

Рисунок 15

Задание №6.

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

Итоговая таблица стилей

Рисунок 16

---

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

Создать баннер c аналогичными трансформациями для своей фирмы.

Также Вы можете использовать для выбора контрольного задания следующие варианты.

Вариант №1. Баннер юридической фирмы.

Вариант №2. Баннер стоматологии.

Вариант №3. Баннер фирмы организующей праздники.

Вариант №4. Баннер распродажи новогодних игрушек.

Вариант №5. Баннер массажного салона.

Вариант №6. Баннер кафе.

Вариант №7. Баннер магазина одежды.

Вариант №8. Баннер школы.

Вариант №9. Баннер компьютерной фирмы.

Вариант №10. Баннер кондитерской.