現在的網頁設計講求像以前Flash一樣的動態效果 , 有動畫的網頁可以讓一個網站看起來更有質感 今天要講的這個基礎教學是類似 Scrolling 套件的效果 , 就是當視窗滾動到一個位置 , 區塊會用動畫進場 其實這個效果已經很盛行了, 幾乎每個新生代網站都會套用 , 但是我發覺大部分都是運用套件來完成 例如有個套件叫做"scroll-effects" , 他就可以達到此效果, 前台的程式碼也可以比較精簡！ 但是 .. 其實本人並不喜歡運用套件, 第一：肥 第二：難預料狀況 , 有經驗的人應該知道 , 像是chrome 三不五時秘密更新 有些時候一但更新後有些程式就會起衝突 , 變成效果跑不出來 , 很麻煩 , 尤其像是許多scroll的套件特效會出現 閃爍的現象, 所以除非必要, 我是一率不使用套件的 第三：最重要的其實跟第二點差不多, 像我幾年前做過的案子有些套件現在已經掛點了, 變成常常要去修正bug 煩呀！ 不多說 , 像是 scroll-effects 的效果我們今天用最基本的方式來分享給初學者, 希望對你們有幫助！ 首當其先就是要建立環境跟引入jQuery 一個一頁式網頁的區塊基本規劃就是如此 , 接下來就是css 為了方便我這邊一率設為滿版 目前基本環境是建立好了 , 接下來就是要想一下, 當視窗滾到這個區塊時, 哪些元素是要動起來的, 要怎麼動 有一個 css 外掛其實我覺得很好用 animate.css 當然他很肥 , 你可以選擇你要的效果, 不要的刪除就好 像我最常用的是這幾個 (因為我是用scss編寫 , 所以這個看看就好) //向左淡入 .fadeInLeft { // 名稱 速度 播放 running 或暫停paused @include animation(fadeInLeft,1s,running); } //向右淡入 .fadeInRight { // 名稱 速度 播放 running 或暫停paused @include animation(fadeInRight,1s,running); } //由下向上淡入 .fadeInUp { // 名稱 速度 播放 running 或暫停paused @include animation(fadeInUp,1s,running); } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40%, 0); } to { opacity: 1; transform: none; } } //放大 .zoomSmall { // 名稱 速度 播放 running 或暫停paused @include animation(zoomSmall,1s,running); } 等於說我們已經預先把效果跟class名稱都定好了, 這樣隨時我們都可以調用 再來一個很重要的地方, 每一個我們需要添加動畫的元素, 必須添加一個style .visible { opacity: 0; } 也就是說元素一開始就先讓他隱藏起來 , 加在html裡頭就像這樣 這樣我們就可以知道, 哪些是要進行境場動畫的, OK , 接下來就是手工寫這個效果了 , 為了方便辨識function , 我這裡排除一大堆需要花時間去熟悉的自訂“變數”名稱 , 一律用最透明化的方式編寫 註1：因為我不喜歡讓使用者滾動到太低才讓元素出現, 所以我習慣設定 300 ~ 500 px 以上是基礎版, 接下來這個比較進階, 會用到循環 , 比方說我剛剛設計的 about 裡頭有個列表 如果照我剛剛寫的方式 , 他們的進場方式會六個同一時間一起 fadeInUp ！ 今天如果我想要讓他們波浪式的進場該如何是編寫？ 收先當然一定要先對html 做修正