Простий спосіб створення анімації за допомогою плагіна tweenmax

Відео: Адаптивна верстка Landing Page. Джедай верстки # 5. Частина 14. Анімація

Приголомшлива анімація на Лендінгем за допомогою плагіна TweenMax

Як можна утримати людину на Лендінзі? Чіпляють заголовком? Але ж вони є на багатьох сайтах. А якщо Ви не копірайтер, тоді що робити? Є дуже креативне рішення - створити анімацію на Лендінзі, яка буде знаходиться прямо в шапці. Я зараз говорю не про Flash анімації, фоновому відео або GIF-ке. Йдеться про красиво з`являються і зникаючих елементах сторінки, тобто HTML-елементах.

Також рекомендую вивчити інші статті на тему анімації на Лендінзі:

Кругова анімація блоків для Лендінзі
Анімована шапка для Лендінзі
Поява частин Лендінзі час прокручування

Анімацію дивіться за посиланням нижче:

Подивитися прімерСкачать

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

Як створювалася анімація? (ЕТАПИ)

Я думаю вони не будуть для Вас сюрпризом, тому що в іншому порядку буде важкувато створити повноцінну анімацію. Отже, всього у мене вийшло 6 етапів:

Відео: Майстер-клас зі створення Landing Page за допомогою LPgenerator

1 етап. ідея - тут необхідно придумати якісь елементи будуть знаходиться на сторінці. Як вони будуть виглядати, де розміщуватимуться і куди рухатись.
2 етап. HTML розмітка - з елементами визначилися, пора створити HTML структуру, щоб елементи хоча б з`явилися на сторінку. Нехай поки що без стилів.
3 етап. Початковий зовнішній вигляд - на цьому етапі необхідно просто розмістити елементи на сторінці і поставити для всіх стилі.
4 етап. CSS анімація - даний етап я виніс окремо, тому що він не ставитися до загальної анімації. Тут створюємо анімацію для елементів "Рука", які з`являються в кінці.
5 етап. JS анімація - це основна анімація на сторінці. Створюється за допомогою плагіна TweenMax.js.
6 етап. адаптація - переводимо пікселі в відсотки, а також вносимо правки на різних дозволах за допомогою медіа-запитів (@media queries).

практична реалізація

1 етап. ідея

Ідея прийшла після перегляду вступних роликів для відео. Вони смотряться дуже красиво і не дратують, якщо анімація відбувається плавно, без різких рухів.

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

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

Першим етапом, як я писав вище, необхідно розмістити всі діючі елементи на сторінці:

HTML КОД

1234567891011121314151617181920212223

lt;div id="Stage"gt;lt;div class="TxOver"gt;lt;div class="Hand handF1"gt; lt;/divgt;lt;div class="Hand handF2"gt; lt;/divgt;lt;div class="Hand handF3"gt; lt;/divgt;lt;div class="Hand handF4"gt; lt;/divgt;lt;div class="Hand handF5"gt; lt;/divgt;lt;div class="Hand handF6"gt; lt;/divgt;lt;div class="Hand handF7"gt; lt;/divgt;lt;div class="Hand handF8"gt; lt;/divgt;lt;spangt; Креативно буде виглядати на Вашому Лендінзіlt;/spangt;lt;/divgt;lt;div id="Text"gt;lt;span class="Tx"gt; Приваблива анімаціяlt;/spangt;lt;span class="Star1"gt; lt;i class="Fa fa-star"gt; lt;/igt; lt;/spangt;lt;span class="Star2"gt; lt;i class="Fa fa-star"gt; lt;/igt; lt;/spangt;lt;span class="Star3"gt; lt;i class="Fa fa-star"gt; lt;/igt; lt;/spangt;lt;span class="Star4"gt; lt;i class="Fa fa-star"gt; lt;/igt; lt;/spangt;lt;/divgt;lt;/divgt;lt;/headergt;

Так як вся дія відбувається в шапці, то я розмістив всі необхідні блоки в блоці. Потім всередині йде блок з ідентифікатором "Stage", який бере участь в самій анімації.

3 етап. Початковий зовнішній вигляд

Йдемо далі і задаємо всі необхідні стилі для всіх елементів. Тобто відразу вказуємо їм кінцевий стан, в якому вони будуть знаходиться:

CSS КОД

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150

#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.jpg")-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.jpg")-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 КОД

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123

@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 анімація

Відео: Як додати анімацію на landing page?

Основна анімація створена за допомогою плагіна TweenMax.js. Тому для початку необхідно підключити такі бібліотеки перед закриває тегом:

jQuery.min.js
TweenMax.min.js - основний плагін для роботи з анімацією.
EasePack.min.js - набір функцій зміни швидкості анімації.
sitehere-animation.js - наша анімація.

Підключаємо їх наступним чином:

HTML КОД

lt;script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"gt; lt;/scriptgt;lt;script src="Js / TweenMax.min.js"gt; lt;/scriptgt;lt;script src="Js / EasePack.min.js"gt; lt;/scriptgt;lt;script src="Js / sitehere-animation.js"gt; lt;/scriptgt;

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

javascript КОД

12345678910111213141516171819202122232425262728293031323334353637383940

$(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 КОД

1234567891011121314151617181920212223242526272829

@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 анімація. Бо за допомогою даного плагіна можна створювати анімовані шапки, які будуть притягувати увагу відвідувачів.