Создание сайта с горизонтальным Parallax эффектом (HTML CSS JavaScript)

Подписаться 303 тыс.

Просмотров 59 тыс.

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и объем в сцену. Я покажу самый простой и универсальный способ как создать сайт с параллакс эффектом, который вы с легкостью сможете использовать в ваших проектах.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
01:28 Обзор материалов урока
02:26 Подготовка изображений для Parallax эффекта
18:37 Приступаем к HTML верстке сайта
18:54 Подключаем файлы CSS и JavaScript
21:06 Базовая HTML верстка сайта
24:20 Приступаем к CSS стилизации
24:46 Стилизация экранов для скролла
26:21 Логика движения параллакс слоев
27:33 Универсальные HTML атрибуты для Parallax
33:33 Эффект виньетки с помощью CSS
35:10 Для чего нужен transform-style: preserve-3d
36:36 Добавляем частицы с помощью canvas JS
40:06 Свободный скроллинг сайта free mode
44:27 Как сделать вертикальный параллакс сайт
45:41 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@wdm 2 месяца назад

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

@dizhelf8869 Год назад

WebDesign Master, хочу сказать тебе огромное спасибо за то что ты делаешь не "простые вёрстки за 40 минут", а показываешь реально сложные элементы и показываешь как их можно упростить. Думаю для меня ты стал человеком который показал, что вёрстка не заканчивается на карточках товара и логотипа в header, ты показал что можно сделать всё что захочешь и поэтому, добавляю тебя в своё сердечко, рядом с другими ютуберами, с которыми я проходил тяжелую дорогу вхождения в frontend.

@user-ve8ux5yy7y 9 месяцев назад

Просмотрел и повторил больше десятка уроков. Буду смотреть и дальше, а также ждать новых. Офигенно! Спасибо

@frozyarozin4856 Год назад

как же я люблю видео под музыку из таких игр , кайф для ушей 😌

@mansur_sw07 Год назад

Нигде нету таких уроков, описано очень подробно и нравится мне оно, спасибо большое вам что делаете нам такие уроки :)

@igorsenichev3779 Год назад

За такой шикарный МК и 1000 лайков не жалко поставить. Очень нравятся ваши уроки 👍

@etoeto4933 Год назад

Шикарный урок, очень понятно подан, сам результат - нечто прекрасное. Огромное спасибо автору

@pianiy.ma4o Год назад

Спасибо за тутор, действительно лучший канал из этой категории

@user-ui1vu6yi6d 7 месяцев назад

Добрый день! какой вы отличный учитель! Благодарю Вас! Спасибо огромное! Я Вас Люблю!

@KudaTiTudaiYa Год назад

Первый раз на этом канале, посмотрел видос последний который вышел 6дн наза и сейчас начал этот и уже могу сказать: Вы простт владыка по данному контенту!!!!! Лайк, подписка, колокольчик!!!!!!!!!! Спасибо. Я вас долго искал😁 вы мне были нужны как вода

@orazdaurenov3534 Год назад

Просто замечательно!! Спасибо за очень полезный и интересный урок!!

@semimaks Год назад

Ещё не посмотрел видео, но за оформление и подачу материала лайк,- очень впечатляет! Сделано старательно и с душой

@user-it8ys4jb9k Год назад

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

@littlecat8445 Год назад

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

@eugenewest6061 Год назад

Просто лучший! Без лишних слов!

@AnVas888 Год назад

Спасибо огромное автору, я полюбил это дело. Друг если ты это читаешь, то что ты делаешь приносит много пользы, видны твои старания, рад что нашел твои канал.

@timurislamov1671 Год назад

Самый лучший канал шикарнейших анимаций

@taras8103 Год назад

Оба проекта с css parallax эффектом зашли на ура) Спасибо

@wdm Год назад

Посмотрите ещё другие крутые уроки на канале, зайдут также хорошо)

@andyhadson8278 Год назад

Очень круто!! И эффектно!

@ogiamirov1740 Год назад

ты просто лучший) первый видос с параллакс эффектом я делал 5 часов(ну за ним повторил), а уже вот второй потратил час. Уже мнооого чего понял. Аригато за урок)

@magistrbrims 3 месяца назад

Великолепно. Спасибо!

@Klinge74 Год назад

благодарю! у вас талант обучать))

@Ismoil_Sharifov Год назад

урок как всегда круто! Спасибо!

@DevALine Год назад

Спасибо за видео👍

@feodosiyazadonskaya Год назад

Я давно представляла Нечто... Наконец нашла. ❤❤❤❤❤❤❤❤❤❤❤❤

@djubei2265 Год назад

Ля , как красиво.

@rostyslavkinash5232 Год назад

спасибо за видео

@nilabhjaiswal7036 Год назад

This is amazing

@tractorist1 Год назад

красота

@dyachenkoandrii Год назад

😊😊😊 Cool!

@DmytroDryha Год назад

Thanks

@user-cr6sl7vy4k Год назад

Я просмотрел пред идущий ролик, но не успел пройти урок. Пройду в ближайшие дни, так что несколько часов просмотра гарантирую)))

@instillust 9 месяцев назад

