Создание красивого сайта на HTML, CSS и JavaScript (CSS-анимация, Blur, Parallax, Gradient)

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ม.ค. 2025

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

  • @timchosen9974
    @timchosen9974 2 ปีที่แล้ว +97

    Невероятно красиво. Я третий раз перематываю в начало, чтобы кайфануть с того, как эти картинки плавно двигаются) Респект за проделанную работу!

  • @vatasi7312
    @vatasi7312 2 ปีที่แล้ว +10

    Капец , ваш дизайн это нечто, мне кажется даже люди которые ни как не связаны с вёрсткой и вообще it , просто увидев заставку нажмут на видео и посмотрят. Это как видео про очистку водоема хахах )... Кто смотрел тот поймет)))

  • @Петр-ц2в
    @Петр-ц2в 2 ปีที่แล้ว +11

    Действительно, некоторых фишек не знал! Очень профессионально и быстро верстаешь)

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

    Я начал учиться в сфере ИТ 5 лет назад, сейчас решил определится со сферой и попробовать веб, не фронт, а бек на асп.нет, но все равно мне очень понравился ролик. Очень приятный голос и подача, объясняется каждое действие и почему именно такое решение. Это идеально

  • @jascherkagri1864
    @jascherkagri1864 2 ปีที่แล้ว +4

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

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

    Галерея действительно потрясающая… спасибо тебе огромное! Человечище!!

  • @alexmckaley904
    @alexmckaley904 2 ปีที่แล้ว +6

    афигеннейший урок, спасибо от всех верстальщиков. 🙏🏻

    • @vipro.design
      @vipro.design 2 ปีที่แล้ว +2

      Да и не только от верстальщиков. Я в бэкенде работаю, но периодически тоже смотрю этот канал. Полезно для всех.

  • @antonmolchanov9327
    @antonmolchanov9327 2 ปีที่แล้ว +25

    Вау, это очень красиво и интересно! Обязательно попробую сегодня сделать

  • @ИгорьМешалкин-ж7ф
    @ИгорьМешалкин-ж7ф ปีที่แล้ว +1

    Крутой ты мужик. Когда-нибудь я возьму отпуск и проделаю все твои уроки.

  • @sv9tgolden
    @sv9tgolden 2 ปีที่แล้ว +9

    Очень красиво. Нигде не видел такое

  • @elevkoy2041
    @elevkoy2041 2 ปีที่แล้ว +1

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

  • @ДанаКатуяр
    @ДанаКатуяр 2 ปีที่แล้ว

    Смотреть одно удовольствие! Результат выглядит очень эффектно

  • @ИгорьГлазков-с1б
    @ИгорьГлазков-с1б ปีที่แล้ว +1

    Уникальное видео! Спасибо Вам.

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

    Как же круто) Спасибо что создаешь такие уроки, для начинающих это важно ооочень!

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

    Крутая идея но не хватает скрола на начало слайда в конце + что бы при нажатии на карточку нельзя было открыть другую . Лайк

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

    Спасибо! Очень полезный и ёмкий урок - грех не повторить все действия за автором, практики ради☺🤓

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

    Шикарная галерея! огромное спасибо за такой интересный урок!

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

    Дабл-вау эффект... Давно не заглядывал на канал и тут на тебе. Ай, малацца!!!1

  • @Sectant-Mafia
    @Sectant-Mafia 11 หลายเดือนก่อน

    Круто недавно начал обучаться. Круто что доступно обьясняешь это импотент для начинающих и не только

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

    Это огромный опыт, полезнейшие знания, с меня лай и коммент, спасибо огромное!

  • @_Leon_-
    @_Leon_- 2 ปีที่แล้ว +1

    Привет учитель. Ты просто волшебник!!)

  • @muradishmurodov44
    @muradishmurodov44 2 ปีที่แล้ว +1

    Спасибо большое. Очень понятный и красивый туториал

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

    Вышло ну ооочень классно и красиво 🔥🔥🔥 Сегодня попробую тоже такое сделать)) Делайте побольше таких прикольных штучек 😉

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

    Выглядит шикарно!

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

    Коммент в поддержку)
    Прикольный материал, спасибо!

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

    Крутяк! 😊

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

    Очень классный урок, ты супер 🔥

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

    Хоть и слишком много различных нюансов, да и js всё ещё кажется непонятным для меня как новичка, но такое действительно стоит попробовать, выглядит нереально круто💪. Спасибо автор! Пока только парочку фишек приметил для себя, надеюсь пригодятся в дипломной)

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

    Еще и тема с vice city
    Шикарное видео

  • @stranger3314
    @stranger3314 2 ปีที่แล้ว +1

    Отлично. Спасибо за урок.

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

    Огонь!! Просто бомба

  • @Jdkdkkx78
    @Jdkdkkx78 2 ปีที่แล้ว +1

    Спасибо за видос я сам не давно научился создавать сайты!!👍👍👍

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

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

  • @danilbadretdinov2787
    @danilbadretdinov2787 2 ปีที่แล้ว +1

    Бомба пушка!!!!!

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

    Я подписан бро.отлчная работа! Респектище))

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

    Балдеж, спасибо за урок

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

    Вот это уровень! Я понимаю

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

    Спасибо за труд 👍👍

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

    Урок очень полезный. Всё повторил за вами. Потом использовал в учебном проекте. Благодарю! P. S. : еслиб не вы я бы так и не разобрался бы наверное с галпом))

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

    Шикарный урок. Спасибо

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

    Отдельный лайк за audio-outro. Олдам сводит скулы при прослушивании )

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

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

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

    Галерейка просто уфф... ))))

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

    Я ТЕБЯ ЛЮБЛЮ ❤️❤️❤️

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

    Очень круто получилось!

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

    КрутяК!!!) джемс очередные "ответы на вопросы"...

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

    Ты лучший, спасибо большое тебе это просто красота...

  • @print-k1x
    @print-k1x 2 ปีที่แล้ว

    отлична работа
    спасибо за труд !!!!

  • @УланбекАлтымышев
    @УланбекАлтымышев ปีที่แล้ว

    Очень круто спасибо большое

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

    Excellent work bro!

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

    Эффектно!

  • @danilbadretdinov2787
    @danilbadretdinov2787 2 ปีที่แล้ว +1

    Вааааау!

  • @VOLGAr34
    @VOLGAr34 2 ปีที่แล้ว +1

    Круть!

  • @grifanya1975
    @grifanya1975 2 ปีที่แล้ว +1

    (❁´◡`❁) will-change и не слышал от таком свойстве) его в скрипт совать можно для отключения включения, но не в этом случае. Спасибо за урок!

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

    Где же это видео было месяц назад, когда мне такой же слайдер прилетел в верстку? xD

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

    Комментарий для продвижения этого видео)

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

    было интересно !

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

    Cпасибо!

  • @xirton
    @xirton 2 หลายเดือนก่อน

    подскажите пожалуйста, что делать если код точь в точь как у вас, но при открытии через браузер Chrome, высвечивается только белый экран без каких либо результатов?

    • @wdm
      @wdm  2 หลายเดือนก่อน +1

      Для начала откройте в Chrome файл index.html, который находится в папке ready-html. Если в таком случае всё работает, значит код не точь в точь, ищите ошибку, опечатку, пропущенный символ. Можете воспользоваться DevTools > Консоль. Правая кнопка мыши, Посмотреть код, вкладка Консоль. Если есть какая-то ошибка в JavaScript, исправьте её. Внимательно посмотрите на код, потому, что готовый пример работает в Chrome.

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

    Красавчик

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

    Всё шяс сяду и начну делать

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

    Подскажите пожалуйста, вы в браузере запускаете сервер? Или используете прогу

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

      В данном видео я использую расширение Live Server для редактора VS Code.

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

    спасибо вам!

  • @SycaLuBiCotaVovica
    @SycaLuBiCotaVovica 2 ปีที่แล้ว +1

    Спасибо за классный урок. При нажатии на фото, появляется тень, которая оставляет возможность кликать на другие изображения под ней. Вопрос, как этого избежать и закрывать фото не только при повторном клике на него, но и за его пределами. Спасибо.

    • @wdm
      @wdm  2 ปีที่แล้ว +1

      Здравствуйте. Можно при клике на изображение давать класс ещё и корневому тегу, например, body, помимо выбранного. Или добавить активному изображению псевдоэлемент before, который будет служить оверлеем и который перекроет другие айтемы. Вариантов масса.

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

      Я это реализовал таким образом:
      document.querySelectorAll( '.slider__item').forEach(item=>{
      item.addEventListener('click', event =>{

      if (item.classList.toggle('opened')){
      document.addEventListener( 'click', (e) => {
      const withinBoundaries = e.composedPath().includes(item);

      if ( ! withinBoundaries ) {
      item.classList.remove('opened');
      }
      })

      }
      })})

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

    Вваааууууу 👍

  • @НикитаБеловощев-ы7ц
    @НикитаБеловощев-ы7ц 2 ปีที่แล้ว

    добрый день, классное видео и не менее красивое оформление галереи!! Хочу спросить, а можно ли как-нибудь добавить кнопку возврата к первому слайду? пробовал обычный вариант, но видимо так как сама страница не скролиться, то не дает((

  • @Максим-Хорошев
    @Максим-Хорошев 2 ปีที่แล้ว +2

    Админы подскажите пожалуйста видео создания обычного сайта многостраничника ? спасибо ...

    • @luksik0
      @luksik0 2 ปีที่แล้ว +1

      на канале покапайтесь, там есть создание от А до Я и другие серии видео

  • @ЮляКолечкина
    @ЮляКолечкина 2 ปีที่แล้ว

    Спасибо

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

    Спасибо большое! Действительно очень крутая фича!!! У меня вопрос (возможно, для кого-то глупый, так что извините заранее): как сделать так, чтобы при выборе слайда он раскрывался полностью на всю его ширину?

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

    Подскажите, пожалуйста, название темы оформления для VS Code?! Мягкая, приятная глазу. Урок супер. Закинул друзьям, пусть посмотрят, как нужно код писать и где правильный дизайн изучать ;)

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

      One Dark Pro - тема, которую я использую в VS Code.

  • @danjubas4879
    @danjubas4879 2 ปีที่แล้ว +1

    Почему у меня на сайте 3 дива ,а не один как у тебя ?

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

      Ты просто не подключил стили в head которые swiper'a.

  • @worldkill4annel102
    @worldkill4annel102 2 ปีที่แล้ว +1

    Посоветуете 27 дюймовый монитор для дизайнера

  • @Anti-zasor
    @Anti-zasor 2 ปีที่แล้ว

    Как правильно называется этот принцип с Переменными в CSS?

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

    здраствуйте, не работает opacity в visual studio, какая может быть причина?

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

    Такой вопрос я вставляю вместо твои свои изображение но они почемуто размитие и не отцентрование какието кароче незнаю как ето поправить

    • @wdm
      @wdm  2 ปีที่แล้ว +1

      Здравствуйте. Постарайтесь добавлять изображения такого-же разрешения и такой-же пропорции. Это важно.

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

      @@wdm Спасибо и такой вопрос можно ли както сменить разрешение основи картинки ну типу не 1920на 1080 а по менше
      а то как не пробуй чето то уже стает то левее

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

    а можно ли сделать так что бы была некая задержка перед переключением слайда? мне нужно реализовать кастомные анимации перед переключением, и нужно что бы в момент переключение запускалась функция, потом через 2 секунды слайдер переключался

    • @wdm
      @wdm  2 ปีที่แล้ว +1

      transition-delay: 2s для обертки не подходит?

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

      @@wdm хм) можно попробовать. как то не додумался до этого. по факту же да, там идет просто transform смещение. мне нужно при смене слайда навешивать на текущий активный элемент класс для анимации уходящей анимации, через 2 секунды сменить резко слайд и навесить на следующий слайд класс для анимации приходящего слайда)

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

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

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

      Здравствуйте. Можно просто обернуть тег айтема в тег a, тем самым мы получим возможность указывать ссылку на другую страницу посредством атрибута href.

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

      @@wdm спасибо) Уже разобрался)))

  • @АндрейПопов-л9ъ
    @АндрейПопов-л9ъ 10 หลายเดือนก่อน

    Можешь сделать ссылку на папку libs

    • @wdm
      @wdm  10 หลายเดือนก่อน +1

      Здравствуйте. На странице урока есть архив со всеми исходниками и библиотеками, которые использовали в видео уроке.

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

    И Вуаля

  • @4cristian
    @4cristian 2 ปีที่แล้ว +5

    Алексей, понравилось использование слайдера и параллакса, очень классно, попробовал сделать впервые 20 минут после появления урока, спасибо)
    Меня мучает вопрос, стоит ли изучать препроцессоры в css, и если да то какой из?

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

      Думаю, изучать стоит. Хотя изучать там особо нечего. А вот использовать или нет - на ваше усмотрение.