我发现这个动画是由鼠标运动激活的,只是想知道如何实现这一目标。
是否有人这样做或共享一些教程?
预先感谢您!
此效果称为" andallax"。
有一些库更容易创建它。
在快速搜索中,我找到了这个:parallax.js(在此处可用演示)
它很容易使用:
<ul id="scene">
<li class="layer" data-depth="0.00"><img src="layer1.png"></li>
<li class="layer" data-depth="0.20"><img src="layer2.png"></li>
<li class="layer" data-depth="0.40"><img src="layer3.png"></li>
<li class="layer" data-depth="0.60"><img src="layer4.png"></li>
<li class="layer" data-depth="0.80"><img src="layer5.png"></li>
<li class="layer" data-depth="1.00"><img src="layer6.png"></li>
</ul>
和javascript:
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);