Tilda випустила безкоштовний посібник з веб-анімації з 16 уроками. В них розповідається, як застосовувати ефекти анімації на сайтах.
Також посібник розповідає, як за допомогою анімації привертати увагу користувачів до важливого контенту та елементів інтерфейсу: кнопок, пунктів меню, активних посиланнь, плиток. Всі приклади з підручника можна повторити в конструкторі Tilda — в кожному уроці є відеоінструкція, яка допоможе розібратися, як створити анімацію.
Перший урок: Анімація появи в обкладинці
Тут розповідається, як анімувати елементи в обкладинках. Для кожного прикладу всередині уроку описані налаштування для повторення ефекту.
Другий урок: Анімація появи списків і карток
У вигляді списків і карток можна оформити відгуки, послуги, кейси, переваги, команду, FAQ. Урок присвячений тому, як привернути увагу до елементів цих блоків за допомогою анімації появи.
Третій урок: Hover-ефект для плиток
Hover-ефект — це анімація елемента при наведенні. Допомагає зрозуміти, що з картками і плитками на сторінці можна взаємодіяти. Популярні Hover-ефекти для плиток: затемнення фільтра, поява тіні, поява контенту, зміна масштабу, зміна зображення, зміщення.
Четвертий урок: Збірка цілого елемента з частин
Хороший прийом, щоб продемонструвати, з чого складається продукт. У прикладі елементи переміщаються зі зміною розміру при скролі.
П’ятий урок: Переміщення елементів вздовж екрана при прокрутці
Переміщаючи елемент уздовж екрану при прокрутці, можна привернути увагу відвідувача сайту.
Шостий урок: Паралакс-ефект при прокрутці
Паралакс дозволяє домогтися ефекту глибини при перегляді сторінки завдяки різній швидкості руху елементів.
Дізнатися більше про теми уроків можна за посиланням.
Раніше Depositphotos і Tilda розповіли про тенденції візуальних комунікацій — 9 трендів на 2019 рік.