Верстка сайта - HTML,CSS анимации с нуля при прокрутке

Верстка сайта не заканчивается просто написанием тегов. Для того что б сайт выглядел интересно пользователю, - добавляют анимации. Сейчас доступно 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 - Добавляем анимацию на сайт

[@Tiberiumgod]

Спасибо, это было очень и очень)) Анимации меня всегда вганяють в ступор, после твоего видео дело пойдет живее))

[@SuprunAlexey]

Супер

[@Life-nl1kt]

Спасибо большое за ролик благодаря тебе сегодня выступал перед однокурсниками рассказывал как делать анимацию при помощи aos

[@RenatChapas]

Благодарю за новые идеи! Интересно и полезно. JS только-только начинаю осваивать, поэтому онтересно знать и другие способы создания анимаций (слайдов и т.д.), не только через скрипты. :)

[@SuprunAlexey]

Вот интересный способ в видео, попробуйте сделать)

[@yaroslavdev2411]

Очень полезное видео. Спасибо!

[@ZPUA24]

Просто, быстро, интересно) Спасибо)

[@SuprunAlexey]

О, круто, спасибо ☺️

[@NeedForHeavyMetal]

спасибо! за библиотеку отдельное спасибо )

[@lisofsky8151]

достойно, спасибо, лукас поставлен !

[@SuprunAlexey]

Спасибо

[@antonmaklakov]

Неплохое видео! В работе обычно редко получается использовать какие-то анимации, потому что всё время обычно тратится на адаптивную вёрстку блоков, скачивание картинок для сайта, обсуждение заказа и т.п. И анимации идут лишь на уровне css:hover, поэтому свойства анимаций иногда подзабываются. И иногда круто использовать готовые решения анимаций для сайта. (Если у анимаций нету авторсокого права. Типо каких-то прям супер анимаций )

[@SuprunAlexey]

Проще использовать готовые решения если есть такая возможность

[@SabilasSalam]

@@SuprunAlexey а можно ли сделать так, чтобы при прокрутке вниз, прорисовка так же уходила из видимости, с такой же анимацией? надеюсь смог мысль свою донести

[@behanzi1370]

Ждём побольше таких видосов про анимации

[@M27B_our_victory]

Автора лайк и подписка, я бы и многие подписчики думаю, хотели бы увидеть анимации на js.

[@user-vp6vz9tf4w]

Чувак про анимацию сайтов в конце не знал спасибо тебе

[@user-uy9lb5el2f]

Оо Годнота подъехала!!!

[@SuprunAlexey]

Кайф

[@horikeisukke_7949]

огромное спасибо!

[@somewebpractice]

Как-то взял сайт, напичканный библиотеками, который загружался кое-как. Ради одного попапа подключено jquery, слик слайдер, ради двух анимаций какая-то анимационная итд итп. Иногда проще написать один листенер на клик и пару анимаций самому, нежели подключать тонны библиотек, совет )))

[@SuprunAlexey]

Все должно быть по уму, иногда проще так сделать

[@FirdavsSaidmurodov-tu8rd]

it's really good I like it:)

[@World-cl2vd]

помогаешь сильно

[@Seacrest.]

блин я конечно слышал "хейт" вместо "хайт" и все такое, но "инфинайт" это что-то новенькое))

[@layyly]

Чел, ты секономел мне пол жизни, спосибо. Я из Молдовы, поетому столько ошибок

[@user-lj8hp9lo2x]

Красава

[@etodillerx2095]

классный видос, спасибо

[@SuprunAlexey]

Лайк

[@stt1632]

Согласен, анимации - просто. Особенно когда ты практикуешь их каждый день)

[@SuprunAlexey]

Я их не очень люблю(

[@stt1632]

@@SuprunAlexey Каждому свое :D

[@user-cl9yc1tw2i]

Спасибо

[@AOFTG]

Вроде давно занимаюсь версткой, а свойство и его значение --- background-clip: text; --- как то пролетело мимо меня. Спасибо))

[@SuprunAlexey]

Я его использовал от силы раз 5 и вот для примера пригодился 😃

[@asadaa3095]

Спасибо большое

[@SuprunAlexey]

Всегда пожалуйста

[@user-sk4to3sl7w]

Спасибо))

[@SuprunAlexey]

Всегда пожалуйста, посмотрите и остальные видео у меня на канале

[@user-sk4to3sl7w]

@@SuprunAlexey гляну)

[@alexandrbusalkin1715]

класс

[@SuprunAlexey]

