Верстка сайта - HTML,CSS анимации с нуля при прокрутке
Вставка
- Опубліковано 5 чер 2024
- Верстка сайта не заканчивается просто написанием тегов. Для того что б сайт выглядел интересно пользователю, - добавляют анимации. Сейчас доступно Html css анимации и вы можете их сделать с нуля. Верстка сайта с анимациями очень проста на самом деле, вы можете создать интересные эффекты CSS анимации своими руками. Анимации html css я покажу в этом видео, а так же мы их не просто создадим, а покажу библиотеку для анимации при прокрутке страницы сайта. В конце мы возьмем обычный сайт и я покажу как сделать анимацию при прокрутке на любом сайте с нуля даже если вы начинающий.
Что можно анимировать - developer.mozilla.org/en-US/d...
Примеры анимации - projects.verou.me/animatable/
0:00 - Верстка сайта анимации
0:33 - Анимации html, css с нуля для начинающих
3:59 - Свойстива анимации CSS
5:30 - Примеры анимации css html
6:20 - Интересный пример анимации
10:05 - Библиотека анимации при прокрутке
11:00 - Добавляем анимацию на сайт
Спасибо, это было очень и очень)) Анимации меня всегда вганяють в ступор, после твоего видео дело пойдет живее))
Супер
Очень полезное видео. Спасибо!
Благодарю за новые идеи! Интересно и полезно. JS только-только начинаю осваивать, поэтому онтересно знать и другие способы создания анимаций (слайдов и т.д.), не только через скрипты. :)
Вот интересный способ в видео, попробуйте сделать)
Спасибо большое за ролик благодаря тебе сегодня выступал перед однокурсниками рассказывал как делать анимацию при помощи aos
Просто, быстро, интересно) Спасибо)
О, круто, спасибо ☺️
спасибо! за библиотеку отдельное спасибо
)
Неплохое видео! В работе обычно редко получается использовать какие-то анимации, потому что всё время обычно тратится на адаптивную вёрстку блоков, скачивание картинок для сайта, обсуждение заказа и т.п. И анимации идут лишь на уровне css:hover, поэтому свойства анимаций иногда подзабываются. И иногда круто использовать готовые решения анимаций для сайта.
(Если у анимаций нету авторсокого права. Типо каких-то прям супер анимаций )
Проще использовать готовые решения если есть такая возможность
@@SuprunAlexey а можно ли сделать так, чтобы при прокрутке вниз, прорисовка так же уходила из видимости, с такой же анимацией? надеюсь смог мысль свою донести
Ждём побольше таких видосов про анимации
Чувак про анимацию сайтов в конце не знал спасибо тебе
Автора лайк и подписка, я бы и многие подписчики думаю, хотели бы увидеть анимации на js.
достойно, спасибо, лукас поставлен !
Спасибо
огромное спасибо!
Как-то взял сайт, напичканный библиотеками, который загружался кое-как. Ради одного попапа подключено jquery, слик слайдер, ради двух анимаций какая-то анимационная итд итп. Иногда проще написать один листенер на клик и пару анимаций самому, нежели подключать тонны библиотек, совет )))
Все должно быть по уму, иногда проще так сделать
помогаешь сильно
it's really good
I like it:)
блин я конечно слышал "хейт" вместо "хайт" и все такое, но "инфинайт" это что-то новенькое))
Согласен, анимации - просто. Особенно когда ты практикуешь их каждый день)
Я их не очень люблю(
@@SuprunAlexey Каждому свое :D
Оо
Годнота подъехала!!!
Кайф
классный видос, спасибо
Лайк
Спасибо
Спасибо большое
Всегда пожалуйста
Красава
Вроде давно занимаюсь версткой, а свойство и его значение --- background-clip: text; --- как то пролетело мимо меня. Спасибо))
Я его использовал от силы раз 5 и вот для примера пригодился 😃
Подписался круто говоришь понятно все лайк и колоколчик
Спасибо))
Всегда пожалуйста, посмотрите и остальные видео у меня на канале
@@SuprunAlexey гляну)
Чел, ты секономел мне пол жизни, спосибо. Я из Молдовы, поетому столько ошибок
Видео про Back-end языков программирования. И видео про вас какие языки программирования вы знаете? Спасибо👍🏻🙏🏻
Супер! Спасибо огромное! Теперь сайты зашевелятся 😅
Класс 👍🏻
класс
Порядок
Анимэйшн-дирэйшен Анимэйшн-ПЛЭЙСТЕЙШЭН :D
Будь по вашему
Приветствую, а можно узнать как управлять скоростью появления этой фишки с появлением объектов при скролле.
а что скажете насчет animate.css и wow.js? Я обычно использовал эту связку, но там не получалось скрывать опять элементы, эта библиотека что вы показали не сильно нагружает сайт?
ВСе курто но ты упускаешь маленькие но важные детали. js просто созадется или нужен плагин?
Очень понравилась анимация на 6:25. Не подскажите, как сделать такую же анимацию только уже не с текстом, а с картинкой png?
Доброго дня, по поводу ссылки с анимациями. Можно несколько позиций показать для наглядности как ими пользоваться и использовать, а то что то разобраться не могу. Спасибо
Сейчас актуальна только чистая CSS анимация (без JS библиотек для анимации) и её лучше не использовать на сайтах, которые создаются под продвижение. Современные требования Core Web Vitals 2021 обязательны для всех страниц перед индексацией Google. А JS требует обязательной загрузки файла в первых секундах. А CSS анимация может освободить первые секунды под хорошее прохождение тестов PageSpeed Insights. А вот графика в анимации не так сильно влияет на показатели тестов.
AOS сильно большая библиотека, занимает она много места и как вона в оптимизации? Пожалуйста подскажите)
AOS библиотека - можно изменить время анимации, если вдруг не устраивает скорость появления элемента на странице?
конечно
ну как там планируется видео про создание игры на чистом js?
Ага
Сними видео про Ace js или Codemirror плиз🤓🤓🤓
Увы они интересны только тебе
какие программы нужно постваить?
дуже крутий макет для портфоліо, де його найти ?
Подскажите почему transform не работает
Давай курсы laravel 8 Магазин за час или блог
Можно
ты сделай обзор один как работать с кнопкой на laravel 8 , типа : нажал на кнопку и текст появился или событие вызвалось, и с кнопачным редиректом ! ЖДУ такой ролик
И его посмотрит один человек. Круто!!
@@SuprunAlexey зато буду знать
@Данил Мальков laravel с angular можно вместе ?
что-то я не понял как определилась длина дуги, которая крутится? Цвет вижу, а длины нет (
разобрались?
@@SuprunAlexey нет
animate.css and wow.js
а можно ссылки на источники ?
Да, в описании
Как сделать чтобы анимации срабатывали только один раз?
Брат помоги main-text не работает можеч помощь
у меня вначале не получается
А как сделать анимацию объектов при скроллинге? Я имею ввиду такую анимацию: south-stream-transport.com
Почему у меня у вкладках не работает ета анимация
Сложно сказать по комментарию
5:35 скиньте ссылку плиз
Добавил в описание к видео
@@SuprunAlexey крутяк, спасибо