[問題] css sprite做簡單動畫問題
大家好，想要請教一下一個效果。
舉[七點半的太空人]為例。
裡面的小女孩會隨著畫面捲動時，做出不同動作，像是動畫一樣。
仔細研究了一下，發現它是把很多小圖片合成一大張圖片。
在利用移動圖片來智做出像動畫的效果。
利用檢查[元素]發現圖片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
→
01/20 22:59, , 1F
01/20 22:59, 1F
→
01/20 22:59, , 2F
01/20 22:59, 2F
→
01/20 23:00, , 3F
01/20 23:00, 3F
我有查到skrollr套件。
skrollr好像是用data-0=""去控制捲動動畫。我查到七點半太空人裡面小女生的div檔
裡面用了一堆data-的參數設定。它的data-並沒有設定到background-position的參數。
但是根據檢查元素發現，它的動畫是根據background-position的移動產生類似逐格動
畫效果。
所以是因為skrollr套件裡面有fix這個功能去做出這樣的特效?!
不好意思，問題有點麻煩。
感謝你的回覆~!
※ 編輯: qazwsx9006 來自: 1.171.57.117 (01/21 09:07)
→
01/21 15:07, , 4F
01/21 15:07, 4F
→
01/21 15:07, , 5F
01/21 15:07, 5F
→
01/21 15:11, , 6F
01/21 15:11, 6F
→
01/21 15:12, , 7F
01/21 15:12, 7F
→
01/21 15:12, , 8F
01/21 15:12, 8F
→
01/21 15:13, , 9F
01/21 15:13, 9F
我有挖出那張圖片.小女孩的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)
→
01/22 00:33, , 10F
01/22 00:33, 10F
→
01/22 00:34, , 11F
01/22 00:34, 11F
→
01/22 00:35, , 12F
01/22 00:35, 12F
→
01/22 00:36, , 13F
01/22 00:36, 13F
嗯嗯!看來是我太急，應該要先去好好了解skrollr~!
謝謝幾位前輩的回應~!
※ 編輯: qazwsx9006 來自: 114.24.37.231 (01/22 19:03)
→
01/22 20:54, , 14F
01/22 20:54, 14F
→
01/22 21:23, , 15F
01/22 21:23, 15F
對阿，不過應該是藏在丹尼大所說的skrollr.data.XXXX.js裡面..
所以我決定先把那個套件在多研究研究。
話說我真的認為是background-position在控制小女孩的動作耶...
小女孩換動作的時候，background-position參數會改變。
而且她改變的數值剛好都是單個小女孩圖片的寬高。
對不起，我有點固執XDD
※ 編輯: qazwsx9006 來自: 114.24.37.231 (01/22 22:07)
→
01/22 22:32, , 16F
01/22 22:32, 16F
→
01/22 22:33, , 17F
01/22 22:33, 17F
→
01/22 22:33, , 18F
01/22 22:33, 18F
→
01/22 22:34, , 19F
01/22 22:34, 19F
→
01/22 22:37, , 20F
01/22 22:37, 20F
→
01/22 23:54, , 21F
01/22 23:54, 21F
推
01/24 13:13, , 22F
01/24 13:13, 22F
→
01/24 13:14, , 23F
01/24 13:14, 23F
其實js沒有很熟，目前還只會幾個簡單常用的功能。
然後自己就一直想要趕快學會很多功能。
但是現在覺得還是要一步一步比較實際XD
謝謝各位的回覆，受益良多~!!
※ 編輯: qazwsx9006 來自: 114.24.125.45 (01/27 20:20)