為什麼這篇太空人動畫鄉民發文收入到精華區：因為在太空人動畫這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者girl2006243 (girl2006243)看板Web_Design標題[問題] 七點半的...
太空人動畫 在 報導者 The Reporter Instagram 的最佳貼文
2021-09-16 09:49:48
#東奧即時報【莎唷娜拉！2020東奧，2024巴黎奧倒數1,083天；台灣代表團史上最大豐收，2金、4銀、6銅，總計12面獎牌排名第34】 2020東京奧運首度延後一年舉辦，經歷16天的賽事，今晚在新國立競技場舉辦閉幕，由日本由秋篠宮文仁親王代表出席，國際奧會主席巴赫（Thomas Bach）宣布「...
第一次發文 排版不好真對不起
想要請問的是七點半的太空人 http://first-launch.com 這個網站
裡面小剪刀的動畫效果
用chrome F12後看到他在背景和文字的部分用了skrollr.js
這個部分有自己試過應該是沒有問題了
但是小剪刀類似逐隔動畫的效果怎麼樣也搞不懂
爬文有看到年初也有人問過相似的問題
自己研究後也認為它應該是把每格動畫都存在一張圖
利用background-position的改變來做成動畫效果
不過就像板上那篇文一樣 看不出來他是怎麼寫的
上網翻了很多網站後找到了這個 http://jsfiddle.net/cc5712/es5zW
但是它無法像七點半的太空人一樣往上滾的時候動畫會倒退
不管往上還是往下滾 動畫都是往前走不會後退(不知道這樣講是不是很難懂)
大概是scroll事件無法設定往上或往下吧?
後來又找到mousewheel.js來嘗試
可是做出來的成果變成只能用滑鼠滾輪控制
如果按網頁上的滾軸就毫無反應
想請問各位高手有沒有什麼方法可以做出用滾軸控制的動畫呢?
或是應該要去專研哪個部分
因為對網頁設計真的是菜鳥 只會初步的html css
最近有自己看一點javascript 和 JQuery這樣
希望各位願意幫忙 真的很謝謝!!
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.243.16.94
推 wlwillwell:不是很確定正確的執行方式，不過可以提供幾個關鍵字~ 02/27 11:05
→ wlwillwell:視差滾動(Parallax Scrolling)、animation.css 02/27 11:07
→ wlwillwell:另外裏頭有些類似逐格動畫的效果，其實是一張超大背景 02/27 11:13
→ wlwillwell:搭配視差滾動，設定background-position做出來的 02/27 11:13
→ girl2006243:我有試過用移動background-position的方式 但還是無法 02/27 19:42
→ girl2006243:用滾軸控制 更別說還要設定滾軸到哪的時候開始動了.. 02/27 19:43