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

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 87

  • @Tiberiumgod
    @Tiberiumgod 3 ปีที่แล้ว +15

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

  • @somewebpractice
    @somewebpractice 3 ปีที่แล้ว +4

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว +1

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

  • @Life-nl1kt
    @Life-nl1kt 3 ปีที่แล้ว +1

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

  • @layyly
    @layyly 3 ปีที่แล้ว +1

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

  • @AOFTG
    @AOFTG 3 ปีที่แล้ว +5

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว +1

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

  • @antonmaklakov
    @antonmaklakov 3 ปีที่แล้ว +10

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว +1

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

    • @SabilasSalam
      @SabilasSalam ปีที่แล้ว

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

  • @Seacrest.
    @Seacrest. 3 ปีที่แล้ว +2

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

  • @behanzi1370
    @behanzi1370 3 ปีที่แล้ว +1

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

  • @RenatChapas
    @RenatChapas 3 ปีที่แล้ว +4

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว

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

  • @stt1632
    @stt1632 3 ปีที่แล้ว +2

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว +1

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

    • @stt1632
      @stt1632 3 ปีที่แล้ว +1

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

  • @Мимишка-н6р
    @Мимишка-н6р 3 ปีที่แล้ว

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

  • @lisofsky8151
    @lisofsky8151 3 ปีที่แล้ว +5

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

  • @M27B_our_victory
    @M27B_our_victory 3 ปีที่แล้ว

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

  • @ShortsPageTech
    @ShortsPageTech 3 ปีที่แล้ว +1

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

  • @danil_zavyalov
    @danil_zavyalov 3 ปีที่แล้ว +1

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

  • @КаналТот
    @КаналТот 3 ปีที่แล้ว

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

  • @ZPUA24
    @ZPUA24 3 ปีที่แล้ว +2

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว +1

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

  • @finestruwebtactic5452
    @finestruwebtactic5452 2 ปีที่แล้ว

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

  • @World-cl2vd
    @World-cl2vd 2 ปีที่แล้ว

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

  • @NeedForHeavyMetal
    @NeedForHeavyMetal 3 ปีที่แล้ว

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

  • @ДмитрийЕланский-о7с
    @ДмитрийЕланский-о7с 3 ปีที่แล้ว

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

  • @R7Tonn
    @R7Tonn 2 ปีที่แล้ว

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

  • @Altenzo
    @Altenzo 3 ปีที่แล้ว +1

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

  • @yaroslavdev2411
    @yaroslavdev2411 3 ปีที่แล้ว

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

  • @casuale1200
    @casuale1200 3 ปีที่แล้ว +1

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

  • @valgerofficial
    @valgerofficial 3 ปีที่แล้ว

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว

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

  • @FirdavsSaidmurodov-tu8rd
    @FirdavsSaidmurodov-tu8rd 7 หลายเดือนก่อน

    it's really good
    I like it:)

  • @Alexey_Gri
    @Alexey_Gri 3 ปีที่แล้ว

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

    • @Alexey_Gri
      @Alexey_Gri 2 ปีที่แล้ว

      конечно

  • @Do4iF
    @Do4iF 3 ปีที่แล้ว

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

  • @etodillerx2095
    @etodillerx2095 3 ปีที่แล้ว +1

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

  • @BROnik
    @BROnik 3 ปีที่แล้ว

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

  • @ВікторіяЗимовець-с1т
    @ВікторіяЗимовець-с1т ปีที่แล้ว

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

  • @ГлебКуба
    @ГлебКуба 3 ปีที่แล้ว

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

  • @НазарЛойко-х5л
    @НазарЛойко-х5л 3 ปีที่แล้ว

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

  • @horikeisukke_7949
    @horikeisukke_7949 2 ปีที่แล้ว

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

  • @ivanrussui4126
    @ivanrussui4126 3 ปีที่แล้ว

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว

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

    • @ivanrussui4126
      @ivanrussui4126 3 ปีที่แล้ว

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

  • @АртурКушнір-о4я
    @АртурКушнір-о4я ปีที่แล้ว

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

  • @alioo9304
    @alioo9304 3 ปีที่แล้ว +1

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว

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

  • @evseevav
    @evseevav 3 ปีที่แล้ว

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว

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

    • @evseevav
      @evseevav 3 ปีที่แล้ว

      @@SuprunAlexey нет

  • @asadaa3095
    @asadaa3095 3 ปีที่แล้ว +1

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว

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

  • @АРТЕММ-р9г
    @АРТЕММ-р9г 3 ปีที่แล้ว +1

    Спасибо))

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว +1

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

    • @АРТЕММ-р9г
      @АРТЕММ-р9г 3 ปีที่แล้ว

      @@SuprunAlexey гляну)

  • @ДиёрБахтияров-ф6и
    @ДиёрБахтияров-ф6и 3 ปีที่แล้ว +1

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

  • @иванжук-ц2н
    @иванжук-ц2н 3 ปีที่แล้ว +2

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

  • @СергейСульженко-ф9я
    @СергейСульженко-ф9я 2 ปีที่แล้ว

    Спасибо

  • @olegostakhov8499
    @olegostakhov8499 3 ปีที่แล้ว +1

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว

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

  • @ВторойкиборгЧеловек-Сидр
    @ВторойкиборгЧеловек-Сидр 3 ปีที่แล้ว +1

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

  • @Дико-о3я
    @Дико-о3я ปีที่แล้ว

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

  • @alexandrbusalkin1715
    @alexandrbusalkin1715 3 ปีที่แล้ว +1

    класс

  • @КириллЮрьевич-п3ы
    @КириллЮрьевич-п3ы ปีที่แล้ว

    Красава

  • @vasyadz165
    @vasyadz165 3 ปีที่แล้ว

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

  • @kidsartandrubiks8483
    @kidsartandrubiks8483 2 ปีที่แล้ว

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

    • @SuprunAlexey
      @SuprunAlexey  2 ปีที่แล้ว

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

  • @РоманСолнцев-х9э
    @РоманСолнцев-х9э 3 ปีที่แล้ว

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

  • @fake_gosman
    @fake_gosman 3 ปีที่แล้ว

    animate.css and wow.js

  • @trance_hardstyle
    @trance_hardstyle 3 ปีที่แล้ว +1

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

    • @SuprunAlexey
      @SuprunAlexey  3 ปีที่แล้ว +1

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

    • @trance_hardstyle
      @trance_hardstyle 3 ปีที่แล้ว

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

    • @trance_hardstyle
      @trance_hardstyle 3 ปีที่แล้ว

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