В настоящее время у меня есть полноэкранное слайд-шоу с изображением героя на главной странице сайта.У меня есть эффект javascript, который получает позицию прокрутки и делит ее на 1,5, а затем устанавливает положение изображения transformY, вызывающее эффект параллекса.
Вот код, который у меня есть на данный момент:
$(window).on("load scroll resize", function () {
$("form:not(.blive_PageEdit) .hero-img .blive_Control img").css({ "margin-top": $(window).scrollTop() / 1.5 });
});
Этоработает так, как я хочу, но я заметил, что производительность является серьезной проблемой, особенно в браузерах, которые поддерживают асинхронную прокрутку, которая вызывает эффект дрожания.
Что я хочу знать, так это если есть лучший способ реализовать это?Было бы идеально иметь что-то вроде следующего, но я не думаю, что это возможно только с помощью CSS:
img {
transformY(calc(scrollTop / 1.5));
}
Я также смотрел на IntersectionObserver, но я не уверен, что это достигнет того, что яхочу сделать.
Любые мысли будут полезны.Спасибо