Сложная анимация в Zero Block: мастер-класс
Анимация в Zero Block помогает реализовать самые смелые идеи в дизайне сайта. На бесплатном мастер-классе 12 ноября разберёмся, как настраивать сложные сценарии поведения элементов.
00:00:00 - Введение
00:13:25 - Анимация «Бегущая строка»
00:19:33 - Разбор кейса анимации по ховеру
00:21:52 - Решение - «POINTER EVENTS»
00:23:26 - Ответы на вопросы
00:25:55 - Появление элемента по ховеру
00:30:23 - Ответы на вопросы
00:32:35 - Триггерная анимация по ховеру
00:37:01 - Ответы на вопросы
00:37:31 - Сложная пошаговая анимация
00:49:01 - Эффект инверсии
00:53:53 - Ответы на вопросы
00:59:45 - Эффект увеличения фона по ховеру
01:03:42 - Что такое “easing” и для чего это нужно?
01:08:49 - Ответы на вопросы
01:11:18 - Как придумывать анимации?
01:17:08 - Подводим итог
✨ Ближайшие вебинары Tilda Publishing: webinars.tilda.cc
👉 Создать сайт на Tilda: tilda.cc/ru/
◾ Школа Тильды: tilda.school
🤩 Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: tilda.education/
Подписывайтесь на нас в соцсетях:
◾ Instagram: / tildapublishing
◾ Telegram: t.me/tildanews
◾ VK: vk.com/tildapublishing
◾ Facebook: / tildapublishing
Оставить отзыв о работе на платформе Tilda: tilda.cc/ru/otzyvy
Тильду любят дофамины. Они, прям, множатся, когда в Zero-блоке ложится обалденная для тебя анимация. Всё получается, новое открывается. И пусть твоя анимация не тянет в сравнении с тем гипер-грандиозным- фантастическим, что можно часто встретить в Инете. Но, ведь, ты и не думаешь об этом. Потому что в такой момент твое творение - это яркая дружба с Тильдой.
Спасибо! Очень полезный и содержательный мастер-класс.
Какой же Вы полезный человек 😊 спасибо за Ваш труд
Спасибо! Очень полезный мастер-класс.
Посмотрела на одном дыхании, спасибо!
Мастер класс - бомба. для меня во всяком случае целый день прорабатывал постепенно Макс, спасибо огромное. Гуру:)
Изинги также можно применять не только к шейпам при их векторных движениях, но и - при вращении фигур относительно их центра. Например, крутануть крестик, круг или какой-нибудь круговлй вентиль в направлении по часовой стрелки (и обратно). Варианты изингов дают прикольные эффекты поведения таких фигур.
Отличный мастер-класс, Максим. Появляющееся меню по клику меня просто убило )))) Ведь элементарно, но даже в голову не приходило ))))
Оч. правильное мышление. Спасибо за примеры и дриббл.
Спасибо! Очень полезно!
Очень интересное видео!
какой крутой урок!
Я так долго не понимала, как в фигуру вставить картинку. Спасиб !
Спасибо!
Супер🎉
Можно ли делать одновременно анимацию step by step на ховер и на скрол?
👌
По эффекту воды вы не правы, можно сделать, но это надо писать в коде , а не играть в конструкторе . Для примера kzhead.info/sun/dLl9l5hrp5pufp8/bejne.html&ab_channel=WebForMySelf , там делаю в css и jQuery Ripples
Спасибо за эфир! Такой вопрос, а почему бы во второй анимации (с 20 мин.) поставили именно поинтер ивент у текста, а не просто у самого шейпа добавили тригер сам шейп и текст? И текст при этом рабочим останется. И с кнопкой при этом прокатит (если ее вставлять, об этом говорили во время эфира). Или я что-то путаю?
Здравствуйте, Анна Если для анимации одного элемента использовать сразу два триггера при данном их расположении, то поочерёдное наведение на эти элементы может сбрасывать анимацию до первого шага и воспроизводить её повторно. В данном случае потребуется использовать именно функцию pointer events для текста.
@@TildaPublishing спасибо за ответ! Разобралась получше в этой теме, а то о таких «мелочи» обычно никто не говорит
Подскажите, возможно ли сделать кастомный слайдер при помощи анимации или это можно реализовать только при помощи кода?
Можно создать какую-то имитацию, но полноценно управляемый слайдер сделать все-таки не получится, к сожалению
Начало 14:00
какой графический редактор использовать лучше всего для работы?
Для работы с векторной графикой для веба сейчас наиболее востребованным является Figma. Но рекомендуем всё-таки попробовать и выбрать наиболее удобный для вас самостоятельно
🧡🧡🧡
Добрый день! А подскажите, как сделать анимацию такую: падение книги на книжной полке. Вращение, как я понимаю, будет не от центра объекта. Ось.
Здравствуйте! К сожалению, мы не можем вам подсказать точные настройки анимации. Вы можете создать свою анимацию, используя учебник - tilda.education/web-animation-course
Коллеги, вы крутые! Подскажите какой сервис вы используете в написании этого контента? Нравится что видно и тот кто вещает и монитор.
Если правильно поняли ваш вопрос, то попробуйте OBS
Добрый день, я добавил в zero шейх в котором svg картинка, но она отображается не белой, а серой. Посмотрел может в слоях под чем то.....нет, на экране при редактирование все яркое и белое......как быть???????????
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
как скопировать класс шейпа на маке
Дд, скажите пожалуйста, как сделать бегущвю строку вокруг круга
Здравствуйте! Вы можете ознакомиться с нашим учебником по анимации, возможно вам подойдут данные настройки - tilda.education/courses/webanimation/looprotate/
Может найду здесь ответ. Интернет не помог, есть карточка, с фото и текстом, как сделать что бы при нажатие на карточку, эта карточка открылась полностью с большим текстом. Не в самом блоке, а выдвигается вперед
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
Как зафиксировать элемент внизу экрана при скролле? Например, рука, которая держит смартфон, чтобы низ руки прилипал к нижнему краю экрана.
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
как бегущую строку адаптировать под другие версии (телефон, планшет) все там сдвинут в куче и ничего не бегает :)
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
@@TildaPublishing там все сложно))) Если я делаю сайт на аккаунте заказчика- то письмо с ответом придет и ему на почту и мне))) А мне зачем, чтобы заказчику приходило то, чего он не спрашивал?
1.05 изинг и их отличие
И это все бесплатно