Exore LTD » jQuery » Потрясающая анимация на лендинг с помощью плагина TweenMax
Лого SiteHere.ru

Октябрь 31, 2019 Запись была обновлена

Время чтения: 6 мин. Прочитать позже

Потрясающая анимация на лендинг с помощью плагина TweenMax

Потрясающая анимация на лендинг с помощью плагина TweenMax

Как можно удержать человека на лендинге? Цепляющим заголовком? Но ведь они есть на многих сайтах. А если Вы не копирайтер, тогда что делать? Есть очень креативное решение — создать анимацию на лендинге, которая будет находится прямо в шапке. Я сейчас говорю не о Flash анимации, фоновом видео или GIF-ке. Речь идет о красиво появляющихся и исчезающих элементах страницы, то есть HTML-элементах.

Также рекомендую изучить другие статьи на тему анимации на лендинге:

Анимацию смотрите по ссылке ниже:

Посмотреть примерСкачать

В данном уроке Вы можете взять только шапку для своего лендинга и переделать ее под себя. А чтобы научиться создавать полноценный лендинг, советую изучить мой небольшой мини-курс: "Лендинг за 60 минут".

Как создавалась анимация? (ЭТАПЫ)

Этапы создания анимации TweenMax

Я думаю они не будут для Вас сюрпризом, потому что в другом порядке будет сложновато создать полноценную анимацию. Итак, всего у меня получилось 6 этапов:

  • 1 этап. Идея — здесь необходимо придумать какие элементы будут находится на странице. Как они будут выглядеть, где размещаться и куда двигаться.
  • 2 этап. HTML разметка — с элементами определились, пора создать HTML структуру, чтобы элементы хотя бы появились на страницу. Пусть пока что без стилей.
  • 3 этап. Начальный внешний вид — на этом этапе необходимо просто разместить элементы на странице и задать для всех стили.
  • 4 этап. CSS анимация — данный этап я вынес отдельно, потому что он не относиться к общей анимации. Здесь создаем анимацию для элементов "Рука", которые появляются в конце.
  • 5 этап. JS анимация — это основная анимация на странице. Создается с помощью плагина TweenMax.js.
  • 6 этап. Адаптация — переводим пиксели в проценты, а также вносим правки на разных разрешениях с помощью медиа-запросов (@media queries).

Практическая реализация

1 этап. Идея

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

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

2 этап. HTML структура

Первым этапом, как я писал выше, необходимо разместить все действующие элементы на странице:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<header>
    <div id="stage">
        <div class="txOver">
            <div class="hand handF1"></div>
            <div class="hand handF2"></div>
            <div class="hand handF3"></div>
            <div class="hand handF4"></div>
            <div class="hand handF5"></div>
            <div class="hand handF6"></div>
            <div class="hand handF7"></div>
            <div class="hand handF8"></div>
 
            <span>Креативно будет смотреться на Вашем лендинге</span>
        </div>
        <div id="text">
            <span class="tx">Привлекательная анимация</span>
            <span class="star1"><i class="fa fa-star"></i></span>
            <span class="star2"><i class="fa fa-star"></i></span>
            <span class="star3"><i class="fa fa-star"></i></span>
            <span class="star4"><i class="fa fa-star"></i></span>
        </div>
    </div>
</header>

Так как все действие происходит в шапке, то я разместил все необходимые блоки в блоке <header> </header>. Затем внутри идет блок с идентификатором "stage", который участвует в самой анимации.

3 этап. Начальный внешний вид

CSS Часть

Идем дальше и задаем все необходимые стили для всех элементов. То есть сразу указываем им конечное состояние, в котором они будут находится:

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

#stage {
    width: 100%;
    padding-top: 37.5%;
    max-height: 600px;
    position: absolute;
    top:0;
    background: url("../img/bg.jpg");
    background-size: cover;
    overflow: hidden;
}
 
#text {
    position: absolute;
    top:47.333%;
    left:37.5%;
    width: 25%;
    max-width: 400px;
    text-align: center;
    color:#5D625E;
    border-top:2px solid #B4B7B4;
    border-bottom:2px solid #B4B7B4;
    text-transform: uppercase;
}
 
