Еще одна аху#### анимация на CSS и SVG
ฝัง
- เผยแพร่เมื่อ 1 ก.ค. 2024
- ⚡️ 31 октября старт обучения:
- Базовый курс по верстке frontendblok.com/courses/html...
- Продвинутый курс по верстке frontendblok.com/courses/adva...
- JavaScript с нуля frontendblok.com/courses/java...
Есть возможность рассрочки и оплаты зарубежной картой.
Если хотите взять 2 курса сразу, то для вас будет действовать 25% скидка. Если сразу 3 - 30%.
Платеж можно также сделать в формате рассрочки.
✅ Демо (3 линии) - codepen.io/anna_blok/pen/eYKYYaV
✅ Демо (смена цвета) - codepen.io/anna_blok/pen/yLjmKEp
✅ Сжать SVG - jakearchibald.github.io/svgomg/
👉 Видео про анимацию - • Сделай самую аху#### а...
Таймкоды:
00:00 Вступление
00:26 Обучение в FrontendBlok
01:25 Рисуем линию на планшете
03:42 Работаем с SVG
05:08 Работает с HTML и CSS
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
Анна огромный спасибо вам меня очень помог ваше видео github pages .
Анечка красавица, спасибо за контент
Все такие нежные, бть (с) Жванецкий, Рассказ подрывника :)
И еще один годный годный видос) Контент супер, продолжай в том же духе
Спасибо
У меня что-то символы некоторые зашифрованы в названии... какую надо поставить кодировку? ))))
Умничка.
Спасибо за твой труд.
Кто шарит подскажите, а возможно ли отрисовывать не линии а формы и можно ли вставлять градиенты в stroke
А в css есть условные операторы, чтоб не время подгонять, а по завершении одной линии сразу рисовалась следующая?
Такого там нет. Js нужно для этого использовать
Web разработка методом тыка 🧐
блин, тугалов опять осеменил норм бабу и она ведет аху уроки, лол
Спасибо за видео! Попробую тоже линию нарисовать, но в фигме, а то планшета нет. Название крутое, не обращай ни на кого внимания!!!!
НЕадэкватто
Да ещё и Великое
И с
Величественным.......
просто
"словарным" запасом
,,,,,,,
@@Gazovchik ты просто гей братан
@@umnyicoder ,
Как ты там говорило....
-
Газовщик.
Но с тобой знакомиться мне - своё достоинство Марать.
Надо не делей подбирать, а оффсеты точнее подбирать. Из-за того что оффсеты неправильно подобраны, они продолжают анимироваться за пределами path. Отсюда и задержка. А движок время везде одинаково считает. Не может же он в первой анимации одни 5 секунд считать, а во второй другие 5 секунд.
@@AEF23C20 в свг ничего вы не посчитаете, там длины не указаны. Если знаете геометрию и есть время считать, то считайте. Но быстрее подобрать цифры.
А делей не надо высчитывать, он точно такой же, как длина анимации предыдущего отрезка.
@@AEF23C20 нет, тут время анимации задаётся, а не скорость. 10 см будут анимироваться 5секунд, а второй начнется через 5 секунд. И совершенно неважна длина обоих отрезков. Так что ничего считать не надо.
@@AEF23C20 никто не заметит разную скорость, если подобрать цифры, это самый простой способ. Подобрать и рассчитать скорость. Формулу скорости, думаю, каждый со школы помнит.
А если надо точно, то проще найти программу, которая высчитывает длину кривой
@@AEF23C20 я выше писал, если хотите считайте, я лишь написал, что это проще. Высчитывание длины кривой для анимации, это не то, чем бы я хотел заниматься. Есть более интересные задачи. А вы дерзайте. За столько времени могли бы уже формулу скинуть
@@AEF23C20 зачем мне формула, когда проще подобрать три цифры.
Зачем писать 3 разных кейфрейма с одинаковым свойством?) Зачем гадать длину, если с помощью js можно вытащить точное значение? Зачем гадать задержку между анимациями, если в delay должна быть указана сумма длительностей предыдущих анимаций?
не для тебя же гения ролик
А не проще цветные переходы забить в самом svg файле. Зачем этот лишний огород
Тут тоже один , но несколько . При разделении цвета в любом случае будут разные теги.
Я всё равно не понимаю, объясните! Зачем несколько раз писать один и тот же кейфрейм, но с разными именами?
@keyframes привязывается к animation-name, а у нас их в примере 3, поэтому их тоже 3
@@annblok_webdev Он имел ввиду то, что можно было использовать везде один кейфрейм, а длительность/задержку/плавность уже задавать у классов .one, .two, .three
Смотрю вот на это, и думаю... Хрень полнейшая и эта анимация, и все то, куда скатились и html, и css, и все прочее, связанное с вебом... Включая браузеры. ) Угадывать эти цифры в стилях - такое себе решение, либо нормального решения мы здесь не увидели, либо его в принципе не существует... Подгонять секунды - тоже чушь. Впечатление, что эти стандарты с этими вот всеми свойствами изобретают какие-то далекие от программирования люди, или и вовсе какие-то дети... А так-то за видео спасибо, отчасти познавательно.
const pathLength = document.querySelector('path.class-name').getTotalLength()
console.log(pathLength)
P.S. WEB прекрасен, будь добрее!)❤
как некрасиво девушке использовать такие слова, особенно в заголовках.
Не стоит использовать для поднятия просмотров такие названия в видео, вообще никак не клеится с вами)
Видео полезное, но за название дизлайк… ссори…
А как тебе платные макеты 😂
Аналогично
Да, название для видео конечно глупое, без матов нельзя?
а где мат?
"аху####" - это мат?
зато это название вызывает интерес) когда будет свой канал, можешь называть видосы как захочешь
@@pm8186 да кто такое сказал? Какой интерес может вызвать слово "ахуенная"? Если заменить на "невероятная" "удивительная" "афигенная" и т.д. суть не изменится
@@user-qh5dw1lq7w это на много милее, согласен 🤗
В прошлом видео я уже делал замечание, но она упёртая девочка.
Бред
Отписка
Мы уже поняли еще в прошлом видео, что у тебя узкий словарный запас
@@yurok1991 ,
НЕадэкватто
Для того чтобы что-то понимать
Голова нужна
"великий" ты юрочек
Просто совет
Купи Голову
где-нибудь на Распродаже
Да иди уже отсюда обиженка
Скатертью дорога, семь перьев в задницу и барабан на шею )))
пожалуйста, попроси какого-нибудь человека научить выставлять свет, всё шикарно, но не свет