Сложная анимация в Zero Block: мастер-класс
ฝัง
- เผยแพร่เมื่อ 15 ส.ค. 2024
- Анимация в 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: tildapu...
◾ Facebook: / tildapublishing
Оставить отзыв о работе на платформе Tilda: tilda.cc/ru/ot...
Тильду любят дофамины. Они, прям, множатся, когда в Zero-блоке ложится обалденная для тебя анимация. Всё получается, новое открывается. И пусть твоя анимация не тянет в сравнении с тем гипер-грандиозным- фантастическим, что можно часто встретить в Инете. Но, ведь, ты и не думаешь об этом. Потому что в такой момент твое творение - это яркая дружба с Тильдой.
Какой же Вы полезный человек 😊 спасибо за Ваш труд
Изинги также можно применять не только к шейпам при их векторных движениях, но и - при вращении фигур относительно их центра.
Например, крутануть крестик, круг или какой-нибудь круговлй вентиль в направлении по часовой стрелки (и обратно). Варианты изингов дают прикольные эффекты поведения таких фигур.
Посмотрела на одном дыхании, спасибо!
Отличный мастер-класс, Максим. Появляющееся меню по клику меня просто убило )))) Ведь элементарно, но даже в голову не приходило ))))
Мастер класс - бомба.
для меня во всяком случае
целый день прорабатывал постепенно
Макс, спасибо огромное. Гуру:)
Спасибо! Очень полезный и содержательный мастер-класс.
Спасибо! Очень полезный мастер-класс.
Я так долго не понимала, как в фигуру вставить картинку. Спасиб !
Оч. правильное мышление. Спасибо за примеры и дриббл.
Очень интересное видео!
Спасибо! Очень полезно!
👌
какой крутой урок!
Супер🎉
Спасибо!
Может найду здесь ответ. Интернет не помог, есть карточка, с фото и текстом, как сделать что бы при нажатие на карточку, эта карточка открылась полностью с большим текстом. Не в самом блоке, а выдвигается вперед
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc
В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
Можно ли делать одновременно анимацию step by step на ховер и на скрол?
Как зафиксировать элемент внизу экрана при скролле? Например, рука, которая держит смартфон, чтобы низ руки прилипал к нижнему краю экрана.
Добрый день!
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc.
В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
По эффекту воды вы не правы, можно сделать, но это надо писать в коде , а не играть в конструкторе . Для примера th-cam.com/video/AUDg43ph8Kg/w-d-xo.html&ab_channel=WebForMySelf , там делаю в css и jQuery Ripples
Спасибо за эфир! Такой вопрос, а почему бы во второй анимации (с 20 мин.) поставили именно поинтер ивент у текста, а не просто у самого шейпа добавили тригер сам шейп и текст? И текст при этом рабочим останется. И с кнопкой при этом прокатит (если ее вставлять, об этом говорили во время эфира). Или я что-то путаю?
Здравствуйте, Анна
Если для анимации одного элемента использовать сразу два триггера при данном их
расположении, то поочерёдное наведение на эти элементы может сбрасывать анимацию до первого шага и воспроизводить её повторно. В данном случае потребуется использовать именно функцию pointer events для текста.
@@TildaPublishing спасибо за ответ! Разобралась получше в этой теме, а то о таких «мелочи» обычно никто не говорит
Начало 14:00
Коллеги, вы крутые! Подскажите какой сервис вы используете в написании этого контента? Нравится что видно и тот кто вещает и монитор.
Если правильно поняли ваш вопрос, то попробуйте OBS
какой графический редактор использовать лучше всего для работы?
Для работы с векторной графикой для веба сейчас наиболее востребованным является Figma. Но рекомендуем всё-таки попробовать и выбрать наиболее удобный для вас самостоятельно
Добрый день!
А подскажите, как сделать анимацию такую: падение книги на книжной полке. Вращение, как я понимаю, будет не от центра объекта. Ось.
Здравствуйте! К сожалению, мы не можем вам подсказать точные настройки анимации. Вы можете создать свою анимацию, используя учебник - tilda.education/web-animation-course
Подскажите, возможно ли сделать кастомный слайдер при помощи анимации или это можно реализовать только при помощи кода?
Можно создать какую-то имитацию, но полноценно управляемый слайдер сделать все-таки не получится, к сожалению
как бегущую строку адаптировать под другие версии (телефон, планшет) все там сдвинут в куче и ничего не бегает :)
Добрый день!
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc.
В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
@@TildaPublishing там все сложно))) Если я делаю сайт на аккаунте заказчика- то письмо с ответом придет и ему на почту и мне))) А мне зачем, чтобы заказчику приходило то, чего он не спрашивал?
Добрый день, я добавил в zero шейх в котором svg картинка, но она отображается не белой, а серой. Посмотрел может в слоях под чем то.....нет, на экране при редактирование все яркое и белое......как быть???????????
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
🧡🧡🧡
Дд, скажите пожалуйста, как сделать бегущвю строку вокруг круга
Здравствуйте! Вы можете ознакомиться с нашим учебником по анимации, возможно вам подойдут данные настройки - tilda.education/courses/webanimation/looprotate/
как скопировать класс шейпа на маке
1.05 изинг и их отличие
И это все бесплатно