[ Blogger ] [ JavaScript ] 使用 JavaScript 在 Blogger 模擬 iPhone / iPad 網頁滾動效果

2015.12.22 更新

本篇文章所使用的捲動優化方法會因為網頁內容的多寡而有效能的差異，當你的網頁元素（圖片或廣告）越多時，在效能較差的電腦捲動效果就會越不好，因此請 Blogger 站長們可以先進行測試再考慮長久的使用。由於 Laird Studio 屬於三欄式版面配置，有部分網友反應網頁捲動不順的問題，因此已經暫時停用此優化方法。

Laird Studio 萊爾德工作室敬上

2015.10.15 更新

本篇文章的教學內容已經更新，我們採用了另外一套程式碼達到網頁流暢滾動的效果，所以包括 Apple 軌跡板運作不順的問題都已經解決， Blogger 站長們可以放心採用以下方法優化你的網頁！

Laird Studio 萊爾德工作室敬上

有沒有發現我們的網頁用滑鼠滾輪滾動的感覺和其他 Blogger 網頁不太一樣呢~

感覺就很像 iPhone / iPad 在滑動網頁一般，非常的流暢吧~

其實只要編輯一下 Blogger 的範本，加入優化網頁滾動的 JavaScript 程式碼，就會有這樣的效果喔~

以下是針對 Blogger 所做的網頁滾動優化教學~ 分享給大家一起學習~

本文開始~

在 CodePen 網站的 Smooth Scroll 這個 JavaScript 是屬於開源程式碼 ( Open Source )，所以可以放心取用~

http://codepen.io/bassta/pen/LovFG

如果連結失效，下面我也幫讀者們備份了一份 JavaScript ，基於本站創用 CC 3.0 Taiwan 條款釋出，可以自行取用沒問題的~

Smooth Scroll JavaScript:

<script type='text/javascript'>
$(function(){

var $window = $(window); //Window object

var scrollTime = 1.2; //Scroll time
var scrollDistance = 170; //Distance. Use smaller value for shorter scroll and greater value for longer scroll

$window.on("mousewheel DOMMouseScroll", function(event){

event.preventDefault();

var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);

TweenMax.to($window, scrollTime, {
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut, //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
autoKill: true,
overwrite: 5
});
});
});
</script>

請把上面的 JaveScript 程式碼右鍵複製到剪貼簿後，至 Blogger 管理介面 > 版面配置

在範本視窗搜尋 <head> 或 </head> 標籤。( Ctrl+F or Cmd+F )

請務必在 <head> 與 </head> 之間加入下圖紅框中的程式碼：

<script src='http://code.jquery.com/jquery-1.11.3.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'>
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js'>
</script>

*註：如果範本中有程式碼已經重複，例如 code.jquery 或是 ajax.googleapis ，建議留下新版本的程式碼，把舊版本的移除掉。

同樣的，在範本視窗搜尋 <body> 或 </body> 標籤。( Ctrl+F or Cmd+F )

把 Smooth Scroll 的 JavaScript 程式碼加入 <body> 與 </body> 之間。（建議放在 </body> 前面即可）

當把所有程式碼都加入之後，只要按下 " 儲存範本 " ，就大功告成了！

重新整理你的 Blogger 網頁後，就會發現網頁滾動時變得非常順暢喔~

這邊再提供一個小訣竅，預設的程式碼捲動速度會比較慢，如果你希望快一點，只要把 Smooth Scroll JavaScript 程式碼當中的 var scrollTime = 1.2; ，這行指令的數值改小一點，捲動時就不會那麼緩慢囉！

而 var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; ，這行指令的120 也可以更改，如果把數值改大一點，滾輪效果會更滑順喔！

雖然許多瀏覽器都有開發優化網頁滾動的擴充插件，像是 Chrome 以及 Firefox 等等，不過上述方法不管有無安裝擴充套件，在任何支援 JavaScript 的瀏覽器都會有效果喔！

如何在 Blogger 模擬 iPhone / iPad 網頁滾動效果的教學就到這邊~

我們下次見~

Search

2015年4月16日星期四