[問題] 這網站的parallax原理?

看板Web_Design作者 (人類造不出天堂)時間12年前 (2013/11/22 23:32), 編輯推噓2(202)
留言4則, 2人參與, 最新討論串1/2 (看更多)
前輩們大家好 最近在研究jquery,會自行寫一點簡單的位移動畫 以下這個"視差滾動"網頁好像很流行 http://first-launch.com/ 想請問這個的原理是什麼? 1.某些物件會隨著滾動向上捲動,這很正常 2.某些物件向上捲動到某個位置就不會再向上,會停在那開始做動畫  然後動畫做完,又會繼續向上捲動,這是怎麼做到的? 3.動畫原理是用$(div).attr("src","1.jpg")一直換圖到"100,jpg"的方式在做動畫嗎? 站上沒看到有人在討論這個,對大家來說可能不難吧,但我好想知道啊....= = 請求高手前輩指點迷津~ -- -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 49.219.27.192

11/23 02:10, , 1F
github.com/Prinzhorn/skrollr
11/23 02:10, 1F

11/23 02:11, , 2F
原理就是監聽 scroll event 然後對DOM控制 CSS style
11/23 02:11, 2F

11/23 02:11, , 3F
動畫通常會應用到 CSS Sprite 減少 request/respawn
11/23 02:11, 3F

11/23 02:18, , 4F
把scollbar想成時間軸就可以理解了 不過這網頁一定很搞剛
11/23 02:18, 4F
文章代碼(AID): #1IZtaMfS (Web_Design)
文章代碼(AID): #1IZtaMfS (Web_Design)