#text span.tx {
    line-height: 40px;
}
 
#text span.star1,#text span.star2,#text span.star3,#text span.star4 {
    position: absolute;
    display: block;
}
 
#text span.star1 {
    top:-30px;
    left:50%;
}
 
#text span.star2 {
    top:-30px;
    left:60%;
}
 
#text span.star3 {
    top:-30px;
    left:40%;
}
 
#text span.star4 {
    top:50px;
    left:50%;
}
 
 
.txOver {
    position: absolute;
    top: 47.4%;
    width: 100%;
    line-height: 40px;
    background: #515451;
    color:#CBCECB;
    text-transform: uppercase;
    text-align: center;
    border-top:2px solid #C9CCC9;
    border-bottom:2px solid #C9CCC9;
    z-index: 10;
    display: table-cell;
    vertical-align: middle;
    transform:scaleY(0);
}
 
.txOver span {
    width: 65.229%;
    margin:0 auto;
}
 
.txOver span:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
 
.hand {
    position: absolute;
    background: url("../img/hand.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 12.5%;
    padding-top:15%;
}
 
.handF1 {
    top:-10%;
    left:10.75%;
    transform:rotate(-40deg);
    animation:hand1anim 3s ease infinite;
}
 
.handF2 {
    top:-10%;
    left:43.75%;
    animation:hand2anim 3s ease 0.4s infinite;
}
 
.handF3 {
    top:-10%;
    right:10.75%;
    transform:rotate(20deg);
    animation:hand3anim 3s ease 0.2s infinite;
}
 
.handF4 {
    top:32%;
    right:-4%;
    transform:rotate(90deg);
    animation:hand4anim 3s ease 0.4s infinite;
}
 
.handF5 {
    top:32%;
    left:-4%;
    background: url("../img/handi.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform:rotate(-90deg);
    animation:hand5anim 3s ease 0.2s infinite;
}
 
.handF6 {
    bottom:-12%;
    left:10.75%;
    transform:rotate(-140deg);
    animation:hand6anim 3s ease infinite;
}
 
 
.handF7 {
    bottom:-10%;
    left:43.75%;
    animation:hand7anim 3s ease 0.2s infinite;
    transform:rotate(180deg);
}
 
.handF8 {
    bottom:-10%;
    right:10.75%;
    transform:rotate(140deg);
    animation:hand8anim 3s ease 0.1s infinite;
}

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

4 этап. CSS анимация

Далее необходимо написать анимацию для блоков «Рука», которые появляются в конце. Данный код я также привожу без посторонних префиксов, чтобы он не занимал 3 экрана:

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

@keyframes hand1anim {
    0% {
        top:-10%;
        left:10.75%;
    }
 
    50% {
        top:-6%;
        left:12%;
    }
 
    100% {
        top:-10%;
        left:10.75%;
    }
}
 
@keyframes hand2anim {
    0% {
        top:-10%;
    }
 
    50% {
        top:-6%;
    }
 
    100% {
        top:-10%;
    }
}
 
@keyframes hand3anim {
    0% {
        top:-10%;
        right:10.75%;
    }
 
    50% {
        top:-6%;
        right:12%;
    }
 
    100% {
        top:-10%;
        right:10.75%;
    }
}
 
@keyframes hand4anim {
    0% {
        right:-5%;
    }
 
    50% {
        right:-1%;
    }
 
    100% {
        right:-5%;
    }
}
 
@keyframes hand5anim {
    0% {
        left:-5%;
    }
 
    50% {
        left:-1%;
    }
 
    100% {
        left:-5%;
    }
}
 
@keyframes hand6anim {
    0% {
        bottom:-12%;
        left:10.75%;
    }
 
    50% {
        bottom:-6%;
        left:12%;
    }
 
    100% {
        bottom:-12%;
        left:10.75%;
    }
}
 
@keyframes hand7anim {
    0% {
        bottom:-10%;
    }
 
    50% {
        bottom:-6%;
    }
 
    100% {
        bottom:-10%;
    }
}
 
@keyframes hand8anim {
    0% {
        bottom:-10%;
        right:10.75%;
    }
 
    50% {
        bottom:-6%;
        right:12%;
    }
 
    100% {
        bottom:-10%;
        right:10.75%;
    }
}

Как Вы могли заметить, анимация очень похожа для разных блоков.

Если у Вас возникли проблемы и Вы не можете разобраться с анимацией, тогда рекомендую изучить данную статью — CSS3 анимация для начинающих.

5 этап. JS анимация

Javascript часть

Основная анимация создана с помощью плагина TweenMax.js. Поэтому для начала необходимо подключить следующие библиотеки перед закрывающим тегом </body>:

  • jQuery.min.js
  • TweenMax.min.js — основной плагин для работы с анимацией.
  • EasePack.min.js — набор функций изменения скорости анимации.
  • sitehere-animation.js — наша анимация.

Подключаем их следующим образом:

HTML КОД
1
2
3
4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/sitehere-animation.js"></script>

А сейчас не пугайтесь, потому что я приведу код файла sitehere-animation.js, чтобы Вы увидели как создается анимация:

JAVASCRIPT КОД
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

$(function() {
    var stage = $("#stage"),
        text = $("#text"),
        tx = $(".tx"),
        txOver = $(".txOver"),
        txOverContent = $(".txOver span"),
        star1 = $(".star1"),
        star2 = $(".star2"),
        star3 = $(".star3"),
        star4 = $(".star4"),
        handF1 = $(".handF1"),
        handF2 = $(".handF2"),
        handF3 = $(".handF3"),
        handF4 = $(".handF4"),
        handF5 = $(".handF5"),
        handF6 = $(".handF6"),
        handF7 = $(".handF7"),
        handF8 = $(".handF8");
 
 
    var tl = new TimelineMax();
 
    tl.from(stage, 1, {scale:"0"})
        .from(text, 1, {scaleX:"0",opacity:"0"})
        .from(tx, 1, {opacity:"0",ease:Back.easeOut})
        .from(star1, 1, {rotation:"-45deg", scale:"2", opacity:"0", top:"-=80%", left:"+=10%"}, 'starBottomTop')
        .from(star4, 1, {rotation:"45deg", scale:"2", opacity:"0", top:"+=80%", left:"-=10%"}, 'starBottomTop')
        .from(star2, 1, {opacity:"0", left:"-=10%"}, 'starLeftRight')
        .from(star3, 1, {opacity:"0", left:"+=10%"}, 'starLeftRight')
        .to(txOver, 0.6, {scaleY:"1",  ease:Back. easeOut.config( 1.7)})
        .to(txOver, 1.5, {top:"0",borderColor:"#515451",height:"100%", ease:Elastic. easeOut.config( 1, 0.3)})
        .from(handF1, 0.7, {scale:"0"})
        .from(handF2, 0.7, {scale:"0", delay:-0.2},'hands')
        .from(handF3, 0.7, {scale:"0", delay:-0.6})
        .from(handF4, 0.7, {scale:"0", delay:-0.2})
        .from(handF5, 0.7, {scale:"0", delay:-0.3},'hands')
        .from(handF6, 0.7, {scale:"0", delay:-0.5})
        .from(handF7, 0.7, {scale:"0", delay:-0.3},'hands')
        .from(handF8, 0.7, {scale:"0", delay:-0.5});
});

После просмотра кода, кто-то скажет что я зря использовал библиотеку jQuery, потому что с помощью я только осуществлял поиск элементов на странице. Ведь можно было с помощью Javascript сделать ту же работу. Но я ее подключил в перспективе на более сложную анимацию и создание более сложных эффектов на странице.

Я понимаю, что достаточно сложно описать весь код, каждую функцию, но я хочу немного пройтись по коду, чтобы у Вас было хотя бы общее понимание (для тех, кого зацепила данная анимация, Вы можете обратиться связаться со мною лично, и я объясню Вам всё в индивидуальном порядке процесс создания анимации):

  • Строки: с 2 по 18 — набор переменных, которые отвечают за определенные элементы на странице.
  • Строка: 21 — создаем временную шкалу, для более удобного управления анимацией в дальнейшем.
  • Строки: 23 по 39 — создание анимации для каждого элемента на странице.

6 этап. Адаптация

Чтобы наша анимация хорошо смотрелась на мобильных устройствах, необходимо все пиксели перевести в проценты, а также написать медиа-запросы для различных экранов, чтобы всё правильно отображалось. Поэтому CSS файл необходимо дополнить следующими строками:

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

@media all and (max-width: 1200px){
    #text {
        width: 40%;
        left:33%;
    }
}
 
@media all and (max-width: 768px){
    body {
        font:normal 90% 'Roboto', sans-serif;
    }
 
    #text {
        width: 50%;
        left:25%;
    }
}
 
