MouseParallax和经典js过渡不起作用

时间:2019-12-05 17:01:08

标签: javascript css mouseevent parallax

我有一个找不到解决方案的问题: 实际上,我使用了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);
}

0 个答案:

没有答案