V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
johnsonChe
V2EX  ›  前端开发

V 友们,请教一个关于页面效果的实现

  •  
  •   johnsonChe · 2017-04-26 18:12:53 +08:00 · 1745 次点击
    这是一个创建于 2767 天前的主题,其中的信息可能已经有所发展或是发生改变。

    页面效果:

    惊蛰

    关于这个效果的模仿:

    我起初是在知乎获知了一个叫 skrollr.js 的库,并且学习并应用到自己的页面,由于我的页面不像上面的是静态节点,文章和图片都是请求得到,并且是分步请求依赖于 img 的 onload 事件来渲染一套(文章+背景图)的模板,并 append 到页面中。刚开始的实现是把背景图全部用 fixed 定位层叠到屏幕,利用 skrollr 的根据参照物做出 css 属性状态变化来达到效果。但实际上哪怕不写效果,只要一个 skrollr.js 的初始化函数,在安卓机上就卡得不行。 skrollr.js 作者也有指出,如下图:

    Note

    后来又仔细观察了下楼上惊蛰页面的效果,发现:

    1. 容器内的每个父块都是 absolute 定位,并且都是 left:0 top: 0 right: 0 bottom: 0
    2. 容器采用了类似kinetic库利用 touch 事件使用 translate 模拟滚动。。。 效果 demo: demo

    疑问:

    1. 他是如何达到视差效果,虽然看到有 z-index 属性
    2. 他的 translate 基本上是移除一屏的高度,然后后面的页面就上来了。。。 这种如何做到了,求具体解释
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3536 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 10:25 · PVG 18:25 · LAX 02:25 · JFK 05:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.