Параллакс страницы

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>