Это мой первый пост в этом сообществе. Я собираюсь сойти с ума из-за попытки решить проблему, связанную с сочетанием кода ScrollReveal.js и параллакса, который я встроил на той же странице.
Моя проблема: в разделе заголовка моей страницы у меня сложный параллакс с видом на город в несколько слоев, который создает впечатление глубины при прокрутке страницы. Затем появляется контент div, охватывающий параллакс. Я в основном адаптировал CSS из CodePen Сэма Бекхэма:
https://codepen.io/samdbeckham/pen/OPXPNp
Div-слой, который он называет .parallax__cover, - это место, где я разместил свой контент. Без этого покрытия параллакс не сработает.
Структура разметки выглядит следующим образом:
<div class="parallax">
<div class="parallax__layer parallax__layer__0"></div>
<div class="parallax__layer parallax__layer__1"></div>
<div class="parallax__layer parallax__layer__2"></div>
<div class="parallax__layer parallax__layer__3"></div>
<div class="parallax__cover>
//page content goes here
</div>
</div>
Пока все хорошо. Все работает нормально. Теперь я хотел добавить код ScrollReveal.js, чтобы некоторые из моих элементов в div содержимого отображались при прокрутке.
Моя проблема: элементы, которые я хотел показать, оставались скрытыми. После небольшого поиска я выяснил, в чем проблема: если для родительского div установлено значение «overflow-x: hidden», браузер по какой-то причине всегда выводит 0 в качестве значения scrollTop. Поэтому код ScrollReveal не имеет шансов работать должным образом. Тем не менее, мне нужно свойство overflow: hidden, чтобы мой параллакс не искажался.
Что я пробовал до сих пор:
Я вынул содержание своей страницы из раздела параллакса. Затем я установил для параллакса div положение: относительное с абсолютными позиционированными слоями внутри него. И тогда div для содержимого страницы был установлен в положение: относительно. Результат: ScrollReveal сработал. Но мой параллакс не сработал, потому что в нем отсутствовал параллакс __cover.
<div class="parallax">
<div class="parallax__layer parallax__layer__0"></div>
<div class="parallax__layer parallax__layer__1"></div>
<div class="parallax__layer parallax__layer__2"></div>
<div class="parallax__layer parallax__layer__3"></div>
</div>
<div class="page-content>
//page content goes here
</div>
Я обернул только div параллакса (не содержимое страницы) внутри оболочки, которой был дан переполнение: скрытый (вместо div параллакса). Проблема осталась.
Я добавил пустой абсолютный позиционный параллакс__cover внутри div параллакса с высотой 1000px (также пробовал 100vh). Page-content-div остался за пределами div параллакса с позицией: относительный. Параллакс работал. И так было с ScrollReveal. Тогда моя проблема: независимо от того, как я разместил свой контент, я так и не смог разместить его прямо над разделом parallax__cover. Содержание моей страницы привязано к верхней части страницы, охватывающей параллакс. Или у меня был этот раздел высотой 1000px (или 100vh) между моим параллаксом и содержимым страницы.
Я действительно застрял здесь, и у меня нет больше идей, что нужно сделать, чтобы браузер выводил значение scrollTop и снова включил ScrollReveal…
Если у кого-то есть идея, как взломать этот орех, я был бы более чем благодарен. Большое спасибо!
Moritz