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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› D3.js

推荐书目

› JavaScript 权威指南第 5 版

这是一个创建于 3609 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

5 条回复 • 2015-01-14 19:11:39 +08:00

yyjjolin

2015-01-14 11:07:43 +08:00

如果不嫌麻烦也可手撕原生JS。
这个效果说说我自己的思路吧，把需要换帧的图片按顺序命名（pic1，pic2。。），绑定scroll事件，监听当前滚动条scrollTop，N = scrollTop/换页距离,直接换上picN这张图。
这是大致的思路，具体实现可能会碰到未知问题，楼主可一起讨论。

emric

2015-01-14 11:32:16 +08:00

用一个对象储存帧和位置的关联, 获取进度条位置减去除余帧的倍数, 取值再更改图片.

levy

2015-01-14 15:51:28 +08:00

@yyjjolin 看了几个范例，思路和你描述类似。只是存在细节上的差异性

Vt463o3364vZ98Y7

2015-01-14 18:30:43 +08:00

滚动视差设计~~

levy

2015-01-14 19:11:39 +08:00

@v1 正解！就是它，大神你熟悉吗？