Комментарии 9
Побуду занудой - но вроде как эффект параллакса - это уменьшение скорости движения объектов в зависимости от их удаления от наблюдателя. И для меня параллакс вот, например.
А здесь просто перекрытие в зависимости от положения скролла (во всяком случае, именно так себя ведёт себя демка на мобильном FF) , нет?
Фактически параллаксом можно назвать не отдельный эффект, а целую группу эффектов. То есть любую анимацию, завязанную на скролл, можно назвать параллакс-эффектом
А ещё я не совсем понял технической ценности демо, ок, сейчас это две картинки, а когда это будут настоящие интерфейсы будет ли это работать так же эффективно? Получается, что ради эффекта нужно постоянно держать два идентичных интерфейса в доме и т. д.
// не рекомендуется использовать отрицательный margin в реальных проектах
Почему? Есть обоснования?
Будет горизонтальный скролл страницы на iOs, если не прикрыть overflow: hidden;
, который может обрезать тени, вызвать дополнительные визуальные баги или отсутствие работы backdropFilter
.
А еще проблемы с width: 100%;
или необходимость calc()
Конкретно в данном случае отрицательный margin повлечет смещение всех элементов, идущих после элемента с отрицательным margin.
Ниже предложена альтернатива - position: relative и отрицательный top.
Простой и эффектный parallax-эффект без JavaScript