【动效实现】超酷炫的 3D 视差 Hover 效果

今天在看周刊的时候发现一个有趣的动画库 Atroposjs，它可以实现非常酷炫的 3D parallax hover effects（以前锤子官网首页 Banner 的同款效果）。先看实现效果：

这样的小动画往往会让人眼前一亮，忍不住多体验几次，产品曝光度就上来了。

Atroposjs 代码很简洁，仅有 2KB， 零依赖还支持很多定制化配置。如果仅需要实现最基础的 3D 视差悬停效果，仅需几十行代码。

这篇文章，我们将来开发一个最基础的实现，完整代码可以看下面的【码上掘金】 或者我的 Codepen

整体上这个动效分为两个部分，第一部分是鼠标 Hover 到卡片上时，卡片需要感知鼠标的位置，并做出相应的倾斜；第二部分是视差(Parallax) 效果，卡片内的元素根据”远近“的不同，移动速率不一样，以产生层次感。