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

看板Web_Design作者flamerecca (werewolf)時間12年前 (2013/11/23 10:28)推噓1(1推 0噓 1→)

留言2則, 2人參與討論串2/2 (看更多)

※ 引述《virgin7 (人類造不出天堂)》之銘言： : 前輩們大家好 : 最近在研究jquery，會自行寫一點簡單的位移動畫 : 以下這個＂視差滾動＂網頁好像很流行 : http://first-launch.com/ : 想請問這個的原理是什麼？ : 1.某些物件會隨著滾動向上捲動，這很正常 : 2.某些物件向上捲動到某個位置就不會再向上，會停在那開始做動畫 : 　然後動畫做完，又會繼續向上捲動，這是怎麼做到的？ : 3.動畫原理是用$(div).attr("src","1.jpg")一直換圖到＂100,jpg"的方式在做動畫嗎？ : 站上沒看到有人在討論這個，對大家來說可能不難吧，但我好想知道啊....= = : 請求高手前輩指點迷津～提供一個搜尋這種看起來很耗功夫網頁是使用哪個技術的方法 ===== 看網頁原始碼會找到 <script src="/javascripts/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="/javascripts/jquery.browser.mobile.js" type="text/javascript"></script> <script src="/javascripts/preloader.js" type="text/javascript"></script> <script src="/javascripts/skrollr.data.basic.js" type="text/javascript"> </script> <script src="/javascripts/skrollr.data.storyline.js" type="text/javascript"> </script> <script src="/javascripts/skrollr.data.charactor.js" type="text/javascript"> </script> <script src="/javascripts/skrollr.data.sketch.js" type="text/javascript"> </script> <script src="/javascripts/skrollr.data.tech.js" type="text/javascript"> </script> <script src="/javascripts/skrollr.data.render.js" type="text/javascript"> </script> <script src="/javascripts/skrollr.data.room.js" type="text/javascript"></script><script src="/javascripts/skrollr.js" type="text/javascript"></script><script src="/javascripts/animator.data.girl.js" type="text/javascript"></script><script src="/javascripts/animator.js" type="text/javascript"> ==== 看得出這網頁大量使用skrollr這個東西我們就google 找看看 "javascript skrollr" 可以找到這個網站 http://prinzhorn.github.io/skrollr/ 追到最後就找到這個網站使用技術的頁面囉 ====== 其實追這個的邏輯很簡單做這種網站有幾個方法 1. 全部移動的js 自己手刻有見過但是第一考慮程式碼版權看到了你也不能怎麼樣XD 第二學一下怎麼刻一般不難 2. 使用外部lib 像這個網頁這樣其實這是大多數網站的作法因為這麼多物件手刻js其實很累從引用的js檔名找蛛絲馬跡找到lib網站之後就可以用比較簡單的方式做出來了鼓勵你加油xD -- 佛言：「眾生以十事為善，亦以十事為惡。身三、口四、意三。身三者：殺、盜、婬；口四者：兩舌、惡罵、妄言、綺語；意三者：嫉、恚、癡。不信三尊，以邪為真，優婆塞行五事不懈退，至十事，必得道也。」歡迎參觀Buddhism佛教板以及Learn_Buddha漢傳實修板 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 123.194.164.239

推

pm2001

11/23 22:54, , 1^F

11/23 22:54, 1^F

→

flamerecca

11/25 07:31, , 2^F

11/25 07:31, 2^F

‣ 返回看板[ Web_Design ] 網路

‣ 更多 flamerecca 的文章

文章代碼(AID): #1Ia1BMVm (Web_Design)