Создание сайта с красивой анимацией фона (HTML CSS JavaScript)

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 76

  • @wdm
    @wdm  5 місяців тому +1

    💥 Все курсы в одном комплекте 👇👇👇
    webdesign-master.ru/bundle_courses

  • @Danze_lite
    @Danze_lite 7 місяців тому +33

    господи, лучший канал по реальной фронт разработке, где можно увидеть как используются крутые технологии и библиотеки. Огромное спасибо , беру комплект курсов )

    • @wdm
      @wdm  7 місяців тому +5

      Благодарю! Приятного обучения)

  • @ДмитрийСвешников-с5ж
    @ДмитрийСвешников-с5ж 7 місяців тому +3

    Купил курс, решил поддержать тебя, спасибо за твои старания)

    • @wdm
      @wdm  7 місяців тому +3

      Спасибо! Приятного обучения)

  • @anoncatod2177
    @anoncatod2177 7 місяців тому +6

    Автор, Вы просто золотой самородок среди серости в Ютубе! Спасибо Вам большое за уроки и за курсы!

  • @seal1315
    @seal1315 7 місяців тому +2

    Обожаю этот канал ! Не пожалел, что взял курсы! Всё изложено четко без воды. Ставит мощную базу💪

  • @iziz6279
    @iziz6279 Місяць тому +1

    Как же это красиво! Это чертовски круто!
    Я конечно понимаю, что ответ будет отрицательным... Но - не получишь пока не попросишь. Возьмите в ученики!

  • @GEELSRC
    @GEELSRC 7 місяців тому +3

    Это мой лучший канал по фронтенду, сам бекендер но с удовольствием смотрю видео с этого канала, автору респект !

  • @AlisherNasimov7580
    @AlisherNasimov7580 7 місяців тому +4

    Добрый день. Только зашел на Ваш канал. Это что то нереальное! я вначале пути только, начал верстку сайта на Тильде. Сейчас просматриваю figma.. Наткнулся на Ваши видео... Наверное начну учить CSS HTML.. Крутые вещи Вы делаете. От души желаю удачи!

    • @wdm
      @wdm  7 місяців тому +3

      Здравствуйте. Спасибо! Успехов в обучении)

  • @КамильХакимов-р7е
    @КамильХакимов-р7е 7 місяців тому +3

    Огромное спасибо за такой контент, где реально показывают как работать с анимацией!!! Благодарю

  • @Anastasiya364
    @Anastasiya364 7 місяців тому +3

    Потрясно. Уже не терпится 🎉❤покодить

  • @oopssorry.7221
    @oopssorry.7221 6 місяців тому +2

    Мужик, ты реально мегамозг!
    Все доходчиво, интересно, с объяснениями.
    Очень благодарен тебе, просто лучший!

  • @ESCOOBAAR
    @ESCOOBAAR 7 місяців тому +2

    Очень приятно слушать, респект за твои работы!

  • @igorsenichev3779
    @igorsenichev3779 7 місяців тому +3

    Как всегда шикарно! 🤗😇👍

  • @Koleso-j6d
    @Koleso-j6d 3 місяці тому +1

    Самый лучший канал,смотрю с самого начала, научился многому благодаря тебе брат ❤

  • @SeriyShapoval
    @SeriyShapoval 7 місяців тому +1

    Абалденно🤩🤩🤩 У тебя очень классные видео особенно для самообучения и практики

  • @АнастасияМорозова-я2у
    @АнастасияМорозова-я2у 7 місяців тому +1

    Просто ВАУ!!! Спасибо большое))

  • @sergeytukhtarov1175
    @sergeytukhtarov1175 Місяць тому +1

    Отличное видео. Очень крутой эффект

  • @Barsi.77
    @Barsi.77 6 місяців тому +1

    Респект ! Так классно все объясняет и показывает!

  • @ПервыйБой
    @ПервыйБой 7 місяців тому +2

    За такое лайк однозначно!!!!

  • @Rostyslav-Kinash
    @Rostyslav-Kinash 7 місяців тому +1

    спасибо за урок

  • @Gda64
    @Gda64 7 місяців тому +1

    опять шедевр🤩

  • @ВенераКамалова-м7с
    @ВенераКамалова-м7с 7 місяців тому +1

    Как же все круто💥

  • @SvirkoSam
    @SvirkoSam 6 місяців тому +1

    Спасибо за урок! Просто годнота ❤

  • @gude_qe3ttt
    @gude_qe3ttt 7 місяців тому +1

    Это фантастика!

  • @m1akarov2021
    @m1akarov2021 7 місяців тому +1

    Потрясающе!

  • @dimitridovgan6364
    @dimitridovgan6364 7 місяців тому +2

    Good tutorial, thank you 👍

  • @andreys3346
    @andreys3346 7 місяців тому +1

    Смотивировал меня поверстать. 👍

  • @alexandr-v
    @alexandr-v 6 місяців тому +1

    За стилизацию swiper спасибо.

  • @ranstplay8876
    @ranstplay8876 7 місяців тому +1

    шедевр

  • @СергейПанкрашов-ъ9д
    @СергейПанкрашов-ъ9д 5 місяців тому +2

    Подскажите, пожалуйста, название темы для ОС

  • @MicroDobb
    @MicroDobb 7 місяців тому +1

    очень интересный урок. никогда бы не подумал что так можно. Автор, еще очень интересна тема спрайтов для веб-приложений. Может когда-нибудь у Вас появится время это объяснить по человечески) Спасибо

    • @wdm
      @wdm  7 місяців тому +1

      Здравствуйте. Спасибо! Спрайты немного архаичная тема уже на данный момент.

    • @MicroDobb
      @MicroDobb 7 місяців тому

      @@wdm понял, просто до сих пор используется в 3д графике, думал тут тоже можно

    • @wdm
      @wdm  7 місяців тому +1

      Да, функционально это разные вещи в 3D графике и в веб-разработке. Графические элементы интерфейса сейчас преимущественно в векторе, необходимости делать растровые сеты сейчас нет.

  • @blatov
    @blatov 7 місяців тому +1

    Очень круто 👍

  • @YutaLoo
    @YutaLoo 6 місяців тому +1

    Очень круто, все объясняется, просто шикарно. А как после скрола добавить ещё

    • @wdm
      @wdm  6 місяців тому +1

      Просто размещаете контент дальше, а там можете и анимацию перехода какую-нибудь сделать.

  • @AlisherNasimov7580
    @AlisherNasimov7580 7 місяців тому +2

    Super !!!

  • @YutaLoo
    @YutaLoo 6 місяців тому +1

    А можете сделать музыкальный плеер)

  • @YutaLoo
    @YutaLoo 6 місяців тому

    А можете, красивый профиль показать как сделать)

  • @WebDevXpert
    @WebDevXpert 7 місяців тому

    very nice design

  • @banfee3174
    @banfee3174 4 місяці тому

    Как называется ваша тема vscode ?

  • @Sozenishe
    @Sozenishe 3 місяці тому

    Как вы определяете какой именно класс указывать для дива? Вернее, откуда вы берёте названия для этих классов?

    • @wdm
      @wdm  3 місяці тому +1

      @@Sozenishe здесь есть несколько подходов в нейминге. 1. Называть классы, исходя из того, что элемент делает. 2. Исходя из того, чем он является по сути. Я использую обычно второй вариант.

    • @Sozenishe
      @Sozenishe 3 місяці тому

      @@wdm понял, мне показалось, что в зависимости от названия класса для дива устанавливаются свои css свойства.

  • @bunX0928
    @bunX0928 5 місяців тому

    Как получить все коды сразу?

  • @OliverFeliz-x5
    @OliverFeliz-x5 7 місяців тому +1

    Ой, мама дорогайааа... Что ты со мной делаешь!.......

  • @vovan454
    @vovan454 5 місяців тому

    Какое расширение он использует для того чтоб работал swiper ???? Помогите пожалуйста

    • @wdm
      @wdm  5 місяців тому

      Какое расширение?

    • @vovan454
      @vovan454 5 місяців тому

      ​@@wdmпросто у меня почему то не свайпается на другой слайд

    • @wdm
      @wdm  5 місяців тому +1

      У вас опечатка. Проверьте наличие библиотеки в libs и корректность подключения. Если в готовом примере работает, значит у вас опечатка или плагин некорректно подключен.

    • @vovan454
      @vovan454 5 місяців тому +1

      @@wdm спасибо, у меня все работает, я просто забыл библиотеку

  • @batskalevich
    @batskalevich 6 місяців тому

    Подскажите, есть ли какие-то решения, если на фон нужно вставить видео с альфа-каналом, чтобы была возможность работать с бэкграундом?

    • @wdm
      @wdm  6 місяців тому +1

      Нет, только стилизация видео в редакторе под окружение в сцене.

  • @ava_crey
    @ava_crey 6 місяців тому +1

    Можете помочь, мне в терминале пишет Error opening input: No such file or directory
    Error opening input file background-60.mp4.
    Error opening input files: No such file or directory, когда я вставляю команду которая есть в папке, как решить?

    • @wdm
      @wdm  6 місяців тому +2

      А терминал в какой папке запущен? Его нужно запустить в той папке, где есть этот файл.

    • @ava_crey
      @ava_crey 6 місяців тому +1

      @@wdm терминалу дал путь именно как у вас C:\Program Files\ffmpeg\bin у меня все запущен но, видео не читает и я не понимаю как, хотя сделал так как вы показали но, у вас видео название такой background-60.mp4 а у меня background-60, но я не знаю насколько это влияет. Можете что нибудь посоветовать?

    • @wdm
      @wdm  6 місяців тому

      В настройках папки следует включить отображение расширений файлов, если оно отключено. Там в папке нужно найти настройки и отключить галочку "скрывать расширения". После этого обязательно нужно убедиться, что открыта именно та папка, в которой есть "background-60.mp4", вместе с расширением .mp4. В этой папке нужно запустить правой кнопкой мыши терминал и выполнить команду конвертации.

    • @ava_crey
      @ava_crey 6 місяців тому

      ​​@@wdmА у вас Виндовс или Линукс? Ну я сделал как вы написали, ну так: нашли "скрывать расширений" и убрали галочку и сразу рядом background-60 появился слово .mp4 но все равно дает ошибку. Я не могу открыть терминал именно в папке, я открываю терминал с Win+R и пишу CMD и там написано C:\Users\abdul> и вставляю вашу команду, то есть вот так выходит: C:\Users\abdul> ffmpeg -i background-60.mp4 -vf scale=1920:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p background.mp4 и нажимаю Энтер и выходит ошибка. У меня Windows может поэтому у меня проблема

    • @wdm
      @wdm  6 місяців тому

      Нужно открыть терминал именно в папке. Зажмите Shift, правая кнопка мыши и появится нужный пункт. У меня Windows.

  • @Юрий-м4ш7р
    @Юрий-м4ш7р 7 місяців тому +1

    Какая операционка у автора?

    • @wdm
      @wdm  7 місяців тому +3

      В данном уроке используется Windows.

    • @knowledge9396
      @knowledge9396 7 місяців тому +1

      @@wdm Позвольте подробней поинтересоваться, почему весь интерфейс операционной системы выглядит иначе. Конкретно интересует VSCode и его вкладки над которыми ни чего больше нет. Для меня это очень важный момент, так как на экране 14" ноутбука каждый пиксель на счету.

  • @MikeBahnii
    @MikeBahnii 6 місяців тому

    Как ти сделал такой vs code

    • @wdm
      @wdm  6 місяців тому +1

      В папке User создаём custom.css и в нём стилизуем интерфейс как удобно. Можно использовать DevTools в пункте меню Help, чтобы посмотреть DOM.

    • @MikeBahnii
      @MikeBahnii 6 місяців тому

      @@wdm ти етот шедевр сам сделал

    • @wdm
      @wdm  6 місяців тому +1

      Ну, VS Code - это по сути та же веб-страничка, можно оформить как хочешь 😄

    • @MikeBahnii
      @MikeBahnii 6 місяців тому

      @@wdm круто я не знал што так можно, один вопрос сколько ти занимаешся програмированиям(веб) и кто ти такой ти правда крут

    • @wdm
      @wdm  5 місяців тому +1

      С 2005 года.

  • @БекзатДүйсенбекұлы-й8ч

    как мы напишем это все😤

    • @wdm
      @wdm  6 місяців тому +2

      Ручками ☝️