現在的網頁設計講求像以前Flash一樣的動態效果 , 有動畫的網頁可以讓一個網站看起來更有質感
今天要講的這個基礎教學是類似 Scrolling 套件的效果 , 就是當視窗滾動到一個位置 , 區塊會用動畫進場
其實這個效果已經很盛行了, 幾乎每個新生代網站都會套用 , 但是我發覺大部分都是運用套件來完成
例如有個套件叫做"scroll-effects" , 他就可以達到此效果, 前台的程式碼也可以比較精簡！
但是 .. 其實本人並不喜歡運用套件,
第一：肥
第二：難預料狀況 , 有經驗的人應該知道 , 像是chrome 三不五時秘密更新
有些時候一但更新後有些程式就會起衝突 , 變成效果跑不出來 , 很麻煩 , 尤其像是許多scroll的套件特效會出現
閃爍的現象, 所以除非必要, 我是一率不使用套件的
第三：最重要的其實跟第二點差不多, 像我幾年前做過的案子有些套件現在已經掛點了, 變成常常要去修正bug
煩呀！
不多說 , 像是 scroll-effects 的效果我們今天用最基本的方式來分享給初學者, 希望對你們有幫助！
首當其先就是要建立環境跟引入jQuery
<div id="banner" class="box">
<div class="bar">
<h1>我是首頁</h1>
</div>
</div>
<div id="banner" class="box">
<div class="bar">
<h1>我是首頁</h1>
</div>
</div>
