редакции
Учебник по веб-анимации
Одна глава описывает один прием анимации для привлечения внимания к элементам страницы. Это может быть важный контент или элемент интерфейса. Из учебника вы поймете, как грамотно применять эффекты и научитесь создавать их самостоятельно в редакторе Zero Block.
Весь учебник по веб-анимации →
Вам помогут видеоуроки с подробным разбором каждого эффекта. Все демо-страницы можно использовать в качестве шаблона у себя в проекте, чтобы лучше разобраться в настройках анимации.
Помните о трех правилах использования анимации
- Используйте анимацию в меру. Важно, чтобы эффекты не стали навязчивыми.
- Анимируйте функциональные элементы: пункты меню, кнопки, плитки или активные ссылки.
- Следите за качеством отображения анимации. Анимация на сайте не должна тормозить.
Все приемы анимации в одном видео
Посмотрите эффекты из всех глав учебника за 3 минуты.
Оглавление учебника
Глава 1. Анимация появления в обложке
Как оживить первый экран и захватить внимание посетителей сайта с первых секунд.
Глава 2. Анимация появления списков и карточек
В виде списков и карточек можно оформить отзывы, услуги, кейсы, преимущества, команду, faq.
Глава 3. Ховер эффект на кнопке
Ховер эффект — анимация элемента при наведении. Показываем 6 приемов, которые помогут сделать взаимодействие с кнопками интереснее.
Глава 4. Ховер эффект на карточках и плитках
Эффект помогает обозначить, что с карточками и плитками на странице можно взаимодействовать.
Глава 5. Фиксация текста при скролле
С помощью этого эффекта можно экспериментировать с крупной типографикой и создавать интерактивные сообщения.
Хороший прием, чтобы продемонстрировать из чего состоит продукт или наглядно показать пошаговую инструкцию.
Глава 7. Зацикленная анимация нескольких элементов
Анимируя все элементы разнообразно, можно составлять целые интерактивные истории.
Глава 8. Движение элементов в разных направлениях по скроллу
Такую анимацию можно применять для того, чтобы оживить страницу движущимися иллюстрациями. Ссылка на лекцию
Глава 9. Перемещение элементов вдоль экрана по скроллу
Перемещая элемент вдоль экрана, можно создать навигацию на странице, акцентировать и управлять вниманием зрителя
Глава 10. Анимация текста
Анимированные текстовые композиции помогут создать динамичную атмосферу на сайте и привлечь внимание к важному сообщению.
Глава 11. Изменение прозрачности элементов по скроллу
Глава 12. Фиксация элемента по скроллу
С помощью этого приема можно сделать залипающие иллюстрации для длинных историй, создать элементы навигации по странице
Глава 13. Зацикленный текст
Классный прием для анимации круглых логотипов и надписей
Глава 14. Изменение размера элементов
Классный прием для создания динамичного фона на сайте и управления вниманием пользователя
Глава 15. Эффект бегущей строки
Популярный графический прием для сообщения на странице
Глава 16. Параллакс эффект при скролле
Параллакс эффект позволяет добиться эффекта глубины.