Порядок

[@user-ie8fy2wl5p]

Подписался круто говоришь понятно все лайк и колоколчик

[@ShortsPageTech]

Видео про Back-end языков программирования. И видео про вас какие языки программирования вы знаете? Спасибо👍🏻🙏🏻

[@danil_zavyalov]

Супер! Спасибо огромное! Теперь сайты зашевелятся 😅

[@SuprunAlexey]

Класс 👍🏻

[@Altenzo]

Приветствую, а можно узнать как управлять скоростью появления этой фишки с появлением объектов при скролле.

[@BROnik]

а что скажете насчет animate.css и wow.js? Я обычно использовал эту связку, но там не получалось скрывать опять элементы, эта библиотека что вы показали не сильно нагружает сайт?

[@r7tonn46]

ВСе курто но ты упускаешь маленькие но важные детали. js просто созадется или нужен плагин?

[@user-oh4mt8xi2j]

Доброго дня, по поводу ссылки с анимациями. Можно несколько позиций показать для наглядности как ими пользоваться и использовать, а то что то разобраться не могу. Спасибо

[@user-ex5lt9qc3e]

Очень понравилась анимация на 6:25. Не подскажите, как сделать такую же анимацию только уже не с текстом, а с картинкой png?

[@valgerofficial]

Анимэйшн-дирэйшен Анимэйшн-ПЛЭЙСТЕЙШЭН :D

[@SuprunAlexey]

Будь по вашему

[@finestruwebtactic5452]

Сейчас актуальна только чистая CSS анимация (без JS библиотек для анимации) и её лучше не использовать на сайтах, которые создаются под продвижение. Современные требования Core Web Vitals 2021 обязательны для всех страниц перед индексацией Google. А JS требует обязательной загрузки файла в первых секундах. А CSS анимация может освободить первые секунды под хорошее прохождение тестов PageSpeed Insights. А вот графика в анимации не так сильно влияет на показатели тестов.

[@user-le1iw4yx8i]

AOS сильно большая библиотека, занимает она много места и как вона в оптимизации? Пожалуйста подскажите)

[@Alexey_Gri]

AOS библиотека - можно изменить время анимации, если вдруг не устраивает скорость появления элемента на странице?

[@Alexey_Gri]

конечно

[@casuale1200]

ну как там планируется видео про создание игры на чистом js?

[@SuprunAlexey]

Ага

[@user-gs3pu5dv2s]

какие программы нужно постваить?

[@user-uy1ci7zl9h]

дуже крутий макет для портфоліо, де його найти ?

[@user-si6kw3cz4l]

Подскажите почему transform не работает

[@alioo9304]

Сними видео про Ace js или Codemirror плиз🤓🤓🤓

[@SuprunAlexey]

Увы они интересны только тебе

[@user-iy5sn5bt5k]

Давай курсы laravel 8 Магазин за час или блог

[@SuprunAlexey]

Можно

[@evseevav]

что-то я не понял как определилась длина дуги, которая крутится? Цвет вижу, а длины нет (

[@SuprunAlexey]

разобрались?

[@evseevav]

@@SuprunAlexey нет

[@user-vy6zs7hh9f]

Брат помоги main-text не работает можеч помощь

[@fake_gosman]

animate.css and wow.js

[@trance_hardstyle]

ты сделай обзор один как работать с кнопкой на laravel 8 , типа : нажал на кнопку и текст появился или событие вызвалось, и с кнопачным редиректом ! ЖДУ такой ролик

[@SuprunAlexey]

И его посмотрит один человек. Круто!!

[@trance_hardstyle]

@@SuprunAlexey зато буду знать

[@trance_hardstyle]

@Данил Мальков laravel с angular можно вместе ?

[@olegostakhov8499]

а можно ссылки на источники ?

[@SuprunAlexey]

Да, в описании

[@user-tg7pn3ro6i]

у меня вначале не получается

[@vasyadz165]

Как сделать чтобы анимации срабатывали только один раз?

[@user-pf1wb2nx8b]

А как сделать анимацию объектов при скроллинге? Я имею ввиду такую анимацию: south-stream-transport.com

[@kidsartandrubiks8483]

Почему у меня у вкладках не работает ета анимация

[@SuprunAlexey]

Сложно сказать по комментарию

[@ivanrussui4126]

5:35 скиньте ссылку плиз

[@SuprunAlexey]

Добавил в описание к видео

[@ivanrussui4126]

@@SuprunAlexey крутяк, спасибо