Создавать CSS анимации стало очень просто! + новый формат
HTML-код
- Опубликовано: 28 июн 2024
- Создавать анимации всегда было очень сложной задачей, но это в прошлом! С этими новыми devtools в Google Chrome стало намного легче создавать любого типа анимации. Всем рекомендую!
Демо анимаций из видео - sin9k.github.io/modal-animati...
Исходники демо - github.com/Sin9k/modal-animat...
Поддержать Айти Синяка можно здесь:
RUclips: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
01:07 Зачем дебажить анимацию?
04:20 Знакомимся с вкладкой animations
11:17 Дебажим более сложный пример
13:20 Дебажим зацикленную анимацию
19:40 Изменения функции анимации в realtime
21:03 Подытожим
21:53 Неудачные дубли
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
Круто! Хотелось бы такие видосы о всех функциях девтулз. 👍👍👍👍
Утренний анимационный ликбез. Круто. Смотрю 👏
Какие гости) надеюсь найдешь для себя, что то полезное!)
@@it-sin9k мои познания в анимации закончились вместе с jQuery))
По поводу формата - на мой взгляд, формат хороший. Главное то, что я подписан не только на айти синяк. Но и на классного инженера, который умеет говорить про интересные штуки. Формат просто другой. Но тут он воспринимается хорошо. Я вижу вас на камере и это словно беседа, вы что-то объясняете, а я попиваю утренний кофе, вникая в суть темы)
Спасибо за развернутый фидбек))
Давай Синяка. Ты - крутой чувак, но говорящих голов много, а Синяк хороший узнаваемый персонаж
Синяк однозначно вернется уже в след видосе)
Ох, видеть человека вживую всегда приятнее) но если что, альтерэго тоже пойдёт 😅
Огонь, формат зашёл, контента любого и побольше)
Спасибо за контент!!!! Как всегда топчик! Единственно, примеры я бы предложил сделать на темном фоне, больно смотреть на полном экране, особенно вечером ))
Спасибо! Учту на будущее)
Формат классный, продолжайте в том же духе! :)
Замечательный формат, все так же полно и информативно. Синяк может не спешить из отпуска.
Вау круто! Приятно слушать и видеть
Пушка-гонка!
Видео полезное как всегда. Это можно сказать константа! По поводу нового формата - анимационный персонаж это круто, но мне больше нравится живое человеческое лицо! ПРОШУ И ДАЛЬШЕ ЗАПИСЫВАТЬ ВИДЕО В ТАКОМ ФОРМАТЕ!
Будем время от времени делать такой формат) и мб голосовалку замучу в телеграм канале по тому, что людям больше нравится) проблема в том, что длина видео сильно увеличивается)
@@it-sin9k а по временным затратам и в целом какой формат легче записывается?
если речь о наших затратах, то такой формат записывать быстрее. Но опять же тут не было наших фирменных визуализаций, тут видео идеально подходит под такой формат. Но если нужно визуализировать как виртуальное дерево работает, то надо еще потренироваться, как это правильно записывать. И так же видео менее адаптированно под мобильных пользователей, а их у нас много
@@it-sin9k Живому человеку доверяешь больше, плюс видны эмоции это тоже огромный плюс.
Сам синяк прикольный, но уверен, что он занимает больше сил! А контент супер! Конечно лучше делать то что легче, при этом без потери качества контента!
Ахах. Гугл присмативает за мной и предлагает как раз то что необходимо было) Автору от души)
Спасибо! Отличный материал и подача!
Я не хочу испортить тебе настроение потому что это первое видео в таком формате ,наверное просто первый блин комом))
Так держать🙂
Спасибо за сдержанный комментарий) я тоже оцениваю качество видоса на прям низком уровне))
Классный формат. Спасибо за полезное видео❤❤❤
Когда человек талантлив, он делает одиннаково круто в любом формате, главное не останавливайся)))
Круто, спасибо большое)
Буду знать)
шикарный ролик, это действительно очень круто и очень удобно :)
спасибо :)
Отлично 🤗
Спасибо. хороший формат, то что нужно для разнообразия
огонь 🔥🔥🔥
Спасибо. Лично мне такой формат нравится намного больше)
у него проблема, в том, что видео резко увеличиваются в длине в раза 2-3)
шикарно спасибо
супер видос, большое спасибо
контент - топчик ! ) Спасибо
огонь!
Блин... Это ж так удобно. Я тепер на несколько уровней стану више. У меня много анимаций, но не таких интересных как после работы с дебагером как с крутым редактором. Спасибо. Не понимаю как я мог такое проспать. ХаХа.. А я сразу понял что к чему не досмотрев видео)) Круто сделали
Я испытывал такие же эмоции после того как открыл для себя дебаггер)
Годнота🎉
Спасибо! Нравится :)
Начало 4:20
Твои видео невозможно остановиться смотреть
Спасибо ❤
Спасибо!
Супер, нравиццо! :)
Формат супер, продолжай
Формат супер, делай как нравится
Праздник в дом приходит) когда у Синяка новое видео выходит)))
праздника вкус всегда настоящий)))
спасибо за видео)
Александр вы крут) контент очень интересный. ❤
Очень классное видео! А самое главное очень полезное! Не знал что можно дебажить анимацию! Блин очень круто!
Я сам как узнал, знатно приболдел))
Спасибо:)
Любопытное видео. Посмотрел с интересом
Привет! Спасибо за видео!
Спасибо, что смотрите!) это всегда заряжает)
топ, спасибо!
Формат отличный, круто
спасибо
крутой контент
ты хорошо жестикулируешь и довольно живой, потому смотришься лучше чем персонаж)
Спасибо!) это я еще себя успакаивал, чтобы поменьше руками махать))
@@it-sin9k не, это дает живости и какого-то экшена в кадре, так что все в этом плане наоборот круто)
Формат супер. Нужно ещё) Было бы прикольно себя в кругляхе показывать)
у нас есть ТГ канал (t.me/it_sin9k). Были уже кругляши там) планируются еще)
Спасибо, формат норм! Главное - контент! А он всегда на вsсоте
спасибо!) мнение спонсоров всегда золото))
Прикольно, какого то мужика озвучивает айти синяк
я видео пересматриваю) какие то круги под глазами) видимо я и есть настоящий синяк)
Конечно, созерцать твой носатый фейс в 100 раз приятнее, чем аморфное голубое нечто :)
да) нос у меня отборный) по грузинским полям мне кажется собирали)))
мне привычней "синяк", но и новый формат с лицом тоже хорошо.
Можно чередовать.
А можно вообще сдлеать альтер эго, как например сделал Доктор Дью (он же Евгений Матвеев)
Если контента будет больше, то круто и можно без старого оформления видео)
это топ! Спасибо! Мб в будущем сделаете видео как пользоваться вкладкой performance?
Спасибо! А какую пользу хотите получить от вкладки perfomance?
Слежу за каналом, считаю его интересным и полезным
Спасибо!) мы очень стараемся)
Незнаю зачем мне это, но с пасибо с бэка!!!)))
Добро пожаловать))
Отпуск дело хорошее, тоже ухожу скоро 😅
Видео полезное интересное, по сравнению с Синяком думаю там планирование и конкретики больше. Тут больше свободы как бы обычный разговор.
Хорошо описали разницу) я так же чувствую) формат сразу вырос по длине раза в 2)
Нужно обязательно засинячить видос с анимацией на ccs
Получается, со statefull анимацией вкладка не работает? К примеру, состояние хранится в usestate. Тогда, мы можем дежажить ui баги в приложении, если добавим анимацию? По аналогии с console. Там вндь есть свойство animation или около того, где фреймами можно управлять.
Эта тулза как-бы записывает историю анимаций. Значит, посмотреть, что там в джс происходит, не получится?
Да, посмотреть JS код не получится и даже html классы если динамически вы навешивали для анимации с помощью например CSSTransition во вкладке Elements не отобразятся
Гдеж ты раньше был.. =))
новый формат +
спасибо!) это был мелкий челенж для меня)
Спасибо за контент)Ну с форматом без разницы Только название с алкоголем ассоциируется в начале даже как-то не хотел заходить на канал Но контент топовые оч нравится
Спасибо большое) будем стараться больше контента и меньше алкоголя делать)
Посмотри что-то на тему "монтаж по движению", в большегстве случаев не нужно анимировать елементы прямо от 0 до 100, попробуй, например масштаб первой анимации сделать из 50 и поиграться со скоростью появления
Могу порекомендовать подобное видео про монтаж по движению на канале "Вольница"
Спасибо большое) буду знакомиться)
Для начала анимации без перетаскивания бегунка нужно нажать на прямоугольник с анимацией. Не самый оптимальный вариант, но другого не нашел
так на прямоугольник в любом случае нажимаешь, чтобы перейти на анимацию. Это не особо работало в моем случае :(
Совмести и то и то😊
Например рассказывай как человек, а не как персонаж😂(надеюсь ты поймёшь), делай выплывающие вставки с документации или с примерами кода
Или совмести в одном ролике и себя и анимированного персонажа, намного сложнее, но все же это идея😊
Мне жена тоже все говорит, мол научись более свободно записываться, а то речь ненастоящая) я пробовал разные варианты записи, но блин пока не получается))) она мне даже подарила курсы по постановке речи) я сходил) стал быстрее записываться и легче, но эту проблему так и решил) нет ни тени таланта по работе с голосом)
Формат классный, только что с качеством видео?..
Это я зафакапился) я снял в низком качестве и пришлось еще обрезать)) поэтому беда пичаль)
Больше воды. Синяк как-то все быстро и четко рассказывал. Но в целом норм.
жаль качества в 1080 нет
да, это мой косяк. Человек который монтировал все это сильно меня ругал. Каюсь)
А js анимацию так можно дебажить? 😁
а в чем заключается js анимация?
как поставить больше 1 лайка ? :D
можно под все видео поставить)))
Я смотрю канал исключительно ради информации. Так что мне плевать на формат. Главное - голос Александра :)
Спасибо!) Александр активно работает над следующим выпуском)
720p?
это короче я запорол) Дима при монтаже фейспалмил, то что я назаписывал))
Автор так жестикулировал, что отсутствие синяка не заметно 😅😉
Спасибо! 4 год работаю во фронте и в анимациях дуб дубом...
ахахах) такое часто бывает)
формат отличный, а вот тема про анимации.. ну такое.
Без кринжовой анимации даже лучше.
Осталось только эту кринжовую манеру повествования исправить 😅
Без кринжа никуда)))
Это просто дичь, невозможно смотреть на эту клоунаду
*Просто пипец сколько воды и бесполезной информации по посторонним темам.*
Так и не досмотрел. Жалко убивать время на всякий мусор.
грубовато конечно, но мысль понял
Нормально! Спасибо за видео и формат :)