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

【问题标题】：How can i achieve this mouse movement triggered animation?我怎样才能实现这个鼠标移动触发动画？
【发布时间】：2015-05-08 17:09:53
【问题描述】：

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

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

提前谢谢你！

【问题讨论】：

绑定鼠标移动，然后计算屏幕中心。计算屏幕中心和鼠标位置之间的偏移量。（我会使用一个缓动函数，所以它会在某个时候最大化）。然后只需将图像设置为缓动函数产生的任何值。

标签： javascript html css animation interactive

【解决方案1】：

这种效果称为“视差”。

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

在快速搜索中我找到了这个：Parallax.js（演示可用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);

【讨论】：

感谢分享代码和演示。这真的很有帮助。