我怎样才能实现这个鼠标移动触发的动画？

Question

我发现 this animation 通过鼠标移动激活，只是想知道如何实现这一点。

有没有人做过这个或者分享一些教程网站？

提前致谢！

Answer 1

这个效果叫做"parallax"。

有一些库可以更轻松地创建它。

在快速搜索中我找到了这个：Parallax.js (demo avaliable here)

使用以下方法很容易实现：

<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);

我怎样才能实现这个鼠标移动触发的动画？

How can i achieve this mouse movement triggered animation?

html

javascript

css

animation

interactive