{"id":13775,"url":"\/distributions\/13775\/click?bit=1&hash=fb86ea724ec65faf9a272bc82130786641c853e7ec97dbefa66032a64581db26","title":"\u00ab\u200e\u041c\u043e\u0434\u0443\u043b\u044c\u0431\u0430\u043d\u043a\u00bb \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0442\u0430\u0440\u0438\u0444\u044b \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u043e\u0432 \u043d\u0430 \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u0430\u0445","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}

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

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

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

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

Несколько примеров из учебника

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

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

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

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

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

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

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

0
15 комментариев
Написать комментарий...
Сергей Я

Почему-то вспомнилось обилие анимации и всяких вылетающих плашек в презентациях школьников и студентов. +5 к привлекательности. Они так думали.

Ответить
Развернуть ветку
Роман Яковенко
Автор

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

Ответить
Развернуть ветку
Sergey Danilov

На сайте Apple, например, шикарнейший параллакс.

Ответить
Развернуть ветку
Сергей Я

Да я не против) Я просто про презентации.

Ответить
Развернуть ветку
Сергей Шабанов

Учебник как сделать некоторую анимацию в тильде, но не "Учебник по веб-анимации"

Ответить
Развернуть ветку
Vasek Romanov

Тильда вообще молодцы. Столько полезного у них блоге да еще и бесплатно

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Ivan Yurkov

В какой-то момент казалось, что сайт начал как то медленнее работать из-за этой анимации((
Надо понимать, на что идёшь ради красоты..

Ответить
Развернуть ветку
Роман Яковенко
Автор

Любая анимация забирает на себя ресурсы браузера. При умеренном использовании, это не будет заметно. Еще анимация может тормозить сильнее, если на сайте включен вебвизор Яндекс Метрики. Он ловит все изменения на экране и тоже отнимает ресурсы.

Ответить
Развернуть ветку
Roman Fedoseev

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

Ответить
Развернуть ветку
Роман Яковенко
Автор

Но видеотуториалы — это только дополнение к приемам из уроков, чтобы показать, как повторить анимацию из примеров в Тильде.

Ответить
Развернуть ветку
Сергей Бочков

почему?

Ответить
Развернуть ветку
Valentin Dombrovsky

Сегодня на всех сайта «Комитета» картинки сюоят вреия от времени. Почему-то.

Ответить
Развернуть ветку
Илья Чекальский

А если ещё раз такое будет, сможете скинуть скриншот ошибок из консоли браузера на [email protected] или в телеграм @ilya0, пожалуйста?

Ответить
Развернуть ветку
Сергей Бочков

у меня такое часто. из-за этого стал редко посещать ресурс.
странно, но сейчас все ок

Ответить
Развернуть ветку
Читать все 15 комментариев
null