Мне было поручено создать целевую страницу для веб-сайта. Я собираюсь использовать React, теперь одна из главных вещей - эффект параллакса. Когда страница загружается в первый раз, вверху есть панель навигации (прозрачный фон), но, что более важно, заголовок, субтитры и изображение, которые выглядят как фон. Как только пользователь начинает прокручивать вниз, появляется эффект параллакса, когда в основном он уменьшает масштаб изображения и преобразует его вправо, в то время как появляется изображение рядом с ним слева. Для наглядного примера это что-то похожее на https://pitch.com/ целевая страница, за исключением того, что второе изображение выглядит более разделенным, а не как часть изображения.
Мне интересно, как это можно реализовать, я начал с попытки поставить первое изображение на заднем плане, но у него было несколько проблем, например, я не смог идеально уместить картинку на заднем плане, поскольку для background-img нет sr c, но я думаю, что лучшим способом было бы иметь два изображения как одно изображение, и каким-то образом при загрузке страницы оно увеличивается на первом pi c, чтобы при прокрутке пользователя изображение масштабировалось и переводилось вправо? Я посмотрел на код подачи с использованием элемента inspect, кажется, это то, что они делают, я думаю? Является ли это наилучшим подходом, и с точки зрения реализации я могу добавить прослушиватель событий для прокрутки пользователей внутри компонента изображения, а затем передать функцию из App.jsx, которая это обрабатывает?