一个拖延癌患者的视差效果库

[leopoldthecuber]

这是一个首次提交日期为 45 个月前，但是直到几天前的愚人节才正式发布的项目

Perspective.js 是一个视差效果库，使用它可以为页面添加视差滚动、视差位移和视差转动效果。如果你不知道什么是视差效果，下面有几个例子：

• 视差滚动：pressels.com、Beatbox Academy
• 视差转动：锤子科技官网 的头图
• 视差位移：和视差转动类似，只不过当鼠标在页面上移动时，页面上的元素会平移而不是转动

先上链接

• 仓库：Leopoldthecoder/Perspective
• Demo ：Examples
• 文档：Perspective.js

再贴代码

Perspective.js 的具体使用方法可以参考文档，这里只对上面 Demo 中的第一个效果做个简单介绍。

动图效果，点我查看

不难发现，这个效果包含了三个 DOM 元素，当鼠标滚轮滚动时，它们以不同的速度运动，看上去就好像它们位于三个不同的景深，于是便有了一种立体的效果。

需要的 HTML 结构为：

<div id="wrap">
  <div data-scroll-stage-id="basic">
    <div data-scroll-item-id="backstage"></div>
    <div data-scroll-item-id="middlestage"></div>
    <div data-scroll-item-id="frontstage"></div>
  </div>
</div>

这时在你的 JS 文件中引入 Perspective.js ，并按照下面的代码进行配置，就可以得到 Demo 中的效果了：

import { Scroll } from 'perspective.js'

new Scroll('#wrap', {
  stages: [{
    id: 'basic',
    scrollNumber: 120,
    transition: 0,
    easing: 'linear',
    items: [{
      id: 'backstage',
      effects: [{
        property: 'transform',
        start: 'translateY(0px)',
        end: 'translateY(-100px)'
      }]
    }, {
      id: 'middlestage',
      effects: [{
        property: 'transform',
        start: 'translateY(0px)',
        end: 'translateY(-180px)'
      }]
    }, {
      id: 'frontstage',
      effects: [{
        property: 'transform',
        start: 'translateY(0px)',
        end: 'translateY(-700px)'
      }]
    }]
  }
})

仔细观察就会发现，上面的代码其实就是告诉了 Perspective.js 希望让哪些 DOM 元素参与视差滚动，并且定义了各个元素起始状态和最终状态的 CSS 属性值。

当然，在视差滚动方面， Perspective.js 能做到的并不只这些。比如，上面的 Demo 链接还使用它实现了 SVG 动画（ Windows 下的某些浏览器可能无法正常播放）。事实上，任何 CSS 属性——只要它的值是数字——都可以被 Perspective.js 识别，从而使得对应的 DOM 元素随着鼠标滚轮的滚动进行动画。

视差位移方面，由于位移动画是通过改变元素的 transform 属性完成的，对于原本就有 transform 属性的元素而言，直接改变这个属性会覆盖掉原先的属性，所以 Perspective.js 这里做了一点优化：它首先获取元素的 transform matrix，然后在原有矩阵的基础上根据需要位移的距离计算出新的矩阵，最后将其应用到元素上。这样原先的 transform 属性就能够在位移动画过程中完好地保存下来。

Perspective.js 的视差转动是直接在 vanilla-tilt.js 的基础上编辑而来的，在此对它的作者表示感谢。

最后讲故事

Perspective.js 是我两年前自学前端时完成的一个项目。不过那时不懂 npm ，不懂打包，也不会 ES6 ，所以写完之后就一直放在那里吃灰了（两年前的代码可以在 GitHub 仓库的 legacy 分支 找到）。今年春节又拾起来，对它进行了一次重构，并且添加了一些功能。代码实际上在二月初就已经写完了，之后的两个月一直在断断续续地写……文……档……一直拖到 4 月 1 号才算全部完成。

说实话，「视差滚动」这种交互方式在三四年前还比较流行，现在已经很少有网站使用了。所以发布这个项目，可能更多的是给自己留个念想吧。

[TriiHsia]

mark

[qingv]

挽