Как создать параллакс эффект, чтобы фоновое изображение прокручивалось медленно, в то время как блоки страницы (прозрачные) перемещались быстрее? Эффект увидел на ЭТОЙ странице. Не сочтите за рекламу, точнее не знаю как объяснить, чего хочу добиться. Сайт на бутстрапе ковыряю.
0
-
2А что вы попробовали сделать самостоятельно? – Mr. Brightside 8 янв в 1:49
-
Возможный дубликат вопроса: Предложите вариант скролл-эффекта – L.F.C. 8 янв в 7:14
-
Связанный: ru.stackoverflow.com/q/805627/262779 и ru.stackoverflow.com/q/729456/262779 – L.F.C. 8 янв в 7:15
1 ответ
0
window.onscroll = function() {
document.querySelectorAll(".parallax").forEach(function(el,i) {
var windowYOffset = window.pageYOffset;
var elBackgroundPos = "50% " + (windowYOffset * 0.02) + "px";
el.style.backgroundPosition = elBackgroundPos;
});
};
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('https://icdn4.digitaltrends.com/image/2019-dodge-challenger-rt-scat-pack-widebody-review-12-640x640.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<p>In this example we have turned off parallax scrolling for mobile devices. It works as expected on all desktop screens sizes.</p>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
<div class="parallax"></div>
Картинка взята рандомно.
Здесь jsfiddle на всякий случай для примера.