html视差效果,哔哩哔哩滚动视差.html

* {

padding: 0;

margin: 0;

}

.nav-ad {

width: 100%;

height: 155px;

position: relative;

}

.nav-ad-img-cen,

.nav-ad-img-lef, .nav-ad-img-rig{

position: absolute;

top: 0;

left: 0;

width: 120%;

height: inherit;

}

let clientX = null

let NavAd = document.querySelector('.nav-ad');

let NavAdImgCen = document.querySelector('.nav-ad-img-cen');

let NavAdImgLef = document.querySelector('.nav-ad-img-lef');

let NavAdImgRig = document.querySelector('.nav-ad-img-rig');

let initTranslateX = -((NavAdImgCen.offsetWidth) / 100 * 20 / 2)

class Tool {

constructor() {}

changeTransition(second=0.8){

NavAdImgCen.style.transition = `${second}s`

NavAdImgLef.style.transition = `${second}s`

NavAdImgRig.style.transition = `${second}s`

}

changeTransform(distance){

NavAdImgCen.style.transform = `translateX(${distance}px)`

NavAdImgLef.style.transform = `translateX(${distance}px)`

NavAdImgRig.style.transform = `translateX(${distance}px)`

}

changeOpacity(n1=1,n2=0,n3=0){

NavAdImgCen.style.opacity = `${n1}`

NavAdImgLef.style.opacity = `${n2}`

NavAdImgRig.style.opacity = `${n3}`

}

}

let tool = new Tool()

tool.changeTransform(initTranslateX)

NavAd.addEventListener('mouseenter', function(e) {

tool.changeTransition(0)

clientX = e.clientX

})

NavAd.addEventListener('mousemove', function(e) {

let zuni = 15;

let moveXDistance = (e.clientX - clientX) / zuni

let mouseMoveX = e.clientX-clientX

if (mouseMoveX < 300 && mouseMoveX >0) {

tool.changeOpacity(1 - mouseMoveX/300,0,mouseMoveX/300)

} else if (mouseMoveX<0&& mouseMoveX>-300) {

tool.changeOpacity(1 - mouseMoveX/-300,mouseMoveX/-300,0)

}

tool.changeTransform(initTranslateX+moveXDistance)

})

NavAd.addEventListener('mouseleave', function(e) {

tool.changeTransition(0.8)

tool.changeTransform(initTranslateX)

tool.changeOpacity(1,0,0)

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史