V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
leopoldthecuber
V2EX  ›  分享创造

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

  •  2
     
  •   leopoldthecuber · 2017-04-07 15:47:30 +08:00 · 2629 次点击
    这是一个创建于 2547 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    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 号才算全部完成。

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

    2 条回复    2017-04-15 09:28:38 +08:00
    TriiHsia
        1
    TriiHsia  
       2017-04-08 23:40:16 +08:00
    mark
    qingv
        2
    qingv  
       2017-04-15 09:28:38 +08:00 via iPad
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3799 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 05:07 · PVG 13:07 · LAX 22:07 · JFK 01:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.