Создание красивого сайта с 3D эффектом при скролле (HTML + CSS)

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

КОМЕНТАРІ • 36

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

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

  • @Dextonify
    @Dextonify 7 місяців тому +11

    Не по уведомлению, а по зову сердца. Спасибо за урок

  • @МарияСухомлинова-х9ш
    @МарияСухомлинова-х9ш 7 місяців тому +4

    Master, Вы как всегда на высоте! Без воды, четко и по делу. Прекрасная атмосферная работа!!!!

  • @ЕгорРура
    @ЕгорРура 7 місяців тому +1

    Потрясающе! И не догадывался, что такое волшебство можно создать абсолютно без js!!!! Чудеса да и только )

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

    Как всегда - отлично и интересно. Спасибо! Пойду пересматривать параллакс, так как задачка по этой теме нарисовалась:)

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

    Ждал Вас , спасибо за видео! Вы очень сильный разработчик!

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

    Спасибо за интересный урок! И вообще ваши уроки очень крутые.

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

    Спасибо за крутой проект.

  • @SaSa-ei7sz
    @SaSa-ei7sz 7 місяців тому +5

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

  • @АртурЗарипов-б2й
    @АртурЗарипов-б2й 7 місяців тому +1

    Большое спасибо!

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

    Спасибо!
    Супер!
    Очень круто!

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

    Супер видео.

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

    Круто!

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

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

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

    Спасибо!

  • @ЯнаТимофеева-ш7и
    @ЯнаТимофеева-ш7и 4 місяці тому +1

    Спасибо. Все получилось. 🍪

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

    спасибо за урок! как всегда очень полезно😌 вот только не очень поняла, как сделать прокрутку вниз, если у страницы есть дальнейшее содержание?

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

      Здравствуйте. Здесь всё просто. Мы же задаем высоту секции в vh, где происходит анимация. То есть когда анимация завершается, фактически, мы доскроллили до конца. Это значит, что дальше будет прокручиваться весь дальнейший контент. Вам просто необходимо добавить обертку для контента, указать position: relative, при необходимости подобрать z-index и верстать последующий контент, который будет прокручиваться дальше. Если внимательно посмотреть и понять урок - когда начинается, когда заканчивается анимация, как происходит привязка к скроллу, всё встанет на свое место и ответ будет на поверхности.

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

    Здравствуйте, не могли бы записать видео как сделали картинки в Photoshop? Для новичков кто никогда не работал в Фотошоп. И сделать из этого видео ссылку на видео где показана как картинки редактировались в Фотошоп с нуля.

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

      Здравствуйте. Хорошо.

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

    Комментарии в поддержку каналу: т9 вклада каждого использования необходим доступ...

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

    Что с проводнитком? Как такой же сделать?

  • @kirill_polezhaev
    @kirill_polezhaev 2 місяці тому +1

    Ребят, столкнулся с проблемой: всё делал по технологии, всё выглядит прекрасно, НО у меня появляется вертикальный скролл-бар, и никак его не убрать. Подскажите пожалуйста, кто знает,чем исправить этот косяк?

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

      /* Скрыть скроллбар для современных браузеров (на базе Webkit, таких как Chrome, Safari, Edge, Opera). */
      ::-webkit-scrollbar {
      display: none;
      }
      /* Скрыть скроллбар для Firefox */
      html {
      scrollbar-width: none; /* Firefox */
      }
      /* Скрыть скроллбар для Internet Explorer 10+ */
      body {
      -ms-overflow-style: none; /* IE and Edge */
      }

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

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

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

      Можно создать инлайновый тег style, в который загружать переменные, в зависимости от медиа запросов:
      :root { --background-1: url(image-regular.png) }
      @media (max-width: 300px) {
      :root { --background-1: url(image-small.png) }
      }
      И так для каждого слоя.

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

      @@wdmлучший, спасибо

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

    Да уж, знаю только тег , так прокачать свой скилл, займёт несколько жизней...

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

      Чуть быстрее)

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

    You create very things very good but I didnt understood your language 😢

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

      ⚙ > Russian (auto-generated) > Auto-translate > English

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

      @@wdm I need code

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

      link in description

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

    Can you afford thier codes 😢

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

      link in description