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

---

Урок 3. Создание баннера медицинской клиники

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

Задачи:

• создать статическую часть баннера размером 240 на 400 пикселей;
• анимировать элементы баннеры, что бы они возвращались к первому кадру после загрузки страницы;
• настроить время задержки при воспроизведении анимации.

---

В данном уроке мы создадим анимированный баннер размером 240 на 400 пикселей для медицинской центра.
Результат работы вы можете увидеть ниже. Логотип был взят с реальной существующей фирмы, ее адрес - smartclinic-don.ru
Изображения, для выполнения данной работы, вы можете взять в папке image.

Задание №1. Создание html файла, указание классов, структуры баннера

1. Создайте html файл.

2. Создайте контейнер для нашего баннера. Задайте ему класс banner. Дальше все блоки располагайте внутри этого контейнера.

3. Создайте «шапку» нашего баннера, его класс – top.
Внутри шапки будет располагаться один блок, где будет находиться наш логотип, и два строчных элемента span. Задайте им классы lebed, medtop и umntop.

Рисунок 1

4. Далее укажите блок с информацией «имеются противопоказания проконсультируйтесь с врачом», укажите для него класс bottom.

Рисунок 2

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

Рисунок 3

6. Создадим второй центральный блок с классом centerblock2, который при анимации будет заменять первый блок.
В первом строчном элементе будет размещена следующая информация - КОНСУЛЬТАЦИЯ СПЕЦИАЛИСТОВ ПО НАПРАВЛЕНИЯМ:
Во втором строчном элементе разместите следующий список:

• КАРДИОЛОГИЯ
• НЕВРОЛОГИЯ
• ЭНДОКРИНОЛОГИЯ
• БАЛЬНЕОЛЕЧЕНИЕ
• ОРТОПЕДИЯ
• ГАСТРОЭНТЕРОЛОГИЯ
• СТАЦИОНАР

И последним элементом во втором центральном блоке у нас будет блок с номером телефона компании.

Рисунок 4

7. В итоге, если всю структуру создали правильно, то должен получиться аналогичный листинг, который можно увидеть ниже.

Рисунок 5

8. Просмотрите результат в браузере. Он должен быть, как на рисунке ниже.

Рисунок 6

Сейчас, для каждого класса необходимо прописать свойства стилей.

9. Самостоятельно пропишите свойства классов bunner, top, lebed, medtop, umntop. Результатом должна стать шапка баннера и фон всего баннера, как на рисунке 7.

Рисунок 7

Обратим внимание на стили центральных блоков нашего баннера и их анимацию. С остальными свойствами вы должны справиться сами.

Примечание: Не забудьте, что контейнер должен иметь позиционирование - relative, а все остальные элементы (особенно те которые собираетесь анимировать) - absolute.

Задание №2. Описание свойства стилей и анимации первого центрального блока

1. Зададим высоту и ширину нашему классу centerblok 265 на 240 пикселей. Укажем прозрачность нашего центрального блока - 0. Это нужно для корректного описания нашей анимации этого блока, ведь как вы можете увидеть на примере, то блок постепенно исчезает и ему на смену появляется другой блок.
Сразу укажем для свойства анимации имя centerblok , продолжительность 5s и направление, у нас это будет linear.

Рисунок 8

2. Создадим ключевые кадры для нашей анимации центрального блока.
Их будет в данном случае только два: 0% и 100%. Укажем в первом свойство opacity: 1, а во втором opacity: 0. Таким образом наш блок будет в течении 5 секунд постепенно исчезать.

Рисунок 9

Реализуйте код из рисунков 8 и 9, оцените результат.

Задание №3. Анимировать надписи в первом блоке

1. Для стилей telefoncenter и diagnozcenter напишем свойства анимации, они будут одинаковые. Длиться 2 секунды и направление их будет linear.

2. Укажем ключевые кадры. Одна надпись будет будет появляться слева, а вторая справа. Код вы можете увидеть на листинге ниже.

Рисунок 10

В результате должна получиться анимация, как на рисунке 11 (только без повторения).

Рисунок 11

С первым блоком мы закончили. Осталось анимировать второй блок.

Задание №3. Описание свойства анимации второго центрального блока

Общие стили совпадают с первым блоком, за исключением того, что анимация у них прописана по разному. Ключевые кадры у centerblock2 совпадают с первым, изначально наш блок будет невидим и постепенно будет проявляться.

1. Укажем свойства анимации для нашего стиля.

Анимация данного блока будет идти 6 секунд и направление будет равно значению cubic-bezier(.19,1,.22,1), это означает, что она будет быстро начинаться и быстро заканчиваться.

Так же, для того что бы первый эти два блока не проигрывались одновременно, установим задержку анимации на 6 секунд. Сделать это можно при помощи свойства nimation-delay: 6s.

А для того, что бы после проигрывания анимации наш блок не стал снова прозрачным, мы поставим ему следующее состояние элемента animation-fill-mode: forwards.

На этом создание нашего баннера закончено, все стили вы можете посмотреть на листинге ниже.

Рисунок 12

---

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

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

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

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

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

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

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

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

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

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

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

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

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