CSS анимация + практический пример
Вставка
- Опубліковано 21 вер 2024
- Разберем css анимацию, как говорится от нуля до единицы. Обсудим, в каких моментах что лучше использовать. В конце разберем интересный практический пример.
Архив проекта zip:
bit.ly/35sQ0VI
Архив проекта rar:
bit.ly/2ZU6PYl
Чат верстальщиков:
bit.ly/chat-fro...
Чат верстальщиков ссылка с vpn:
bit.ly/vpn-from...
"Хочу плейлист по анимахам!"
Было бы неплохо, если бы данная рубрика появилась на канале. Буду ждать!
Недавно попал в студию, сейчас прохожу испытательный (оплачиваемый) период, верстал вместе с тобой(по твоим видео) почти все твои проекты, много узнал нового и часто использую в своей практике. Пока что только верстаю но параллельно учу JS. Краткое описание полезности твоего контента.
flippix благодарю!
@Rina не смеши
@Rina бред говоришь
Привет . Меня пригласили поработать в веб-студию месяца 2 назад на лето , вот сейчас учусь . Можешь плз рассказать какой сложности настоящие лендинги ?
@@DK-ue5uf Сложность такая же, особенно мне зашёл видео Вадима где он верстал тот голубой лендинг на тематику серфинга. Это уже очень крутой лендинг))
Сложности макетов зависят от бюджета и дизайна.
Если хочешь посмотреть на разные дизайны, в гугле их милионы ищи: " landing page figma "
51:00 верстку обычно натягивают на какую-нибудь CMS чтобы клиент или контент-менеджер мог менять картинки, если например рекламная акция теперь другая или дизайнер нарисовал картинку получше. Из CMS не получится вставить картинку в before и after, это только руками в css лезть и править, думаю более дальновидный вариант - выводить картинку в html и работать с ней уже оттуда
Плейлист по анимации - то что нужно! С удовольствием бы посмотрел, потому что даже повторив этот пример - очень легко запутаться в этих всех именах и координатах, так то понятно зачем это всё и как это всё работает, но дополнительные примеры не помешали бы! Спасибо за видос, всё на высшем уровне!
Твої відеоуроки просто супер 👍а марафони вище всяких похвал! Народ коментуйте, ставте лайки, підписуйтесь на канал, не пожалієте. Такі відоси заслуговують побільше позитивних відгуків за такі старання. Респект за якісний і корисний контент👍
Однозначно не зря потраченное время, спасибо! То, что, как раз мне было нужно!))
ОГРОМНОЕ спасибо!! Это прям новогодний подарок всем нам!))
И не так страшен черт как его рисуют)) Я то до этого боялся до ужаса этих кейфреймов и кубиков безье, а теперь то - та, на раз-два)))
Хочу плейлист по анимахам!
Ну что сказать красавчик, нужный видосик запилил
Ещё не посмотрел, но лайк уже полетел
Хорошечно! Достойно лайка от СЕООНЛИ
Отлично мужик! В новый год с годным контентом. Спасибо.
Прошла ваш курс по вёрстке. Теперь очень хочу курс то jquery и js. Изучаю сама, но поняла насколько огромнейшая разница между изучения самой и с ментором. Так что если будет такой курс, я первая на очереди
Попросили заанимировать карточки товаров, что бы текст красиво выезжал, блоки разные и т.д., у самого все как-то криво, с багами получается. Ползаю по ютубчику, ищу видосики, и .... Вадим подгон такой своевременный устроил = ) Спасибо огромное !
крутяк!
только вчера подумал и пофантазировал как было бы неплхо сделать,
А тут твой видос . Спасибо!!! Однозначно жирный лайк !!!
Вадим, вот спасибо огромное за видос! В голове была каша, наконец-то разобралась:
1) когда для анимации можно обойтись транзишином, а когда пора подключать @keyframes
2) как улучшить CSS анимацию с помощью jQuery
3) что за зверь эти кривые Безье и всякие ease, ease-out и тд
4) как ваять пошагово анимацию по видосику от диза.
БЛАГОДАРЮ!!! лайк комент подписка тебе, мир-труд-май!
Прикольно)
Мне понравилось)
Хотелось бы ещё какой-нибудь более сложной анимации и вёрстка лендинга на гридах)
Чудесный урок! Настоящая магия!
Новый год, новые знания, спасибо
Этому парню лайк авансом!
спасибо
ХОЧУ ПЛЕЙЛИСТ ПО АНИМАХАМ!
Спасибо тебе огромное! Очень полезный и интересный контент !
Годнота однозначно!!!Болше про анимацию, больше про JQuery. Спасибо за контент.
Супер, спасибо за урок!
Нереально полезный контент
Привет, было очень интересно, но на JS отказал мозг, поэтому буду смотреть еще раз. Спасибо за урок - это круто.
За последнюю неделю +600 подписчиков. Поздравляю!!!
спасибо
Великолепно! Очень доходчиво всё объяснено.
Большое спасибо за опыт! Всегда с удовольствием смотрю твои видосы) Продолжай в том-же духе!)))
Чет немного сложно видос зашел под конец)) а так все круто! надо будет снова переглянуть
Очень крутые видосы) иногда конечно запутываешь, когда что-то не выходит и с места на место перепрыгивать приходится, но в целом очень интересно и понятно)
анимации стал для украшательства сайтов юзать. топ контЕнт
Благодарю
Контент супер. Спасибо за проделанную работу. Сделай еще видосы по ошибкам при верстке
Спасибо. Идея с рубликой хорошая.Поможет руку набить.
Вадим, очень интересное и полезное видео! Спасибо!
было познавательно, спасибо !
Очень полезное видео! прожимаем лайк!!!
Прекрасное видео !
Всё весьма просто объясняется
спасибо
Благодарю за разбор полетов! Хочу playlist по анимахам!!!
все круто, ждём рубрику! :)
Спасибо тебе за эти все уроки, ты лучший!!
Очень классная подача материала, молодец
класс! рубрику с анимацией в жизнь!))
всё шло более-менее нормально, но в конце эпопея с классами это что-то))
идея с новой рубрикой хорошая
Лучший)))
Вадим здравствуй, спасибо за видео про анимацию, очень полезное, как обычно лайк сразу). Хотелось бы тебя попросить, если будет свободное время и возможность, записать видео для новичков по настройке WebPack и как им пользоваться.
Хорошо объясняешь! Спасибо! Лайк и подписка для мотивации))
1:31:49 можно ещё маской закрыть карточку а при загрузке странице эту маску удалить либо дисплей нан сделать а потом дисплей блок
Вадим, спасибо за видос! Жду с нетерпением твой платный курс) когда примерно начало известно уже?
да, ближайший 20 января
@@vadymprokopchuk огонь!! 🔥
Нельзя ли уточнить, что за курс, и где его можно будет найти?
@@Zibinskiy Нужно Вадиму написать в телегу и он скинет план курса и т.п
Спасибо огромное, давай видос про svg, все эти свойства stroke, будет круто)
#Хочу плейлист по анимахам)
Хочу плейлист по анимахам)
спасибо братан за урок уважаю тебя
Вадим, ты лучший! )
Спасибо)
О кайф, то что нужно!
Полезный видос!!
нормально) теперь стало понятнее))
шикарно!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Топчик :)
оч круто,спасибо)
Ля, Хорошая Вечеринка)👍
Хочу плей-лист по анимахам ;-)
Хочу плейлист по анимахам)))
Хочу плейлист по анимахам!!!!!
ХОЧУ!!!! ПЛЕЙЛИСТ ПО АНИМАХАМ!!! И ВОБЩЕ!! ХОЧУ ВСЕ ЧТО ПРЕЛОЖИШЬ!!! АЙЕЕЕЕЕЕ
свойство anim-1 находится ниже кода, где его используем. Здесь что то похожее на всплытие функции в JS?
свойство anim-1 похоже на функцию.
Oleksiy Kurylyuk нет, такого понятия в css нет, просто для этой анимации так можно
@@vadymprokopchuk Спасибо за ответ.
Ты делаешь новый марафон что бы на нем объявить о старте нового курса? Просто мне кажется что про это нужно говорить заранее, я к тебе не пошел на курс, только из-за того что уже записался в лофтскул на один из модулей. Знал бы что у тебя будет курс, пошел бы лучше к тебе.
соррян, да я там скажу что у меня сейчас идет набор, успехов в обучении
@@vadymprokopchuk советую сделать сайт с расписанием курсов, потому что конкурентов много, а неизвестность иногда заставляет идти к другим. И когда будет курс по WP?) На него бы я пошел, если объясняешь все так же четко как и вёрстку)) хотелось бы видеть какой то небольшой марафон и по нему))
@@vadymprokopchuk и может цену скажешь, если не сложно. А то на эти дни уезжаю, а я смотрю курс уже 20 начинается)) может потяну и твой по цене)
@@veterok54 у меня два тарифа, все сам 150$ и с ментором 250$, с ментором у тебя связь в телеграм, он помогает решать все проблемы и проверяет индивидуально домашки, вообще можешь мне в вк написать vk.com/vadimprokopchuk или в телеграм t.me/silver8light и я все подробно опишу
Mavic: "I'll be back"
под конец че то аж голова разболелась от сложноты)) ну может я просто тупой...
Вчера час потратил на скачку,настройку плагинов для sublime text, потом ещё часа пол на настройку livereload для браузера. Не работало пока не разрешил,что-то там делать ссылкам) а тут просто Live Server за 30 сек.. lol
vsc проще для новичков, рекомендую
Пожалуйста, расскажи как пользоваться scrollMagic. Нет нормальной русифицированной документации, а привязать анимации и переходы к скролу, очень нужно( Буду очень благодарен
лайкосики. js охота
А сколько сейчас стоит курс обучения?
Видос топ, но на будущее в 1 секунде 1000 мс
точняк)
+
Спасибо за видос, может wordpress?
уже скоро=)
сними настройку Visual studio code !
Хочу плейлист по анимахам
хочу плейлист по анимахам
ихНИЙ
Можно ссылку на этот сайт по анимации а то никак не получается найти
наеш сайт но столкнулся с такой проблемой. Анимация на сайте не работает, надпись просто стоит на месте, выбираю какую то команду и нифига
а где же ссылка на телегу
сам нашел
@from_zero_to_1
на 1:42:00 моск расплавилсо...
Тяжело воспринимается информация из-за того, что постоянно вставляешь свои "словечки" и прыгаешь с темы на тему.
Это не замечается и забавляет пока тема не сложная и которую уже где-то слышал и понимаешь.Но вот когда информация новая, то сложнова-то при такой подаче что-то понять.
infinite [ˈɪnfɪnɪt] ≠ infinity [ɪnˈfɪnəti]
ПАСИБ
Хочу плейлист по анимахам)
#Хочу плейлист по анимахам)
Хочу плейлист по анимахам!!!!!