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

В видео будем вместе по шагам верстать макет истории апельсинки: html, css, js
🏰 Английский YouTube: @webelart_en

00:00 введение
00:46 создание html-разметки
03:51 добавление css-стилей
10:06 работа над javascript
13:10 заключение

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

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[weev]

Спасибо! Кратко, очень наглядно. Жду новой верстки!

[skrumy]

Советую в DevTools поставить темную тему - для глаз будет намного приятнее и на видео будет все видно гораздо лучше, щас приходится всматриваться. В DevTools нажимаете на шестеренку, дальше preferences > appearence > theme > dark. И в хроме я бы тоже поменял тему на темную, у меня стоит material dark - глазам намного приятнее, она в официальном интернет магазине хрома где все расширения в разделе темы в разделе минимализм. Раньше тоже на светлой сидел как поставалено по умолчанию, после того как сменил на темную в браузере сидеть стало гораздо приятнее.

[АлексейТ-зь]

наверное можно динамически вычислять depth для капелек в зависимости от длины скролла и не давать подниматься выше

[dmitriyart]

что бы не париться с весом картинок можно использовать webp

все браузера будут подгружать на страницу webp, а те браузер которые не поддерживают webp это сафари и старые браузера будут загружать альтернативу в данном случае это jpg
webp это довольно классный формат он работает как с простыми jpg так и может png и даже вроде гифки, сжимать можно чуть ли не до ста процентов от веса изображения, я же где то делаю на процентов 70 что бы и сжатие было и вид оставался презентабельный. ссылку на ресурс скину с инсту

[quite]

Спасибо!🙏🏻, всё понятно🙌🏻
Подскажите, пожалуйста, как отличать padding и margin когда есть макет в Figma?

[mind]

data-depth а что это за атрибут, для чего он и где можно почитать про него

[arsenmanasuev]

все ок не хватает только на фоне чего то для более четкого видения эффекта .Я не сразу увидел движения раз 5 пересматривал )

[hikki_slava]

Очень сложно я бы сказал. Даже перекопировав не всё работает. Параллакс не хочет. (Правка: захотел. В index.js специально в 1 строке parallax-img сначала вписался и потом чудным образом исправился либо нет я хз, но хорошо что заметил.)
Лично для меня это сложно. Буду разбирать код по строчно и писать к каждой строке комментарий.
Вёрстка сложна для меня тем, чтобы сделать всё красиво и адаптивно, а js код я вообще не понимаю.

[shittywizzard]

z-index всем каплям и соку сделать больше