用js制作一个视觉差背景

视觉差背景"/>

用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.scrollTopoBg.style.top = scollTop*0.6 +'px'}