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

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

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

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

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

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

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

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