Wonderful❤️

@grayowl8077 4 месяца назад

Спасибо большое! Одна маленькая поправка, хоть оно и понятно по смыслу о чем идет речь, но, все-таки то место изображения где нет пикселов - (как черно-белая шахматка) - это - "прозрачность", а не "непрозрачность". Не принципиально, конечно, но начинающих может запутать 🙂

@wdm 4 месяца назад

Здравствуйте. Спасибо за комментарий. Но тут есть один момент. Всё таки правильно говорить именно "непрозрачность". То есть если 100% - объект полностью непрозрачен. Если 75%, то его прозрачность составит 25%, а непрозрачность 75%.

@VoiceSpeck 4 месяца назад

В ведьмака поиграть захотелось 😅 какая там работа уже))

@BoomKillazz Год назад

👍👍👍

@azizbek8660 Год назад

👏🏻👍🏻

@Sergey_D. Год назад

Очень круто! Будут ли уроки с GSAP? Хотелось бы увидеть

@wdm Год назад

Из последних уроков, в двух-трёх мы точно использовали GSAP и интересные плагины к нему, смотрите плейлист УРОКИ. В будущем GSAP также будем использовать)

@vladek714 Год назад

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

@mirofficial1049 Год назад

сколько примерно нужно времени, чтобы выучить хотя бы html и css на нормальном уровне, елси буду учить каждый день по 1-2 часа?

@evgeniydubrovin Год назад

А можно название фоновой мелодии? Я переслушал все саундтреки ведьмака и не смог найти эту мелодию(

@wdm Год назад

The Fields of Ard Skellig

@runaruni898 Год назад

cool

@user-oc3yy2vq8e День назад

А можно сделать так, что бы при открытии сайта эти картинки сами скролились. Типа что бы как видео получилось

@wdm День назад

Есть несколько вариантов. 1. Простой. Включить autoplay, добавив к существующим параметрам эти: autoplay: { delay: 1000 }, loop: true, 2. Посложнее. Будет просто бесконечное движение. 2.1 Необходимо подключить библиотеку версии 4.0.7: cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js 2.2 Применяем эти параметры в JS: new Swiper('.slider', { parallax: true, spaceBetween: 18, loop: true, freeMode: true, autoplay: { delay: 0, disableOnInteraction: false, }, speed: 10000 }) 2.3 Добавляем в конец CSS файла: .swiper-container-free-mode > .swiper-wrapper{ transition-timing-function : linear; }

@alibikhasenov3726 Год назад

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

@wdm Год назад

Здравствуйте. Создаете кнопку с классом .button В JavaScript: 1. Swiper в константу: const swiper = new Swiper('.slider', {... 2. Добавляете код: document.querySelector('.button').addEventListener('click', function() { swiper.slideNext() })

@alibikhasenov3726 Год назад

@@wdm Спасибо большое за помощь и обратную связь :) Если кому-то нужно, чтобы было обратное действие, то достаточно изменить на swiper.slidePrev()

@sasza. Год назад

а такое можно сделать при помощи gsap?

@wdm Год назад

Да без проблем) Вариантов реализации подобного функционала в верстке масса.

@sasza. Год назад

@@wdm спасибо за ответ

@bobo-ll1jw Год назад

а что делать если белые полосы не пропали когда написал где нужно transform-style: preserve-3d; ???

@wdm Год назад

Конкретно в этом примере из урока или в другом проекте?

@bobo-ll1jw Год назад

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

@Kleo_Wyatt Год назад

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

@wdm Год назад

Думаю, это не проблема, если знать, о чем говорить) Для таких практических уроков на каких-то примерах сценарий не готовлю.

@real_arra Год назад

А где такого рода картинки можно найти ?

@wdm Год назад

Здравствуйте. Эти картинки я нашел на сайте Ведьмака, это официальные скриншоты) А вообще, если нужна графика для вдохновения, на Pinterest хорошие подборки по запросу, в Яндекс Картинках результаты тоже не плохие, в отличие от Google Images.

@real_arra Год назад

@@wdm спасибо, что ответили!)

@fl1ss613 Год назад

Можешь пж сказать а как ты сразу не сохраняя файл переименовываешь и создаёшь его в нужном названии???У меня слева нету такой функции

@wdm Год назад

Какой у вас редактор кода? Visual Studio Code?

@fl1ss613 Год назад

@@wdm да

@wdm Год назад

@@fl1ss613 Боковая панель VS Code включена? Вы видите список папок, html файл?

@fl1ss613 Год назад

@@wdm список папок появляется только когда я открываю саму папку через верхнюю панель, а вот в случае редакта кода без папки в боковой панели могу разве что переключать 2 файла, но создавать а тем более переименовывать не получается

@wdm Год назад

Для начала убедитесь, что у вас установлена свежая версия VSCode - можете установить и настроить заново по уроку. Далее перетащите папку (можно пустую) в редактор, откроется боковая панель. Если панель не открылась зайдите в меню Вид > Проводник. Должна появиться панель создания файлов и папок. Кроме того, можно нажать правой кнопкой мыши, откроется подменю, в котором можно выбрать нужное действие - создать фал или папку.