首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
V2EX  ›  JavaScript

求助,一个网页交互动画效果。

  •  
  •   levy · 2015-01-14 10:28:42 +08:00 · 1613 次点击
    这是一个创建于 1467 天前的主题,其中的信息可能已经有所发展或是发生改变。

    范例: http://raki-design.4event.tw/2013newyear/

    主要需要:通过下拉滚动条,页面进行逐帧动画,每帧为每一张图片,期间需要加入逻辑判断。

    实际效果为:
    (拿手机端来说,手指一滑动,车开始启动,如果手指持续滑动,车速就一直那么快,同时滑动过程中出其他的场景)

    是不是需要结合jquery来实现?

    5 回复  |  直到 2015-01-14 19:11:39 +08:00
        1
    yyjjolin   2015-01-14 11:07:43 +08:00
    如果不嫌麻烦也可手撕原生JS。
    这个效果说说我自己的思路吧,把需要换帧的图片按顺序命名(pic1,pic2。。),绑定scroll事件,监听当前滚动条scrollTop,N = scrollTop/换页距离,直接换上picN这张图。
    这是大致的思路,具体实现可能会碰到未知问题,楼主可一起讨论。
        2
    emric   2015-01-14 11:32:16 +08:00
    用一个对象储存帧和位置的关联, 获取进度条位置减去除余帧的倍数, 取值再更改图片.
        3
    levy   2015-01-14 15:51:28 +08:00
    @yyjjolin 看了几个范例,思路和你描述类似。只是存在细节上的差异性
        4
    v1   2015-01-14 18:30:43 +08:00
    滚动视差设计~~
        5
    levy   2015-01-14 19:11:39 +08:00
    @v1 正解!就是它,大神你熟悉吗?
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2239 人在线   最高记录 4236   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 19ms · UTC 11:52 · PVG 19:52 · LAX 03:52 · JFK 06:52
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1