Главное Свежее Вакансии Образование
😼
Выбор
редакции
2 869 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Учебник по веб-анимации

Выпустили новый бесплатный учебник из 16 интерактивных лекций. В каждой лекции примеры использования анимации в веб-проектах и короткая видеоинструкция, как повторить приемы анимации в Тильде.

b_5c4302ae59b6a.jpg

Одна глава описывает один прием анимации для привлечения внимания к элементам страницы. Это может быть важный контент или элемент интерфейса. Из учебника вы поймете, как грамотно применять эффекты и научитесь создавать их самостоятельно в редакторе Zero Block.

Весь учебник по веб-анимации →

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

Помните о трех правилах использования анимации

  • Используйте анимацию в меру. Важно, чтобы эффекты не стали навязчивыми.
  • Анимируйте функциональные элементы: пункты меню, кнопки, плитки или активные ссылки.
  • Следите за качеством отображения анимации. Анимация на сайте не должна «тормозить».

Все приемы анимации в одном видео

Посмотрите эффекты из всех глав учебника за 3 минуты.

Оглавление учебника

Hhl4u0HgEaEnnqIrH5HkeDMTMwQ9NOfviafB3kyO

Глава 1. Анимация появления в обложке

Как оживить первый экран и захватить внимание посетителей сайта с первых секунд.

Ссылка на лекцию

b_5c457193b96e6.jpg

RA2QO2_Jg6eytMsoS-co4qnl32d92uc3MpbYGOqD

Глава 2. Анимация появления списков и карточек

В виде списков и карточек можно оформить отзывы, услуги, кейсы, преимущества, команду, faq.

Ссылка на лекцию

b_5c4571cd47842.jpg

AIw_H0M-XAoJCD2_bI0jspW2U-pKuePg3BIF-Bc7

Глава 3. Ховер эффект на кнопке

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

Ссылка на лекцию

b_5c4571e087552.jpg

8jSqacc0BfFGX78cHCkQ263PozDBknAlV7ApC62S

Глава 4. Ховер эффект на карточках и плитках

Эффект помогает обозначить, что с карточками и плитками на странице можно взаимодействовать.

Ссылка на лекцию

b_5c4571f8247a5.jpg

jkiMgyni73yffcmcuISvCo7DHnSYuIlS-sPDel9w

Глава 5. Фиксация текста при скролле

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

Ссылка на лекцию

b_5c4571ff1ba1c.jpg

b_5c45c18560d10.jpgГлава 6. Составление элемента из разных частей

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

Ссылка на лекцию

b_5c4573ad651fb.jpg

b_5c45748e69841.jpg

Глава 7. Зацикленная анимация нескольких элементов

Анимируя все элементы разнообразно, можно составлять целые интерактивные истории.

Ссылка на лекцию

b_5c457480b7acf.jpg

b_5c4578dc1b7e2.jpg

Глава 8. Движение элементов в разных направлениях по скроллу

Такую анимацию можно применять для того, чтобы оживить страницу движущимися иллюстрациями. Ссылка на лекцию

b_5c45766e5ab29.jpg

b_5c457a86b1641.jpg

Глава 9. Перемещение элементов вдоль экрана по скроллу

Перемещая элемент вдоль экрана, можно создать навигацию на странице, акцентировать и управлять вниманием зрителя

Ссылка на лекцию

b_5c4576c4ed258.jpg

b_5c457a906847f.jpg

Глава 10. Анимация текста

Анимированные текстовые композиции помогут создать динамичную атмосферу на сайте и привлечь внимание к важному сообщению.

Ссылка на лекцию

b_5c4576f7d7c90.jpg

b_5c457a98d771a.jpg

Глава 11. Изменение прозрачности элементов по скроллу

Ссылка на лекцию

b_5c4577201a60a.jpg

b_5c457aa193c3b.jpg

Глава 12. Фиксация элемента по скроллу

С помощью этого приема можно сделать залипающие иллюстрации для длинных историй, создать элементы навигации по странице

Ссылка на лекцию

b_5c4577515c528.jpg

b_5c457aaaa3c70.jpg

Глава 13. Зацикленный текст

Классный прием для анимации круглых логотипов и надписей

Ссылка на лекцию

b_5c457779a45d3.jpg

b_5c457ab33428a.jpg

Глава 14. Изменение размера элементов

Классный прием для создания динамичного фона на сайте и управления вниманием пользователя

Ссылка на лекцию

b_5c4577a2b1d20.jpg

b_5c457aba97a54.jpg

Глава 15. Эффект бегущей строки

Популярный графический прием для сообщения на странице

Ссылка на лекцию

b_5c4577c75d97a.jpg

b_5c457ac37fc59.jpg

Глава 16. Параллакс эффект при скролле

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

Ссылка на лекцию

+2
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.