Tilda выпустила учебник по веб-анимации

Бесплатный учебник из 16 уроков о том, как использовать анимацию в веб-проектах.

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

Все примеры из учебника можно повторить в конструкторе Tilda — в каждом уроке есть видеоинструкция, которая поможет разобраться, как создать анимацию.

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

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

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

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

Перемещая элемент вдоль экрана по скроллу, можно управлять вниманием посетителя сайта.

Параллакс позволяет добиться эффекта глубины при просмотре страницы благодаря разной скорости движения элементов.

Все уроки и примеры учебника по веб-анимации — по ссылке.