我有一个找不到解决方案的问题: 实际上,我使用了matthew的parallax.js库,该库允许我对mousemove产生视差效果,但是当我将js经典过渡到CSS类时,视差变得非常缓慢和bug,如何修复它plz?
<body>
<div id="fullpage">
<div class="section">Some section</div>
<div class="section section-2">
<div id="device">
<div data-depth="0.2" class="ordi"><img src="./img/ordi.png" alt="ordi"></div>
<div data-depth="0.2" class="clavier"><img src="./img/clavier.png" alt="test"></div>
<div data-depth="0.2" class="smartphone"><img src="./img/smartphone.png" alt="test"></div>
</div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
</body>
document.getElementsByClassName('ordi')[0].classList.add('transition-device');
document.getElementsByClassName('clavier')[0].classList.add('transition-device');
document.getElementsByClassName('smartphone')[0].classList.add('transition-device');
var scene = document.getElementById('device');
var parallaxInstance = new Parallax(scene);
console.log(parallaxInstance)
#device img {
width: 30vw;
}
#device .transition-device{
top: 0%;
left: 10%;
opacity: 1;
}
.ordi{
opacity: 0;
top: -30%;
left: 10%;
position: absolute;
transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
}
.clavier{
opacity: 0;
top: 20%;
left: -10%;
position: absolute;
transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
}
.smartphone{
opacity: 0;
top: 20%;
left: 20%;
position: absolute;
transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
}