новини
Tilda випустила безкоштовний посібник з веб-анімації
31 січня, 2019

Tilda випустила безкоштовний посібник з веб-анімації з 16 уроками. В них розповідається, як застосовувати ефекти анімації на сайтах.

Також посібник розповідає, як за допомогою анімації привертати увагу користувачів до важливого контенту та елементів інтерфейсу: кнопок, пунктів меню, активних посиланнь, плиток. Всі приклади з підручника можна повторити в конструкторі Tilda — в кожному уроці є відеоінструкція, яка допоможе розібратися, як створити анімацію.

Перший урок: Анімація появи в обкладинці

Тут розповідається, як анімувати елементи в обкладинках. Для кожного прикладу всередині уроку описані налаштування для повторення ефекту.

Другий урок: Анімація появи списків і карток

У вигляді списків і карток можна оформити відгуки, послуги, кейси, переваги, команду, FAQ. Урок присвячений тому, як привернути увагу до елементів цих блоків за допомогою анімації появи.

Третій урок: Hover-ефект для плиток

Hover-ефект — це анімація елемента при наведенні. Допомагає зрозуміти, що з картками і плитками на сторінці можна взаємодіяти. Популярні Hover-ефекти для плиток: затемнення фільтра, поява тіні, поява контенту, зміна масштабу, зміна зображення, зміщення.

Четвертий урок: Збірка цілого елемента з частин

Хороший прийом, щоб продемонструвати, з чого складається продукт. У прикладі елементи переміщаються зі зміною розміру при скролі.

П’ятий урок: Переміщення елементів вздовж екрана при прокрутці

Переміщаючи елемент уздовж екрану при прокрутці, можна привернути увагу відвідувача сайту.

Шостий урок: Паралакс-ефект при прокрутці

Паралакс дозволяє домогтися ефекту глибини при перегляді сторінки завдяки різній швидкості руху елементів.

 

Дізнатися більше про теми уроків можна за посиланням.


Раніше Depositphotos і Tilda розповіли про тенденції візуальних комунікацій — 9 трендів на 2019 рік.

У нас є ще дещо для вас

переклад
16 дизайн принципов, которые упростят заполнение любой формы
#спецпроект
Евгений Нечипорчук
и его полезные ископаемые
Статті
Свобода на практике: советы дизайнеру
Мария Леоненко

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: