作者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)