Создаём красивый параллакс-эффект | HTML, CSS, JS

preview_player
Показать описание
Вместе разрабатываем parallax-библиотеку с нуля: html, css и js.
🏰 Английский YouTube: @webelart_en

Ссылки:

00:00 введение
00:54 разметка html
03:58 добавляем стили CSS
09:30 разрабатываем JS
32:31 заключение

☃️Рекомендую посмотреть:

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
  1. Елена Литвинова — Искусство Веб-разработки 🛸
  2. parallax
  3. js уроки
  4. уроки по js
  5. javascript
  6. параллакс
Рекомендации по теме
Создание красивого сайта 1:12:09

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

Создаём красивый параллакс-эффект 0:33:18

Создаём красивый параллакс-эффект | HTML, CSS, JS

Создание красивого сайта 1:05:21

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

Создаём красивый parallax-эффект 0:46:49

Создаём красивый parallax-эффект | HTML, CSS, JS

Создание красивого сайта 0:35:13

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

CSS фичи #10 0:12:40

CSS фичи #10 ➤ Параллакс эффект на CSS | Parallax Effect CSS without JS

Создание сайта с 0:46:54

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

Как сделать параллакс 0:14:37

Как сделать параллакс эффект на CSS HTML jQuery. Туториал // Как это сделать? // Фрилансер по жизни...

Как сделать параллакс 0:03:24

Как сделать параллакс при прокрутке на HTML и CSS | Эффект параллакса с текстом и картинкой. Верстка...

Создание сайта с 1:16:34

Создание сайта с крутой анимацией скролла (HTML CSS GSAP)

Параллакс эффект при 0:22:57

Параллакс эффект при движении мыши и скролле сайта. Без библиотек и дополнений. HTML CSS JavaScript....

Создание красивого сайта 1:49:10

Создание красивого сайта с Parallax анимацией заголовка (HTML+CSS)...

Параллакс эффект для 0:05:26

Параллакс эффект для фона на сайта на чистом CSS за 5 минут. Parallax эффект при скролле....

🤩 НЕВЕРОЯТНЫЙ PARALLAX 0:11:51

🤩 НЕВЕРОЯТНЫЙ PARALLAX ЭФФЕКТ В ELEMENTOR | WEBGASM [1]

Верстаем эффект параллакса 0:14:12

Верстаем эффект параллакса | Уроки по веб-разработке | Уроки по вёрстке | HTML, CSS, JS...

КАК создать КРУТОЙ 0:04:21

КАК создать КРУТОЙ параллакс Эффект? Узнаешь в этом видео....

Эффект Параллакса | 0:00:37

Эффект Параллакса | 3D глубина для плоских изображений

JavaScript фичи #2 0:20:48

JavaScript фичи #2 Parallax на чистом JS | Параллакс эффект

CSS Урок - 0:03:26

CSS Урок - простой параллакс scroll эффект на HTML CSS без JS

Параллакс эффект при 0:15:07

Параллакс эффект при прокрутке страницы на HTML, CSS, JS

Как создать эффект 0:08:28

Как создать эффект параллакс на сайте wordpress elementor (parallax effect) | Параллакс эффект...

Parallax scroll effect 0:12:15

Parallax scroll effect - CSS JS Эффект скролл параллакса на css и javascript...

Параллакс эффект фона 0:11:07

Параллакс эффект фона js | JS практика 🚀

Простой параллакс при 0:06:17

Простой параллакс при прокрутке на HTML, CSS

Комментарии
Автор

Добрый день. Пересматриваю ваши видео раз за разом) столько полезного выношу из видео каждый раз.
Хотелось бы чаще видеть хороший контент)

hmutyikoot
Автор

Реально огонь.
Эх пока не получается.
Буду дальше пробовать.
Спасибо за урок.

aleksandrsrudkevics
Автор

спасибо) совет по верстке -- вместо стиля "background" лучше использовать тег "picture"

lvivduncan
Автор

А почему не используете Emmet? С ним намного быстрее и удобнее работать.
Пример: создать структуру html документа -> ! + tab
Создать несколько дивов с одним классом -> .myclass*5 -> 5 дивов с классом myclass

kyuqwe
Автор

большое спасибо за видео!
Если будет желание и возможность, мб сделаете несколько уроков по основам JS?

shittywizzard