Простой и эффектный parallax-эффект без JavaScript

[ionicman]

Побуду занудой - но вроде как эффект параллакса - это уменьшение скорости движения объектов в зависимости от их удаления от наблюдателя. И для меня параллакс вот, например.

А здесь просто перекрытие в зависимости от положения скролла (во всяком случае, именно так себя ведёт себя демка на мобильном FF) , нет?

[NikDoomchan]

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

[fugasio]

Побуду ещё большим занудой, но Паралла́кс (греч. παράλλαξις, от παραλλαγή, «смена, чередование») — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

[fugasio]

А ещё я не совсем понял технической ценности демо, ок, сейчас это две картинки, а когда это будут настоящие интерфейсы будет ли это работать так же эффективно? Получается, что ради эффекта нужно постоянно держать два идентичных интерфейса в доме и т. д.

[NikDoomchan]

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

Тем более изначально речь шла про сайт-лендинг, который демонстрирует возможные фичи проекта "Дизайн системы", сами стилизованные компоненты в проект лендинга не входят.

[LDZ]

// не рекомендуется использовать отрицательный margin в реальных проектах

Почему? Есть обоснования?

[Carduelis]

Будет горизонтальный скролл страницы на iOs, если не прикрыть overflow: hidden; , который может обрезать тени, вызвать дополнительные визуальные баги или отсутствие работы backdropFilter.

А еще проблемы с width: 100%; или необходимость calc()

[LDZ]

Ну так можно сказать почти про любое свойство. Всегда есть несколько НО, которые нужно учитывать. Но это не значит, что их "не рекомендуется использовать в реальных проектах"

[NikDoomchan]

Конкретно в данном случае отрицательный margin повлечет смещение всех элементов, идущих после элемента с отрицательным margin.
Ниже предложена альтернатива - position: relative и отрицательный top.