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

2015-01-14 10:28:42 +08:00
 levy

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

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

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

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

2479 次点击
所在节点    JavaScript
5 条回复
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 看了几个范例,思路和你描述类似。只是存在细节上的差异性
v1
2015-01-14 18:30:43 +08:00
滚动视差设计~~
levy
2015-01-14 19:11:39 +08:00
@v1 正解!就是它,大神你熟悉吗?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/161986

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX