作者qazwsx9006 (松鼠!碰器!)
看板Web_Design
标题[问题] css sprite做简单动画问题
时间Mon Jan 20 21:43:29 2014
大家好，想要请教一下一个效果。
举[七点半的太空人]为例。
里面的小女孩会随着画面卷动时，做出不同动作，像是动画一样。
仔细研究了一下，发现它是把很多小图片合成一大张图片。
在利用移动图片来智做出像动画的效果。
利用检查[元素]发现图片position的数值会一次跳一段固定数字。
例如
position: 0 250px; >> position:0 500px;
但是我用同样套件skrollr，却无法让数字从250px直接变成500px。
而是一定会经过很多数值累加上去。
ex:250px >> 251px >>252px >>..>> 499px >>500px
想要请问这样的效果要如何设定。
请大家给我个方向了。
http://first-launch.com/ 七点半的太空人
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.136.200.196
1F：→ alog:台湾普遍比较少应干特效这块，你应该先查他用什麽套件 01/20 22:59
3F：→ alog:fix: 硬干 01/20 23:00
我有查到skrollr套件。
skrollr好像是用data-0=""去控制卷动动画。我查到七点半太空人里面小女生的div档
里面用了一堆data-的参数设定。它的data-并没有设定到background-position的参数。
但是根据检查元素发现，它的动画是根据background-position的移动产生类似逐格动
画效果。
所以是因为skrollr套件里面有fix这个功能去做出这样的特效?!
不好意思，问题有点麻烦。
感谢你的回覆~!
※ 编辑: qazwsx9006 来自: 1.171.57.117 (01/21 09:07)
4F：→ lyforever:data-0, data-7500,data-11000每个都设了bg-position 01/21 15:07
5F：→ lyforever:你有查到skollr可是你根本没研究怎麽用吧 01/21 15:07
6F：→ lyforever:小女孩的话 你可以看.little-scissors这个div 01/21 15:11
7F：→ lyforever:先用clip来决定范围 再用data-*(影格)调整margin位置 01/21 15:12
8F：→ lyforever:让div看起来像动画一样 01/21 15:12
我有挖出那张图片.小女孩的div我也有找到..也有研究skrollr。
不过我承认我还不够熟练skrollr，有些部份我还在努力理解中。
http://ppt.cc/aRcN
这是小女孩的div。我仔细看了一下，没有看到有设background-position。
可是在.little-scissors最後面却有出现background-position的参数。
而且它的Y轴一次是跳250px，而不是慢慢累加上去。
[调整margin应该是移动div在画面的位置而不是使小女孩产生像逐格动画的效果吧??!]
还是我哪里有误会什麽了...
感谢愿意花时间跟我讨论!!
ps:
http://ppt.cc/sDLr 这是我找到小女孩div的css。
※ 编辑: qazwsx9006 来自: 220.136.197.135 (01/21 22:42)
※ 编辑: qazwsx9006 来自: 220.136.197.135 (01/21 22:45)
10F：→ danny8376:他还有几个skrollr.data.XXXX.js 这些JS是放动画资料的 01/22 00:33
11F：→ danny8376:不过里面都是压缩过的 你也看不出什麽 01/22 00:34
12F：→ danny8376:总之改background-position这件事是skrollr照设定去改的 01/22 00:35
13F：→ danny8376:你先去了解skrollr 了解之後大概就知道这是怎一回事了 01/22 00:36
嗯嗯!看来是我太急，应该要先去好好了解skrollr~!
谢谢几位前辈的回应~!
※ 编辑: qazwsx9006 来自: 114.24.37.231 (01/22 19:03)
14F：→ lyforever:我後面已经有说不是background-position 还解释了 01/22 20:54
15F：→ danny8376:原PO大概是卡在... 没有CODE改到那东西啊!!!!!! 这样吧 01/22 21:23
对阿，不过应该是藏在丹尼大所说的skrollr.data.XXXX.js里面..
所以我决定先把那个套件在多研究研究。
话说我真的认为是background-position在控制小女孩的动作耶...
小女孩换动作的时候，background-position参数会改变。
而且她改变的数值刚好都是单个小女孩图片的宽高。
对不起，我有点固执XDD
※ 编辑: qazwsx9006 来自: 114.24.37.231 (01/22 22:07)
16F：→ danny8376:lyforever说的也对啦www 其实整个动画拆两部分啦 01/22 22:32
17F：→ danny8376:一部分是skrollr的部分 这部分的话 01/22 22:33
18F：→ danny8376:用margin去处理小女孩的位置 01/22 22:33
19F：→ danny8376:bg-position去处理一些背景特效的图片 01/22 22:34
20F：→ danny8376:剩下小女孩本身的动画的话 这部分是靠animator去做的 01/22 22:37
21F：→ danny8376:对了 他的那个animator应该是自己写的 01/22 23:54
22F：推 poototo:原PO自己会写js吗？这其实用jQuery自己侦测页面位置 01/24 13:13
23F：→ poototo:当场更换图片显示区域。自己写比较单纯 01/24 13:14
其实js没有很熟，目前还只会几个简单常用的功能。
然後自己就一直想要赶快学会很多功能。
但是现在觉得还是要一步一步比较实际XD
谢谢各位的回覆，受益良多~!!
※ 编辑: qazwsx9006 来自: 114.24.125.45 (01/27 20:20)