@media all and (max-width: 480px){
    body {
        font:normal 80% 'Roboto', sans-serif;
    }
 
    #text {
        width: 64%;
        top:39%;
        left:18%;
    }
}

Я думаю понятно что мы сделали: некоторые стили переопределили для различных экранов.

Вывод

Данная анимация — это кое-что большее, чем просто CSS анимация. Потому что с помощью данного плагина можно создавать анимированные шапки, которые будут притягивать внимание посетителей.

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

Также существенным плюсом данной анимации является то, что Вы анимируете элементы страницы. Никакое видео, с такими эффектами даже не сравниться по скорости загрузки.

Успехов!

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

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

12 комментариев к записи
  • Алексей

    Хотел бы узнать ваше мнение. Делал одно время анимированные плагины для вордпресс. Типа слайдера и другие. Делал и тестировал под все самые распространенные браузеры. Их там 5 или 6. Я имею ввиду самые распространенные. Так вот вопрос : может быть что плагины не пользовались популярностью из за того что неправильно работали в некоторых менее распространенных браузерах? Спасибо

     
    Ответить
    • Юрий

      Здравствуйте, Алексей!

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

      Причин может быть очень много, возможно Вы просто их не совсем правильно преподнесли или не выделили преимущества должным образом и т.д.

       
      Ответить
    • vladimir

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

       
      Ответить
  • Алексей

    Здравствуйте. Почему бы не использовать для подобных анимаций просто jquery?

     
    Ответить
    • Юрий

      Здравствуйте, Алексей.

      Потому что времени на написание кода у Вас уйдет намного больше. А также сам объем кода будет значительно больше. Библиотека TweenMax создана специально для анимации DOM-элементов.

       
      Ответить
  • masik

     Спасибо за прекрасную статью.

    Попытался использовать на своем сайте.

    Все работает, но когда попытался настроить под свою идею — ничего не получилось.

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

    Я понял, что все эти настройки зашиты в TweenMax.min.js.

    Но  я смог только открыть этот файл в саблайме. Редактировать не получается. Все в одну строчку.

    Понял, что методом тыка ничего не получится.

    Отсюда вопрос: Каким редактором редактировать TweenMax.min.js и где найти описание тегов или функций, чтобы не вслепую топтать клаву.

    И еще хотелось бы досконально изучить плагин TweenMax. Есть ли мануал на русском? Все, что нарыл в тырнете — это описание SVG.

    Извините, что много букофф.

    С уважением…

     
    Ответить
    • Юрий Немец

      Добрый день!

      Вам необходим файл sitehere-animation.js, который находится в папке js в архиве демо. Именно там необходимо задавать анимацию для своих элементов.

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

       
      Ответить
  • masik

    Спасибо, Юрий!

    Я сейчас читаю Ваш сайт как увлекательнейший фантастический роман.

    Столько на нем самых невероятных плюшек и фишек.

    Можно сделать уникальный ресурс только на материалах Вашего сайта.

    Больше ничего искать в тырнете не надо.

    Спасибо за Ваш титанический труд.

    А как вы редактируете файлы, которые в одну строчку с 46937 колонками?

    Или их сначала надо преобразовывать?

    С уважением…

     
    Ответить
    • Юрий Немец

      Спасибо! Мне действительно приятно, что мой сайт приносит пользу 🙂 .

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

       
      Ответить
  • masik

    Извините, что донимаю Вас вопросами, но больше спросить не у кого.

    В каком файле находятся настройки позиционирования элементов?

    С уважением…

     
    Ответить
    • Юрий Немец

      В файле стилей — style.css.

       
      Ответить
  • Антон

    Как-то можно сделать движение по дуге, по синусойде или что-то такое?

     
    Ответить

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

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