用js制作一个视觉差背景

我在网上冲浪的时候看到了一个文字和背景下滑速度不一致的情况,这看起来背景会有一种3d的感觉,于是研究了一下

首先先写出大概的html和css

 <div class="box">
    <div class="bg"></div>
    <h2>我是一个文字</h2>
    <p>我是一个超级大的文字</p>
  </div>

*{
      margin: 0;
      padding: 0;
    }
    .box{
      position: relative;
      width: 100%;
      height: 1000px;
      overflow: hidden;
    }
    .bg{
      position: absolute;
      width: 100%;
      height: 1000px;
      background: url(./banner6.jpg) no-repeat;
      background-size: cover;
    }
    .box h2{
      position: absolute;
      left: 800px;
      top: 800px;
      color: #fff ;
    }
     .box p{
      position: absolute;
      left: 300px;
      top: 600px;
      color: #fff ;
    }

再利用js控制背景下拉时background的top的值,就能实现一种视觉差

let oBg = document.querySelector('.bg')
    let oH2 = document.querySelector('h2')

    document.onscroll = function(){
      
       let scollTop = document.documentElement.scrollTop
      oBg.style.top = scollTop*0.6 +'px'
    }