Лого www.SiteHere.ru

Анимация с помощью CSS преобразований. Часть 2 — реальный пример

Анимация с помощью CSS преобразований. Часть 2 — реальный пример

Продолжаем цикл уроков, в которых рассматриваем анимацию с помощью CSS преобразований. Это второй урок, в котором мы посмотрим как применить анимацию преобразований на реальном примере, а точнее на реальном элементе сайта. Надеюсь вы посмотрели первый урок этого цикла и уже понимаете, что анимацию сделать очень легко и просто. Что нравится лично, так это то, что нет необходимости в использовании Javascript. Но не всё так гладко как кажется. Ведь старые браузеры не горят желанием поддерживать свойства CSS3.

Если кто-то не видел первую часть статьи, тогда рекомендую сначала изучить ее — Анимация с помощью CSS преобразований. Часть 1 — введение.

Хочу напомнить что примеры будут корректно работать в браузерах Firefox, Chrome, Safari и Internet Explorer 10.

Сегодня рассмотрим два примера: меню и «анимация ракеты в космосе». Анимации работают только при наведении!!!

PDF отчет

Пример 1 — меню

Начнем с создания меню, которое увеличивается и поворачивается при наведении. Чтобы задать два сразу свойства — необходимо свойства писать просто через пробел.

Для начала посмотрите на пример того что в итоге должно получиться:

(наведите на меню, чтобы увидеть анимацию)

HTML код списка самый стандартный:

1
2
3
4
5
6
7
8
9
10
<div class="exampleMenuAnCSS">
    <ul>
        <li><a href="http://www.sitehere.ru/category/css" title="CSS" target="_blank">Уроки CSS</a></li>
        <li><a href="http://www.sitehere.ru/category/css3" title="CSS3" target="_blank">Уроки CSS3</a></li>
        <li><a href="http://www.sitehere.ru/category/html5" title="HTML5" target="_blank">Уроки HTML5</a></li>
        <li><a href="http://www.sitehere.ru/category/javascript" title="Javascript" target="_blank">Уроки Javascript</a></li>
        <li><a href="http://www.sitehere.ru/category/jquery" title="jQuery" target="_blank">Уроки jQuery</a></li>
        <li><a href="http://www.sitehere.ru/category/testy" title="Тесты" target="_blank">Тесты по сайтостроению</a></li>
    </ul>
</div>

Как видите, я поместил список в блок с классом exampleMenuAnCSS и уже для него я задал CSS свойства.

А CSS свойства следующие:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.exampleMenuAnCSS {
    background-color:#18AF90;
    width:320px;
    -webkit-transition: 1s ease-in-out; 
    -moz-transition: 1s ease-in-out; 
    -o-transition: 1s ease-in-out; 
    transition: 1s ease-in-out;
}
 
.exampleMenuAnCSS:hover {
    background-color:#C70C98;
    -webkit-transform: rotate(360deg) scale(2); 
    -moz-transform: rotate(360deg) scale(2); 
    -o-transform: rotate(360deg) scale(2); 
    -ms-transform: rotate(360deg) scale(2); 
    transform: rotate(360deg) scale(2);
}

Выше вы видите лишь основные свойства. Здесь нет стилей оформления списка. Если вы смотрели предыдущий урок, тогда вы понимаете что делает каждое из свойств. Для тех кто не смотрел первый урок, коротко:

  • rotate(360deg) — поворачивает элемент по часовой на 360 градусов.
  • scale(2) — увеличивает размер элемента в 2 раза.

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

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

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

Пример 2 — ракета в космосе

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

Итак, смотрите саму анимацию:

Rocket

(наведите на изображение космоса, чтобы увидеть анимацию)

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

HTML немного сложнее, чем в прошлых примерах, но не настолько, чтобы не разобраться в нём:

1
2
3
4
5
6
7
<div id="outerspace"> 
    <div class="rocket"> 
        <div>
            <img src="http://www.sitehere.ru/wp-content/uploads/2014/10/rocket-small.png" width="92" height="215" alt="Rocket" />
        </div> 
    </div>
</div>

А сейчас обратите внимание на CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/* начальная позиция */ 
#outerspace { 
    position: relative; 
    height: 400px; 
    width:720px;
    background: #0c0440 url("http://www.sitehere.ru/wp-content/uploads/2014/10/space.jpg"); // фоновое изображение космоса
 
    /* устанавливаем эффект перехода между двумя состояниями для фона */
    -webkit-transition: 3s ease-in; 
    -moz-transition: 3s ease-in; 
    -o-transition: 3s ease-in;
    transition: 3s ease-in; 
} 
 
#outerspace:hover { 
    /* смещаем фон (космос) влево при движении ракеты */
    background-position:50% top;
} 
 
div.rocket div { 
    position: absolute; // абсолютное позиционирование для ракеты, чтобы она была как бы "над" фоном
 
    /* начальное положение ракеты */
    bottom: 10px; 
    left: 20px; 
 
    /* устанавливаем эффект перехода между двумя состояниями блока с изображением */
    -webkit-transition: 3s ease-in; 
    -moz-transition: 3s ease-in; 
    -o-transition: 3s ease-in; 
    transition: 3s ease-in; 
} 
 
div.rocket div img { 
    /* устанавливаем эффект перехода между двумя состояниями изображения */
    -webkit-transition: 2s ease-in-out; 
    -moz-transition: 2s ease-in-out; 
    -o-transition: 2s ease-in-out; 
    transition: 2s ease-in-out; 
} 
 
/* конечная позиция */ 
#outerspace:hover div.rocket div { 
    /* смещаем блок с изображением ракеты на заданные X и Y */
    -webkit-transform: translate(645px,-280px); 
    -moz-transform: translate(645px,-280px); 
    -o-transform: translate(645px,-280px); 
    -ms-transform: translate(645px,-280px); 
    transform: translate(645px,-280px); 
} 
 
#outerspace:hover div.rocket div img {
    /* поворачиваем изображение ракеты на 56 градусов по часовой */
    -webkit-transform: rotate(56deg); 
    -moz-transform: rotate(56deg); 
    -o-transform: rotate(56deg); 
    -ms-transform: rotate(56deg); 
    transform: rotate(56deg); 
 
    /* одновременно уменьшая его до 30px по ширине и 70px по высоте */
    width:30px;
    height:70px;
}

Я прокомментировал CSS код. Надеюсь для вас не составит труда разобраться в нём, ведь он не очень и сложный.

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

Изображение ракеты Изображение ракеты — скачать.
Изображение космоса Изображение космоса — скачать.

Вывод

Это была вторая часть из цикла «Анимация с помощью CSS преобразований». Сегодня вы увидели как можно работать с реальными элементами на сайте, а также сделать более сложную анимацию, где задействованы сразу несколько элементов. Пробуйте создать свою анимацию. Думаю вы уже поняли что с преобразованиями на CSS работать несложно и будете применять их у себя на сайте.

В следующей части мы пойдем еще дальше и рассмотрим еще некоторые свойства, с помощью которых можно сделать анимацию еще более интересной! 😉

Пишите в комментариях, если что-то непонятно или не получается!

Успехов!

С Уважением, Юрий Немец

Анимация с помощью CSS преобразований. Часть 2 — реальный пример 4.67/5 (93.33%) 3 голос(ов)

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
1 комментарий к записи
  • Виктория.

    Юрий, большое спасибо за урок. Всё получилось, всё работает.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *