作者virgin7 (人類造不出天堂)
看板Web_Design
標題[問題] 這網站的parallax原理?
時間Fri Nov 22 23:32:34 2013
前輩們大家好
最近在研究jquery,會自行寫一點簡單的位移動畫
以下這個"視差滾動"網頁好像很流行
http://first-launch.com/
想請問這個的原理是什麼?
1.某些物件會隨著滾動向上捲動,這很正常
2.某些物件向上捲動到某個位置就不會再向上,會停在那開始做動畫
然後動畫做完,又會繼續向上捲動,這是怎麼做到的?
3.動畫原理是用$(div).attr("src","1.jpg")一直換圖到"100,jpg"的方式在做動畫嗎?
站上沒看到有人在討論這個,對大家來說可能不難吧,但我好想知道啊....= =
請求高手前輩指點迷津~
--
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 49.219.27.192
推 Fantasywind:github.com/Prinzhorn/skrollr 11/23 02:10
→ Fantasywind:原理就是監聽 scroll event 然後對DOM控制 CSS style 11/23 02:11
→ Fantasywind:動畫通常會應用到 CSS Sprite 減少 request/respawn 11/23 02:11
推 jenesis:把scollbar想成時間軸就可以理解了 不過這網頁一定很搞剛 11/23 02:18