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

Поделиться
HTML-код

Комментарии • 87

  • @user-lj8hp9lo2x
    @user-lj8hp9lo2x 8 месяцев назад

    Красава

  • @Tiberiumgod
    @Tiberiumgod 3 года назад +15

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

  • @Life-nl1kt
    @Life-nl1kt 3 года назад +1

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

  • @FirdavsSaidmurodov-tu8rd
    @FirdavsSaidmurodov-tu8rd 13 дней назад

    it's really good
    I like it:)

  • @RenatChapas
    @RenatChapas 3 года назад +4

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад

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

  • @user-gs3pu5dv2s
    @user-gs3pu5dv2s Год назад

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

  • @r7tonn46
    @r7tonn46 Год назад

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

  • @antonmaklakov
    @antonmaklakov 3 года назад +10

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад +1

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

    • @SabilasSalam
      @SabilasSalam 6 месяцев назад

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

  • @behanzi1370
    @behanzi1370 3 года назад +1

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

  • @ZPUA24
    @ZPUA24 3 года назад +2

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад +1

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

  • @user-vp6vz9tf4w
    @user-vp6vz9tf4w 2 года назад

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

  • @M27B_our_victory
    @M27B_our_victory 3 года назад

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

  • @Altenzo
    @Altenzo 3 года назад +1

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

  • @user-si6kw3cz4l
    @user-si6kw3cz4l 2 года назад

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

  • @user-uy1ci7zl9h
    @user-uy1ci7zl9h 6 месяцев назад

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

  • @NeedForHeavyMetal
    @NeedForHeavyMetal 2 года назад

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

  • @yaroslavdev2411
    @yaroslavdev2411 3 года назад

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

  • @stt1632
    @stt1632 3 года назад +2

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад +1

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

    • @stt1632
      @stt1632 3 года назад +1

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

  • @World-cl2vd
    @World-cl2vd Год назад

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

  • @user-vy6zs7hh9f
    @user-vy6zs7hh9f 5 месяцев назад

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

  • @AOFTG
    @AOFTG 3 года назад +4

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад +1

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

  • @BROnik
    @BROnik 3 года назад

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

  • @danil_zavyalov
    @danil_zavyalov 3 года назад +1

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

  • @Seacrest.
    @Seacrest. 3 года назад +1

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

  • @ShortsPageTech
    @ShortsPageTech 3 года назад +1

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

  • @user-oh4mt8xi2j
    @user-oh4mt8xi2j 2 года назад

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

  • @lisofsky8151
    @lisofsky8151 2 года назад +5

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

  • @user-le1iw4yx8i
    @user-le1iw4yx8i 3 года назад

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

  • @asadaa3095
    @asadaa3095 3 года назад +1

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад

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

  • @layyly
    @layyly 2 года назад

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

  • @xpornzenin
    @xpornzenin 3 года назад +3

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад +1

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

  • @Alexey_Gri
    @Alexey_Gri 3 года назад

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

  • @user-ex5lt9qc3e
    @user-ex5lt9qc3e 2 года назад

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

  • @etodillerx2095
    @etodillerx2095 3 года назад +1

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

  • @casuale1200
    @casuale1200 3 года назад +1

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

  • @user-uy9lb5el2f
    @user-uy9lb5el2f 3 года назад +1

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

  • @user-sk4to3sl7w
    @user-sk4to3sl7w 3 года назад +1

    Спасибо))

    • @SuprunAlexey
      @SuprunAlexey  3 года назад +1

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

    • @user-sk4to3sl7w
      @user-sk4to3sl7w 3 года назад

      @@SuprunAlexey гляну)

  • @horikeisukke_7949
    @horikeisukke_7949 Год назад

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

  • @user-cl9yc1tw2i
    @user-cl9yc1tw2i 2 года назад

    Спасибо

  • @user-tg7pn3ro6i
    @user-tg7pn3ro6i 3 года назад +1

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

  • @fake_gosman
    @fake_gosman 3 года назад

    animate.css and wow.js

  • @alioo9304
    @alioo9304 3 года назад +1

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад

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

  • @user-ie8fy2wl5p
    @user-ie8fy2wl5p 3 года назад

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

  • @kidsartandrubiks8483
    @kidsartandrubiks8483 2 года назад

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

    • @SuprunAlexey
      @SuprunAlexey  2 года назад

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

  • @vasyadz165
    @vasyadz165 2 года назад

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

  • @olegostakhov8499
    @olegostakhov8499 3 года назад +1

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

  • @user-iy5sn5bt5k
    @user-iy5sn5bt5k 3 года назад +2

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

  • @evseevav
    @evseevav 3 года назад

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад

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

    • @evseevav
      @evseevav 3 года назад

      @@SuprunAlexey нет

  • @ivanrussui4126
    @ivanrussui4126 3 года назад

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

    • @SuprunAlexey
      @SuprunAlexey  3 года назад

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

    • @ivanrussui4126
      @ivanrussui4126 3 года назад

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

  • @finestruwebtactic5452
    @finestruwebtactic5452 Год назад

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

  • @alexandrbusalkin1715
    @alexandrbusalkin1715 3 года назад +1

    класс

  • @valgerofficial
    @valgerofficial 3 года назад

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

  • @user-pf1wb2nx8b
    @user-pf1wb2nx8b 3 года назад

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

  • @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 можно вместе ?