[Фича 21] Разлетающиеся буквы
Привет всем, вчера я уже говорил, что начал работать над проектом агенства. Название у них "Crew media" и они очень хотят анимацию своего логотипа.
В самом проекте так мы делать не будем, но подумал, что стоит показать вам интересную анимацию "разлетающихся" символов.
Смотрите эффект на гифке и изучайте урок! Приступим!
Переносим логотип
Либо же просто работаем с объектом, который будем анимировать. Если это просто текст, как это делал я - будет проще. Если это готовый логотип, то придётся поделить его на несколько частей, которые будут разлетаться.
Вариант для логотипа:
- Общее начертание всего лого, которое будет на фоне (оно может выцветать)
- Остальные детали логотипа. Их нужно вырезать и сохранить в различных svg или png файлах.
Я же работаю с обычными текстовыми блоками.
Пишем текст и копируем его.
Отдельно прописываем каждую букву и сопоставляем их с лого, который стоит выше.
Как итог у нас получилось два лого - один цельный, второй дроблённый на буквы.
Удаляем первый лого, он нам больше не нужен. Выравниваем второй логотип по центру или так, как нужно вам.
Анимируем буквы.
Мы пришли к самому простому шагу - анимация букв. Нужно проанимировать каждую из букв, я покажу на одной - остальные делаем по аналогии.
Открываем пошаговую анимацию.
Event - on scroll - действие выполняется при скролле страницы
Добавляем первый и единственный шаг.
Distance - 370 - это количество пикселей, в течение прокрутки которых выполняется анимация. То есть, если мы поставим 100px, то анимация закончится когда мы пролистаем страницу вниз на 100 пикселей. Надеюсь объяснил понятно))
Move X/Y: перемещение элемента по осям Х и Y. Я хочу, чтобы буква улетела в верхний левый угол.
Ставлю перемещение X: -525 Y: -242
Можно просто взять букву в рабочей области и перетянуть её куда-либо. Зеро блок сам установит пиксели.
Rotate: вращение вокруг своей оси. Я поставлю 65, чтобы буква вращалась в момент перемещения.
Закрываем и смотрим.
Как видим, всё работает.
Аналогично анимируем другие буквы.
На этом всё) Успехов!