Тёмный

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

Web Developer Blog
Подписаться 246 тыс.
Просмотров 56 тыс.
50% 1

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

Опубликовано:

 

28 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 87   
@Tiberiumgod
@Tiberiumgod 3 года назад
Спасибо, это было очень и очень)) Анимации меня всегда вганяють в ступор, после твоего видео дело пойдет живее))
@SuprunAlexey
@SuprunAlexey 3 года назад
Супер
@Life-nl1kt
@Life-nl1kt 3 года назад
Спасибо большое за ролик благодаря тебе сегодня выступал перед однокурсниками рассказывал как делать анимацию при помощи aos
@RenatChapas
@RenatChapas 3 года назад
Благодарю за новые идеи! Интересно и полезно. JS только-только начинаю осваивать, поэтому онтересно знать и другие способы создания анимаций (слайдов и т.д.), не только через скрипты. :)
@SuprunAlexey
@SuprunAlexey 3 года назад
Вот интересный способ в видео, попробуйте сделать)
@yaroslavdev2411
@yaroslavdev2411 3 года назад
Очень полезное видео. Спасибо!
@lisofsky8151
@lisofsky8151 2 года назад
достойно, спасибо, лукас поставлен !
@SuprunAlexey
@SuprunAlexey 2 года назад
Спасибо
@ZPUA24
@ZPUA24 3 года назад
Просто, быстро, интересно) Спасибо)
@SuprunAlexey
@SuprunAlexey 3 года назад
О, круто, спасибо ☺️
@antonmaklakov
@antonmaklakov 3 года назад
Неплохое видео! В работе обычно редко получается использовать какие-то анимации, потому что всё время обычно тратится на адаптивную вёрстку блоков, скачивание картинок для сайта, обсуждение заказа и т.п. И анимации идут лишь на уровне css:hover, поэтому свойства анимаций иногда подзабываются. И иногда круто использовать готовые решения анимаций для сайта. (Если у анимаций нету авторсокого права. Типо каких-то прям супер анимаций )
@SuprunAlexey
@SuprunAlexey 3 года назад
Проще использовать готовые решения если есть такая возможность
@SabilasSalam
@SabilasSalam 7 месяцев назад
@@SuprunAlexey а можно ли сделать так, чтобы при прокрутке вниз, прорисовка так же уходила из видимости, с такой же анимацией? надеюсь смог мысль свою донести
@M27B_our_victory
@M27B_our_victory 3 года назад
Автора лайк и подписка, я бы и многие подписчики думаю, хотели бы увидеть анимации на js.
@NeedForHeavyMetal
@NeedForHeavyMetal 2 года назад
спасибо! за библиотеку отдельное спасибо )
@behanzi1370
@behanzi1370 3 года назад
Ждём побольше таких видосов про анимации
@xpornzenin
@xpornzenin 3 года назад
Как-то взял сайт, напичканный библиотеками, который загружался кое-как. Ради одного попапа подключено jquery, слик слайдер, ради двух анимаций какая-то анимационная итд итп. Иногда проще написать один листенер на клик и пару анимаций самому, нежели подключать тонны библиотек, совет )))
@SuprunAlexey
@SuprunAlexey 3 года назад
Все должно быть по уму, иногда проще так сделать
@user-vp6vz9tf4w
@user-vp6vz9tf4w 2 года назад
Чувак про анимацию сайтов в конце не знал спасибо тебе
@Seacrest.
@Seacrest. 3 года назад
блин я конечно слышал "хейт" вместо "хайт" и все такое, но "инфинайт" это что-то новенькое))
@AOFTG
@AOFTG 3 года назад
Вроде давно занимаюсь версткой, а свойство и его значение --- background-clip: text; --- как то пролетело мимо меня. Спасибо))
@SuprunAlexey
@SuprunAlexey 3 года назад
Я его использовал от силы раз 5 и вот для примера пригодился 😃
@stt1632
@stt1632 3 года назад
Согласен, анимации - просто. Особенно когда ты практикуешь их каждый день)
@SuprunAlexey
@SuprunAlexey 3 года назад
Я их не очень люблю(
@stt1632
@stt1632 3 года назад
@@SuprunAlexey Каждому свое :D
@Altenzo
@Altenzo 3 года назад
Приветствую, а можно узнать как управлять скоростью появления этой фишки с появлением объектов при скролле.
@FirdavsSaidmurodov-tu8rd
@FirdavsSaidmurodov-tu8rd 25 дней назад
it's really good I like it:)
@layyly
@layyly 2 года назад
Чел, ты секономел мне пол жизни, спосибо. Я из Молдовы, поетому столько ошибок
@r7tonn46
@r7tonn46 Год назад
ВСе курто но ты упускаешь маленькие но важные детали. js просто созадется или нужен плагин?
@BROnik
@BROnik 3 года назад
а что скажете насчет animate.css и wow.js? Я обычно использовал эту связку, но там не получалось скрывать опять элементы, эта библиотека что вы показали не сильно нагружает сайт?
@horikeisukke_7949
@horikeisukke_7949 Год назад
огромное спасибо!
@ShortsPageTech
@ShortsPageTech 3 года назад
Видео про Back-end языков программирования. И видео про вас какие языки программирования вы знаете? Спасибо👍🏻🙏🏻
@user-oh4mt8xi2j
@user-oh4mt8xi2j 2 года назад
Доброго дня, по поводу ссылки с анимациями. Можно несколько позиций показать для наглядности как ими пользоваться и использовать, а то что то разобраться не могу. Спасибо
@user-ex5lt9qc3e
@user-ex5lt9qc3e 2 года назад
Очень понравилась анимация на 6:25. Не подскажите, как сделать такую же анимацию только уже не с текстом, а с картинкой png?
@etodillerx2095
@etodillerx2095 3 года назад
классный видос, спасибо
@SuprunAlexey
@SuprunAlexey 3 года назад
Лайк
@user-uy9lb5el2f
@user-uy9lb5el2f 3 года назад
Оо Годнота подъехала!!!
@SuprunAlexey
@SuprunAlexey 3 года назад
Кайф
@World-cl2vd
@World-cl2vd Год назад
помогаешь сильно
@user-le1iw4yx8i
@user-le1iw4yx8i 3 года назад
AOS сильно большая библиотека, занимает она много места и как вона в оптимизации? Пожалуйста подскажите)
@user-ie8fy2wl5p
@user-ie8fy2wl5p 3 года назад
Подписался круто говоришь понятно все лайк и колоколчик
@danil_zavyalov
@danil_zavyalov 3 года назад
Супер! Спасибо огромное! Теперь сайты зашевелятся 😅
@SuprunAlexey
@SuprunAlexey 3 года назад
Класс 👍🏻
@asadaa3095
@asadaa3095 3 года назад
Спасибо большое
@SuprunAlexey
@SuprunAlexey 3 года назад
Всегда пожалуйста
@user-gs3pu5dv2s
@user-gs3pu5dv2s Год назад
какие программы нужно постваить?
@finestruwebtactic5452
@finestruwebtactic5452 Год назад
Сейчас актуальна только чистая CSS анимация (без JS библиотек для анимации) и её лучше не использовать на сайтах, которые создаются под продвижение. Современные требования Core Web Vitals 2021 обязательны для всех страниц перед индексацией Google. А JS требует обязательной загрузки файла в первых секундах. А CSS анимация может освободить первые секунды под хорошее прохождение тестов PageSpeed Insights. А вот графика в анимации не так сильно влияет на показатели тестов.
@user-cl9yc1tw2i
@user-cl9yc1tw2i 2 года назад
Спасибо
@user-sk4to3sl7w
@user-sk4to3sl7w 3 года назад
Спасибо))
@SuprunAlexey
@SuprunAlexey 3 года назад
Всегда пожалуйста, посмотрите и остальные видео у меня на канале
@user-sk4to3sl7w
@user-sk4to3sl7w 3 года назад
@@SuprunAlexey гляну)
@user-si6kw3cz4l
@user-si6kw3cz4l 2 года назад
Подскажите почему transform не работает
@Alexey_Gri
@Alexey_Gri 3 года назад
AOS библиотека - можно изменить время анимации, если вдруг не устраивает скорость появления элемента на странице?
@Alexey_Gri
@Alexey_Gri Год назад
конечно
@user-lj8hp9lo2x
@user-lj8hp9lo2x 9 месяцев назад
Красава
@alexandrbusalkin1715
@alexandrbusalkin1715 3 года назад
класс
@SuprunAlexey
@SuprunAlexey 3 года назад
Порядок
@casuale1200
@casuale1200 3 года назад
ну как там планируется видео про создание игры на чистом js?
@SuprunAlexey
@SuprunAlexey 3 года назад
Ага
@user-uy1ci7zl9h
@user-uy1ci7zl9h 6 месяцев назад
дуже крутий макет для портфоліо, де його найти ?
@valgerofficial
@valgerofficial 3 года назад
Анимэйшн-дирэйшен Анимэйшн-ПЛЭЙСТЕЙШЭН :D
@SuprunAlexey
@SuprunAlexey 3 года назад
Будь по вашему
@user-vy6zs7hh9f
@user-vy6zs7hh9f 6 месяцев назад
Брат помоги main-text не работает можеч помощь
@user-tg7pn3ro6i
@user-tg7pn3ro6i 3 года назад
у меня вначале не получается
@vasyadz165
@vasyadz165 2 года назад
Как сделать чтобы анимации срабатывали только один раз?
@alioo9304
@alioo9304 3 года назад
Сними видео про Ace js или Codemirror плиз🤓🤓🤓
@SuprunAlexey
@SuprunAlexey 3 года назад
Увы они интересны только тебе
@evseevav
@evseevav 3 года назад
что-то я не понял как определилась длина дуги, которая крутится? Цвет вижу, а длины нет (
@SuprunAlexey
@SuprunAlexey 3 года назад
разобрались?
@evseevav
@evseevav 3 года назад
@@SuprunAlexey нет
@user-iy5sn5bt5k
@user-iy5sn5bt5k 3 года назад
Давай курсы laravel 8 Магазин за час или блог
@SuprunAlexey
@SuprunAlexey 3 года назад
Можно
@olegostakhov8499
@olegostakhov8499 3 года назад
а можно ссылки на источники ?
@SuprunAlexey
@SuprunAlexey 3 года назад
Да, в описании
@kidsartandrubiks8483
@kidsartandrubiks8483 2 года назад
Почему у меня у вкладках не работает ета анимация
@SuprunAlexey
@SuprunAlexey 2 года назад
Сложно сказать по комментарию
@user-pf1wb2nx8b
@user-pf1wb2nx8b 3 года назад
А как сделать анимацию объектов при скроллинге? Я имею ввиду такую анимацию: south-stream-transport.com
@ivanrussui4126
@ivanrussui4126 3 года назад
5:35 скиньте ссылку плиз
@SuprunAlexey
@SuprunAlexey 3 года назад
Добавил в описание к видео
@ivanrussui4126
@ivanrussui4126 3 года назад
@@SuprunAlexey крутяк, спасибо
@fake_gosman
@fake_gosman 3 года назад
animate.css and wow.js
@trance_hardstyle
@trance_hardstyle 3 года назад
ты сделай обзор один как работать с кнопкой на laravel 8 , типа : нажал на кнопку и текст появился или событие вызвалось, и с кнопачным редиректом ! ЖДУ такой ролик
@SuprunAlexey
@SuprunAlexey 3 года назад
И его посмотрит один человек. Круто!!
@trance_hardstyle
@trance_hardstyle 3 года назад
@@SuprunAlexey зато буду знать
@trance_hardstyle
@trance_hardstyle 3 года назад
@Данил Мальков laravel с angular можно вместе ?
Далее