也來寫點程式碼

Bash or the Bourne again shell, is a UNIX like shell, which is perhaps one of the most installed utilities on any Linux system. From its creation in 1980, bash has evolved from a simple terminal ba...

這下糗了，BASH出現超大的安全問題......

在BASH底下執行這行指令，如果印出了evil與good兩行字，就代表你的BASH有問題！

env x="() { :;}; echo evil" bash -c "echo good"

今年參加 Java Developer Day 2014，重頭戲 良葛格老師 一登場介紹 JDK8 Functional API，雖然我現在主力不是寫 Java，不過以前也寫 Java 寫了好幾年，看著 Java 的慢慢演變，來到 Java…

Functional Language的興起，一個很重要的發展就是許多常見的Design Pattern的影響力下降。

以往我們在製作圖標或Logo等小圖示時，都會選用兩種方法其中一種，或者兩種全用：

一個小圖示就是一個圖檔。

把數個小圖示集合起來在一張大圖上，然後以background-image和background-position調整大圖的位置以顯示想要的圖示。這也就是大家俗稱的Image Sprite。

第一種方法的缺點是太多圖檔了，如果沒有把圖檔分佈在不同的CNAME之下，由於瀏覽器會限制同時能從同一個CNAME下載的檔案數量，所以圖示的讀取會被極度拖延。

第二種方法極大節省了請求圖案的要求量，所以對整體的效能提昇非常顯著，但是也有一些缺點。

第一個是單點失敗（Single point of failure），若這張圖讀取失敗，或者這圖本來就是壞掉的，那所有圖示都會壞掉。

第二個，工程師必須非常仔細計算每個圖示的位置，才能讓圖示正確顯示，如果CSS Style算錯就會出現跑掉位置圖示，或者出現錯誤的圖示。更糟糕的是background-position可能會被其他的CSS規則蓋掉，造成意想不到的錯誤。或者根本被重設導致整張圖都跑出來了，Blizzard的暗黑破壞神還因此出了一個裝備嘲笑這個問題。

第三個，每次要新增或修改圖示大小，就必須重新產生一個Sprite。新增圖示還是簡單問題，如果是每個圖示大小要修改，那就得重算所有圖示的background-position。非常麻煩又容易出現問題。

幸好這問題在現代的瀏覽器中，有一個技術可以取代Sprite又不會造成太多問題，那就是Data URI。

Data URI說穿了也沒什麼，就是用base64等早就用在E-mail編碼的方法，把圖檔等二進位檔案轉成文字檔。只要瀏覽器支援，它就能將該段文字還原為當初的二進位圖檔。

例如這個圖示：

轉成Data URI之後變成：

data:image/png;base64,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

阿物SEO智庫與暗黑執行緒都有詳盡的介紹。對前端程式設計而言，這個技術有幾個好處：

Request的數量降低，就算是Sprite也是至少一個CSS檔案與圖片檔，但是Data URI只需要讀取一個CSS檔案。

因為每個Request在最糟糕的情況下每次都要開啟並關閉一個執行緒，所以一個巨大的Request會比很多小的Request要有效率。使用Data URI把許多圖檔內嵌入CSS檔案，就是把許多小Request集結成一個大Request的方法。

不用再像Image Sprite一樣幫每個圖示算位置。

Data URI可以在img標籤裡面的src屬性使用，所以完全不用像Sprite一樣把圖示變成背景。風格調整處理起來相對簡單。

當然這個技術不是沒有缺點的：

永遠的IE惡夢。IE8以下不支援，就算是IE8以上，也不支援32KB以上的圖示。

因為它不是真正的圖檔，所以瀏覽器沒辦法將它快取起來。每次要展示這圖片，瀏覽器就得解碼它再顯示。例如頁面上有個按鈕出現100次，瀏覽器就要重複解碼再顯示一百次。在桌機上不是大問題，但是在手機上就會造成稍微的效能下降。

如果沒有使用gzip等網頁壓縮功能，Data URI造成的檔案大小會比原圖檔大33%。加上gzip壓縮後也大約大了2-3%。

圖示改變就要重新產生一次Data URI。

CSS會變得很難看。

在目前的瀏覽器除錯器裡面，它沒辦法給你Data URI的預覽，所以圖片有問題也沒辦法快速地從除錯器裡面看出端倪。

以我的經驗來說，Data URI在這些情況下相對於Sprite有優勢：

針對現代瀏覽器（對，IE一系列是該被淘汰的恐龍瀏覽器）。

不能使用Background-image時。

圖示時常變動。

同一個圖示需要以不同的大小在不同地方顯示。

美工只給你一堆圖示圖檔，卻沒給你Image Sprite時。 XD

Data URI現在網路上有許多線上網站可以幫你快速地由圖檔轉換，例如 dataurl.net就是我個人很常用的一個工具。

他的操作方式非常簡單，進入該網站之後可以用拖拉或開啟檔案選單的方式選擇檔案。

圖片選擇完成之後就會出現轉換之後的Data URI了！

而如果你想要直接以圖片網址轉換Data URI，這邊也有個網站有此功能：

http://dopiaza.org/tools/datauri/index.php

真是超方便的！

share web design experience to F2E !

對前端工程師最重要的是第69頁，各種網頁設計的參考網站！

http://html5up.net/ -- 找版型

http://www.siteinspire.com/ -- 找有美感的網頁設計

由於近年來網站前端開發生態劇烈改變，YUI在這波改變逐漸失去開發社群的青睞，為了投入下一個世代的前端呈現框架，Yahoo宣佈將不再繼續發展YUI  

我們網頁前端工程師常常要在網站上用瀏覽器的debug來替網站上的JavaScript檔案除錯，通常那些檔案都已經經過最小化，最佳化，還有變數混淆了，以增進檔案讀取的效率，並防止他人輕易盜用程式碼。不過一旦要除錯，就苦了前端工程師了。

就算現代的瀏覽器如Chrome、Safari與Firefox都支援美化程式碼的功能，讓最小化的程式還原成有排版的情況。但是遇到變數混淆過的程式，面對一堆變數名稱是a、b、c、d的程式，還是會除錯除得很辛苦。

不過網路上有些神奇的工具可以幫助我們不僅是把糊成一團的JS檔排的美美的，甚至它會替我們逆推算已經混淆的變數名稱！

那就是這篇要介紹的JS nICE網站。

這個網站的介面超級乾淨，就像下圖一樣，左邊是複製貼上的JS原始碼， 只要按下NICIFY JAVASCRIPT按鈕，經過排版與替換變數的成果就會出現在右邊了！

神奇的是，它的變數替換還真的有點準，例如我之前為了除錯將跟一團義大利麵一樣的Tumblr的Infinity Scrolling檔案放進這網站，它產生出來的檔案還真的有那麼點回事，例如原先是：

var Q=C.toUpperCase()=='GET'

這樣的東西，翻譯出來後變成：

var isGet = method.toUpperCase() == "GET";

真是神奇！

不過它也不是百分之百的準確，一些函式還是會被轉翻成不相干的東西，例如原本是：

function watch_scroll(){var d=document.compatMode=="BackCompat"

轉換完成之後反而意義跑掉了：

function resize() { /** @type {(Element|null)} */ var element = document.compatMode == "BackCompat" ? document.body : document.documentElement;

所以在解析的時候最好還是不要全信。不過它也有提供選項，讓你在自動排版時不要替換變數，或者選用Interactive Renames的互動方式即時修改新的變數的名稱：

從此以後挑戰未知或者接手別人爛尾的JavaScript檔案就不用像迷宮探險一樣跌跌撞撞還理不出一個道理了！

圖片來源：www.publicdomainpictures.net

這次是一個針對網頁效能調校的練習。

在對讀取時間斤斤計較的大流量圖文網頁，例如Facebook，Yahoo首頁，Tumblr dashboard而言，多十分之一秒的讀取時間，就是減少了使用者看此頁面的興趣，這可會減少每天幾十萬甚至上百萬的瀏覽量。所以這些扛霸子等級的頁面莫不想盡辦法減少任何不必要的檔案讀取。

通常最常被延遲讀取的就是在畫面之外，還沒有被使用者看到的圖片。

而在圖片數量巨大的網頁上，也會有類似的需求。以我自己的習作1為例，一個網頁大約有70張以上的圖，檔案總大小約5.6MB，但是其實一開始使用者只會頂多看到三張圖，約200KB。所以實作一個機制讓瀏覽器只載入使用者一開始會看到的少少幾張圖，然後隨著某些條件被觸發而慢慢把圖讀入，就能明顯改善讀取時間，在平板等資源受限的裝置上更明顯。

這就是我們這個習作要做的練習 — 圖片延遲讀取。

這個功能實作出來並不是沒有代價的。雖然它能在圖片數量極大的網頁上有巨大的功效，但是它也有很多明顯的缺點：

它需要JavaScript的幫助。如果使用者關閉JavaScript，或者在這頁面上的其他程式跑出JavaScript Error，導致我們的圖片延遲讀取處理函式沒有被執行到，那整個頁面就會慘不忍睹。

當使用者看到頁面的一半處，然後跑到另外的網頁，再點「上一頁」回來原本的頁面，那原本頁面上的圖片有可能會是沒有讀取出來的狀態。

使用者有一定的機會在捲動頁面，讓圖片進入螢幕時，由於圖片檔案太大或者網路不穩，該出現圖片的地方有可能是一片空白或是一個讀取中的圖案，會帶給使用者負面的瀏覽體驗。

圖片延遲讀取配上內容延遲載入（Content on demand），例如Facebook的牆面，常常會是bug出沒的地方。

所以在實作這個功能時，必須針對這些缺點加以規劃備案，評量實作與不實作的利益後才動工。效能調校常常是一種權衡，很多方法必須犧牲某些東西換取效率，所以不是所有的方法都適合所有專案。

圖片延遲讀取其實已經被很多成熟的JavaScript函式庫實作出來了，例如jQuery與YUI3都有類似的功能。熟悉這些函式庫的開發者大可直接套用，不用重造輪子，不過因為這篇是一篇習作，所以當然是要用最基本的JavaScript來實作整個機制才有意義啊。

首先，延遲讀取的機制有很多種選擇，但是主要不脫離兩種方法：

單獨讀取：最普遍單純的讀取機制，主要是圖片移入螢幕或者即將移入螢幕的時候把真正的圖片讀取進來，再把假圖片替換掉。這種機制可以做到最細緻的層級，精巧讀取需要的圖片。

批次讀取：把圖片分群別類，當某種條件滿足時（網頁捲動到某地方，或者整群圖片的其中一張進入顯示範圍），把整群圖片一起讀取進來。這種手法在機動生成的頁面上沒啥效益，但是在手工刻出來的頁面上，只要調校得當，可以取得比單獨讀取手法更好的效能與視覺效果。

我們從單獨讀取開始實作。網路上有一篇文章提到了一個純JavaScript的解法，雖然一些細節不是完全正確的，但是大體來說是正確的，我們就從這篇文章擷取我們要的部份當做開始：

我們要先改造所有想要變成延遲讀取的圖片的img元素：

<img src="images/ajax-loader.gif" class="lazy" lazy-src="images/TEST.jpg"/>

我們將圖片的路徑”src”換成一個容量很小的圖片images/ajax-loading.gif，把真正的圖片檔名images.TEST.jpg放進一個叫做lazy-src的屬性裡，並且加入一個特殊的class叫lazy，之後我們的處理函式就認所有帶有lazy名的img元素。

製作一個抓取所有頁面上帶有class=lazy的圖片，並且塞進一個陣列裡面：

var lazyImages; initLazyImages = function () { var temp = []; lazyImages = document.querySelectorAll('img.lazy'); for(var i = 0; i < lazyImages.length; i++) { temp.push(lazyImages[i]); } lazyImages = temp; },

接著準備一個專門處理圖片讀取的函式，它先將img元素裡lazy-src屬性的路徑提取出來，使用Image物件來讀取圖片。瀏覽器有個奇妙的特性，當你指定Image物件的src屬性時，瀏覽器會馬上試著以src屬性給予的路徑讀取該圖片，不管Image物件是不是真的已經在網頁上了。然後我們在圖片讀取完成，並呼叫Image的onload事件上把img元素的src換成該圖片：

loadImage = function (img) { var imgObj = new Image(), src = img.getAttribute('lazy-src'); //圖片讀取完成時，取代讀取小圖示 imgObj.onload = function() { if (!! img.parent) { img.parent.replaceChild(imgObj, img) } else { img.src = src; } }; imgObj.src = src; },

然後，我們來準備一個判斷函式，判斷某張圖有沒有進入螢幕的顯示範圍，在這邊我們使用getBoundingClientRect來定位img元素的位置：

canLoadImage = function (elem) { var pos = elem.getBoundingClientRect(); return pos.top >= 0 && pos.left >= 0 && pos.top <= (window.innerHeight || document.documentElement.clientHeight) },

最後，我們終於到了處理函式的地方。處理函式在每次捲動事件發生時呼叫，它會依序檢查lazyImages陣列裡面的圖片，如果該圖片已經進入可以讀取的範圍則開始讀取，並且把該物件移出lazyImages陣列：

handleLazyImages = function () { for (var i = 0; i < lazyImages.length; i++) { var image = lazyImages[i]; if (canLoadImage(image)) { loadImage(lazyImages.splice(i,1)[0]); i--; } } };

大功告成，讓我們把所有元素都湊在scroll的處理函式裡面吧：

initLazyImages(); body.addEventListener('scroll', function (e) { ...... handleLazyImages(); });

這段程式碼的展示網頁裡面，剛讀取完頁面時，如果把瀏覽器的除錯工具打開，在網路項目下應該會看到只有兩張大圖與一張小圖被讀進來：

當使用者逐漸往下捲動時，剩下的大圖就會被一張一張讀取進來：

這就是簡單的圖片延遲讀取原理的實作。

除了單張延遲讀圖之外，批次讀圖也是一種可行的手法，尤其在圖片位置已知的靜態網頁，由於可以花很多時間刻程式碼、微調風格到最適合的體驗，所以把圖片分批編組，依照各種條件讀取最適合的圖片也是一種最佳化的手法。

而且一次讀取多張圖片只要不超過瀏覽器的request限制，可以在不影響網頁執行情況下充分利用多工的長處，整體的效果會比單張讀取要流暢。

在這裡，我們來寫個用特定條件觸發的批次讀圖練習。

首先當然是幫每個要批次讀取的圖編組，並且依照群組名稱初始化：

var lazyImages = {"lazy1":document.querySelectorAll('img.lazy1')};

再來，在scroll事件的處理函式中，我們用上一篇實作的getProgress()讀取目前頁面的位置，然後設定在滾動了60%頁面長度時執行批次讀圖：

body.addEventListener('scroll', function (e) { progress = getProgress(); if (progress >= 60 && lazyImages.length > 0) { loadImages('lazy1'); } doScroll(body.scrollTop); });

接著實作讀取特定群組圖片的函式：

loadImages = function(group) { var image, src, newImage, imageGroup = lazyImages[group]; // 如果該群已經被移除，則返回 if (!imageGroup) { return;} for (var i = 0; i < imageGroup.length ; i++) { image = imageGroup[i]; newImage = new Image(); src = image.getAttribute('lazy-src'); // 用 function closure 來製作讀取處理函式 newImage.onload = (function () { // 把每個image物件與src暫存在此 var theSrc = src, theImage = image, theNewImage; return function (){ if (!! theImage.parent) { theImage.parent.replaceChild(theNewImage, theImage); } else { theImage.src = theSrc; } } })(); newImage.src = src; } // 移除已經把圖片讀取完成的群組 delete lazyImages[group]; };

這邊有個小陷阱，由於我們是用for迴圈搭配生成新函式的手法來置換圖片，會有scope chain陷阱的問題。所以必須用closure來暫存所有之後會用到的變數。

以上都搞定之後，我們就可以來這一個示範網頁玩玩看了！

Happy Coding Day!

習作 1-1 純CSS視差滾動設計(Pure CSS Parallax design)

習作 1-2 視差滾動設計與 requestAnimationFrame

習作 1-3 視差滾動設計與變換特效

習作 1-4 視差滾動設計與淡入淡出特效

這次要做的習作是簡單的淡入淡出特效。

原本淡入淡出特效只要透過CSS的opacity與transition就能做到。但這是針對射後不理型的淡入淡出特效而言。一到達某個點，就啟動特效，而且一次就演到完，不管網頁上其他物件的狀態。

在視差滾動的設計中，各種特效的施展除了射後不理的類型外，還有依據滾動的程度變換的特效，在這次的習作選用的是操縱opacity這個屬性來達到淡入淡出效果。

除了線性的淡出淡入，我們還可以用上都還給數學老師的三角函數來製作循環淡出淡入特效。

首先，從上一篇的習作裡面，我們用getProgress這個值代表目前捲動了幾個螢幕的進度（0代表沒有捲動，100代表捲動了一整個螢幕的長度）：

var getProgress = function(){ return parseInt(body.scrollTop * 100 / document.body.clientHeight); }

接下來，我們就能利用這個progress值來製作一個函式設定DOM元素的透明度的函式opacityImage，我們餵給它目前的捲動進度progress，想要開始特效的起點，想要完成特效的終點，還有元素的CSS path：

opacityImage = function (progress, start, end, imgSelector) { // 只有在開始與結束的區間內才要計算透明度，避免浪費CPU if (progress > start && progress < end) { // 取得DOM元素 var img = document.querySelector(imgSelector); if (img && img.style) { //DOM元素的透明度從0漸漸變成1 img.style.opacity = ((progress - start)/(end - start)); } } },

這樣我們只要設定一個更新的函式，讓它負責所有要淡入的元素的透明度更新，每次onscroll事件都呼叫它即可。

在這邊我抓取兩個元素 .fade1 與 .fade2。.fade1要開始淡入的起點是捲動到20%螢幕長度時開始，然後在捲動到44%時完整呈現。.fade2則是在捲動到83%與117%時執行特效。這邊的數值都是根據元素實際捲進螢幕的位置與作者想要的效果而決定，換句話說，沒有任何公式可以預測，只能自己測量，算是一種會算到火大的手工業！

fadeInOutHandler = function (progress) { opacityImage(progress, 20, 44, '.fade1'); opacityImage(progress, 83, 117, '.fade2'); },

這樣的幾行程式碼就能做到如下圖一般的簡單淡入效果：

不過這樣簡單的特效是沒辦法滿足我們這些程式狂的！做出來預設特效之後，接下來的就是想辦法讓我們可以用類似的方法，製造出淡出與其他類型的透明度變換特效！

得益於JavaScript是個functional language的特色，它的函式能傳遞的東西除了數值、字串、物件等類型之外，我們也是可以把一個函式當成參數傳遞進函式的！

現在讓我們來改造原本的opacityImage函式，加進一個新的參數叫做customizedFunc，這個參數接受一個函式，且這函式會接受progress, start與end當做參數，並回傳一個介於0到1之間的數字。以決定DOM元素的透明度：

opacityImage = function (progress, start, end, imgSelector, customizedFunc) { // 只有在開始與結束的區間內才要計算透明度，避免浪費CPU if (progress > start && progress < end) { // 取得DOM元素 var img = document.querySelector(imgSelector); if (img && img.style) { // 如果customizedFunc有定義則呼叫customizedFunc，否則預設效果為從0漸漸變成1 img.style.opacity = (customizedFunc && customizedFunc(progress, start, end)) || ((progress - start)/(end - start)); } } },

在這個更新的函式裡面，最重要的就是這行：

img.style.opacity = (customizedFunc && customizedFunc(progress, start, end)) || ((progress - start)/(end - start));

這裡面其實是用了短路求值（Short-circuit evaluation）達到這樣的效果，上面那行與下面的程式碼基本上是一樣的：

if (customizedFunc) { img.style.opacity = customizedFunc(progress, start, end); } else { img.style.opacity = (progress - start)/(end - start); }

這種簡化if/else為短短一行的作法在JavaScript與C家族的macro上常常看見，通常都會是艱深難懂的火星文程式碼的必備成員。但其實運用得當的話，可以讓程式簡潔好懂--只要邏輯不過分複雜、排版正確且正確使用小括號的話。

接著讓我們來定義幾個最想用的特效函式吧：

fadeOutEffect = function (progress, start, end) { return 1 - ((progress - start)/(end - start)); };

這是把原本的淡入特效反過來用，隨著捲軸滾動向下，該元素的透明度會漸漸變淡，直到消失。

memoryEffect = function (progress, start, end) { // Range : 0.1 ~ 1 return 0.1 + ((Math.sin(Math.PI * progress/10)+1) * 0.45); };

這個特效就有趣了，它借助了三角函式Math.sin()的幫助，依照progress每次滾動20%的螢幕，製造了一個在-1與1區間來回擺盪的數值，再加上1之後讓數值調整為在0與2之間迴盪，再乘與0.45使他的數值擺盪的區間變成0到0.9。最後再加上調整值0.1，這樣整個透明度就會在0.1與1之間擺盪。

簡單的三角函數與線性調整就可以替我們創造閃爍的淡入淡出特效了！數學在程式的世界其實比想像中要常用、好用，大家要好好學數學啊！

以上的特製函式都準備完成後，只要很簡單的把他加進原本的處理函式，整個工作就大功告成了！

fadeInOutHandler = function (progress) { opacityImage(progress, 20, 44, '.fade1'); opacityImage(progress, 83, 117, '.fade2'); opacityImage(progress, 200, 300, '.fade3', fadeOutEffect); opacityImage(progress, 130, 170, '.cycle1', memoryEffect); opacityImage(progress, 150, 200, '.cycle2', memoryEffect); }

最後我們在scroll事件處理函式把fadeInOutHandler放進去，特效就能動了：

body.addEventListener('scroll', function (e){ var progress = getProgress(), ...... fadeInOutHandler(progress); ...... });

這個展示頁面顯示了以上提及的淡入淡出特效，有興趣的人可以玩玩看。

Happy Coding Day!

習作系列：

習作 1-1 純CSS視差滾動設計(Pure CSS Parallax design)

習作 1-2 視差滾動設計與 requestAnimationFrame

習作 1-3 視差滾動設計與變換特效

習作 1-4 視差滾動設計與淡入淡出特效

寫程式好玩的地方之一，就是程式設計師有如一個小小造物主一樣，當千辛萬苦終於讓程式或網頁勉強可以動的境界時，看著剛完成的小小世界，狂熱的程式設計師會飢渴地看著她，然後想用更花俏的技巧讓這個小玩意更完滿，滿足程式設計師的創造狂熱。

從上一篇習作1-2完成的展示頁面裡，我發現一個有趣的現象，當使用者捲動頁面時，在某些點，由於圖層之間捲動的速度不一樣，剛好其中某兩個圖層的大小剛好一樣，某些圖層就會交集在一起完全重疊，之後再隨著我們繼續滾動而分開，有如日月蝕一樣。

這裡有個地方被浪費了，當日蝕開始（上層圖案蓋住下層圖案）時，與日蝕結束時，出現的都是同一個圖層的圖樣。這其實是一個可以增強的地方。

在網路上有一個很類似的想法實作出來的純CSS視差滾動頁面設計。

下面是展示網頁的動態圖：

而我們要做的效果更複雜一點，因為必須計算兩個圖層相交，然後更換顯示圖樣的效果，所以必須用JavaScript來達到這個特效。下面圖樣就是我們預想會達到的效果：

為了達到這個效果，我們從習作1-2的展示頁面開始，必須改動HTML、CSS與JS一起改動。

首先，我們要改動頁面上會被蓋住的下層圖層的結構，從

<div class="card"><div class="title">BACK</div></div>

變成

<div class="card two-faced">

  <div class="top"><div class="title">BACK</div> </div>

  <div class="bottom"> <div class="title">BACK</div> </div>

</div>

top與bottom兩區塊同時只能有一個是顯示狀態的。

我們將card這個區塊分裂成兩個子區塊，top與bottom。top是在被上層圖層遮住前顯示的區塊，bottom是在上層圖層掩蓋並重新顯露之後顯示的。

而這個改造並不是適用到所有card區塊，因為並不是每一個card都會在可見範圍內被上層圖層掩蓋。事實上只有奇數塊的card需要這樣的改造。

將card改造後，我們要為這個新區塊添加一些CSS，讓我們可以替之後JavaScript製作的效果開路：

.card.two-faced .hide { display: none; } .card.two-faced .top{ background:yellow;} .card.two-faced .bottom{ background:green;}

我們替top與bottom添加顏色以利分辨，然後新增一個特殊的class name叫做hide，之後JavaScript只要適時添加與移除hide，就能創造更換區塊的效果。

最後是最複雜的JavaScript區塊。首先，我們必須要知道到底螢幕滾動到哪邊的時候兩個圖層會相交在一起。目前我們設定的圖層滾動速度是：

最底層：100%

次底層：150%

上層：300%

最上層：450%

我們實作一個簡便的函式來取得捲動的百分比：

var getProgress = function(){ return parseInt(body.scrollTop * 100 / document.body.clientHeight); }

這個函式回傳100則代表頁面已經捲動了一個螢幕的長度。

而每個頁面圖層之間的交集點都不一樣，但大致遵守著X+N*Y的線性函式，X是圖層啟始點造成的，而Y則是兩個圖層移動速度差異造成的。例如我的展示頁面的函式是33+N*200，就是33,233,433,633等數值。這些數值每個案例都不會一樣，讀者要自己用debugger不斷呼叫getProgress()測試出來。

之後我們就能定義出關鍵閥值：

// Gate 33 233 433 = 33 + n * 200 var progress = getProgress(), threshold = Math.floor((progress + 167)/200);

透過這個簡單的轉換當progress的值在0到32之間會轉換成0，值在33到232會轉換成1，以下以此類推。當我們滾動頁面超過閥值造成threshold數字變動時，就代表某個card區塊的top與bottom子區塊要轉換了。

下一步我們要抓出所有屬於two-faced的區塊：

var twoFaceList = body.querySelectorAll('.card.two-faced'), prevThreshold = 0;

以及在閥值變換時隱藏與顯示top/bottom子區塊的函式：

var twoFaceHandler = function (gate) { var i = 0; for (;i < gate;i++) { if (twoFaceList[i] && null === twoFaceList[i].querySelector('.top').className.match('hide')) { twoFaceList[i].querySelector('.top').className += ' hide'; twoFaceList[i].querySelector('.bottom').className = twoFaceList[i].querySelector('.bottom').className.replace(' hide', ''); } } for (;i < twoFaceList.length;i++) { if (twoFaceList[i] && null === twoFaceList[i].querySelector('.bottom').className.match('hide')) { twoFaceList[i].querySelector('.top').className = twoFaceList[i].querySelector('.top').className.replace(' hide', ''); twoFaceList[i].querySelector('.bottom').className += ' hide'; } } };

這邊我們把two-card的子區塊用兩個for迴圈切割成兩群。第一個for迴圈把所有比閥值小的two-faced的top隱藏起來，顯露bottom子區塊。第二個for迴圈把所有比閥值大的two-faced的top顯露起來，隱藏bottom子區塊。

這樣我們所有的工具函式就具備了。我們現在只要把所有材料擺進scroll事件的處理函式就搞定了！

body.addEventListener('scroll', function (e){ ...... var progress = getProgress(), threshold = Math.floor((progress + 167)/200); ...... if (prevThreshold === threshold){ return; } prevThreshold = threshold; twoFaceHandler(threshold); });

我們用prevProgress === progress來檢查閥值有沒有更動，如果閥值沒有變動就不用呼叫twoFaceHandler來做無效的計算了。

這樣，我們就用幾行簡單的JavaScript做出一個新的特效了！

這裡是展示網頁，理論上各大主要瀏覽器，平板與手機應該都能用。

Happy Coding Day!

習作 1-1 純CSS視差滾動設計(Pure CSS Parallax design)

習作 1-2 視差滾動設計與 requestAnimationFrame

習作 1-3 視差滾動設計與變換特效

習作 1-4 視差滾動設計與淡入淡出特效

上一篇我們用了純粹的CSS來製作視差滾動，但是使用CSS的缺點非常明顯，就是IE系列無法使用。除此之外在各種不同瀏覽器版本中也會出現一些不一致的問題。所以若是要做出跨各種主流瀏覽器的視差滾動頁面，最終還是要回歸髒髒的JavaScript來解決。

正宗的視差滾動網頁實作技巧主要是用position absolute在各個圖層上，配上z-index做出前後順序。然後用JavaScript在onScroll事件上計算每個圖層應該移動多少距離。整個步驟中最複雜的是計算出每次Scroll每個圖層到底要對應移動多少。

那就開始來做吧。首先我們先做出最基本的網頁構造：

<div class="parallax">   <div class="parallax__group">     <div class="parallax__layer parallax__layer--fore"> ...     </div>

    <div class="parallax__layer parallax__layer--base"> ...     </div>

    <div class="parallax__layer parallax__layer--back"> ...     </div>

    <div class="parallax__layer parallax__layer--deep"> ....     </div>   </div> </div>

這邊的parallax__layer--deep是最底層，也是要移動最慢的一層，而越往上的移動速度就要越快。

網頁結構搞定之後，接著要把最主要的CSS建立起來。基本上它是重寫第一個習作的CSS檔案，將各種CSS3的屬性去除，加上所有要用JavaScript實作滾動視差所需的最基本定義：

.parallax { width:100%; height:100vh; overflow-y:scroll } .parallax__group { position: relative; width:100%; height:100vh; } .parallax__layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .parallax__layer--fore { z-index:4; } .parallax__layer--base { z-index:3; } .parallax__layer--back { z-index:2; } .parallax__layer--deep { z-index:1; }

我們必須保證最外兩層的容器（parallax以及paralax__group）必須有全螢幕的寬度（100%）和高度（100vh）。

而在parallax__layer上我們規定position:absolute，這樣各個圖層就能彼此重疊。最後為每個圖層定義z-index，這樣不同圖層就有先後次序不同的堆疊順序了。

到目前為止，我們能得到一個排版正確，可以捲動但是各個圖層的捲動速度一樣的網頁，接下來就是JavaScript出場的時候了！

在寫JavaScript之前，我們必須幫每個圖層的移動速度做一下定義。在第一個習作中，每個圖層的移動速度是：

deep層，66.66%

back層，100% （基準圖層）

base層，200%

fore層，300%

也就是說每當back層捲動了一個螢幕的範圍，deep層只有移動了2/3層，而base層已經捲動兩個螢幕了，fore更是飛過了三個螢幕那麼多的內容。

當我們把移動速率決定之後，剩下的事情其實很簡單，就是把每個圖層都抓出來，然後在捲動事件裡面調整每個圖層的top值：

var body = document.querySelector('.parallax'), scrollTop = 0; var lv0 = body.querySelector('.parallax__layer--deep'), lv1 = body.querySelector('.parallax__layer--back'), lv2 = body.querySelector('.parallax__layer--base') lv3 = body.querySelector('.parallax__layer--fore'); body.addEventListener('scroll', function (e){ scrollTop = body.scrollTop; lv0.style.top=parseInt(scrollTop * 0.333) + 'px'; lv2.style.top=(scrollTop*-1) + 'px'; lv3.style.top=(scrollTop*-2) + 'px'; });

這邊的數字是這樣算出來的：假設我們目前在scrollTop = 100px時：

deep層（lv0）應該設定top=33px，所以相對於目前的捲動進度，它只移動了 100 - 33 = 67個象素。

back層（lv1）沒有調整，所以他就是移動了100個象素。

base層（lv2）設定成top=-100px，因為是負的100個象素，所以等於跑了100 - (-100) = 200個象素的距離。

fore層（lv3）設定成top=-200px，這樣等於飛了 100 - ( -200) = 300個象素。

這個測試頁面就是用此方法製作出來的視差滾動頁面。大家可以玩玩看，感受一下各大瀏覽器通用的視差滾動實作法。

除此之外，為了避免這次的習作內容太過單薄，讓我們來練習一下如何幫網頁的JavaScript做效能最佳化吧！

由於我們是使用onScroll事件做計算圖層移動的觸發點，因此很有可能會發生這樣的事情：

第0秒，使用者觸發onScroll事件，計算每個圖層的top

第0.01秒，使用者觸發onScroll事件，計算每個圖層的top

第0.02秒，使用者觸發onScroll事件，計算每個圖層的top

第0.03秒，瀏覽器啟動repaint，重畫整個視窗的物件

在這種情況，我們在瀏覽器重畫之前觸發了三次onScroll，也就等於重算了三次全部圖層的top，但是只有第三次的onScroll算出來的數值才會真的拿來重畫視窗，第一次與第二次的onScroll基本上是算心酸的，浪費了電池的電與CPU的運算能力。這在桌面環境或許不怎麼樣，但是在手機與平板等移動裝置上就很糟糕。

那怎麼辦呢？現代的瀏覽器都提供了一個方法可以，讓我們可以在該運算的時候才運算，就是本習作的另一個主題 -- requestAnimationFrame。

微軟的技術文件有非常詳細的說明，基本的原理就是，瀏覽器的window物件提供了一個函數requestAnimationFrame，它接受一個callback函式，讓瀏覽器在真的要重畫之前才呼叫此callback函式一次。因此我們可以把所有重畫的邏輯都寫在callback裡面。

這個callback函式會傳入一個參數，代表該次重畫的時間。因為該次重畫前所有透過requestAnimationFrame註冊的callback函式都會拿到同樣的時間，所以使用者能用這個時間來防止同樣的callback重複呼叫。

講起來有點複雜，就讓code說話吧：

首先，我們定義一個函式來計算各個圖層的top：

var doScroll = function (newScrollTop){ lv0.style.top=parseInt(newScrollTop * 0.333) + 'px'; lv2.style.top=(newScrollTop*-1) + 'px'; lv3.style.top=(newScrollTop*-2) + 'px'; };

之後，我們來定義requestAnimationFrame需要的callback函式：

var prevAnimationTime = 0; var tickScroll = function (time) { if (prevAnimationTime === time){ return; } prevAnimationTime = time; doScroll(scrollTop); };

這個函式的參數time就是重畫的時間點，我們拿time與上一個tickScroll函式執行的時間prevAnimationTime相比，如果一樣就代表有不只一個tickScroll在這次重畫時間執行過了，這樣我們就可以直接return，避免重複計算每個圖層的top

最後，我們改造onScroll事件的處理函式，讓它呼叫requestAnimationFrame來註冊瀏覽器重畫時要呼叫的函式：

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame; body.addEventListener('scroll', function (e){ scrollTop = body.scrollTop; if (requestAnimationFrame){ requestAnimationFrame(tickScroll); } else { doScroll(scrollTop); } });

首先，由於各家瀏覽器對於requestAnimationFrame函式的名稱沒有統一，所以先將他整合成一個名稱。

再來在onScroll的處理函式裡面驗證這個瀏覽器是否支援requestAnimationFrame，如果支援就把tickScroll這個函式傳進去，瀏覽器重畫時就會呼叫它了。

如果瀏覽器太老舊，不支援這個方法，我們只好依照笨笨地每次onScroll都重算圖層的top值了。

這個效能調校之後的測試網頁在此，乍看之下跟前一個測試頁面一樣，沒有差異，但是這一頁的CPU負擔與耗能確實較低一些。在平板電腦和手機上會更明顯，由於使用者在拖曳頁面時，requestAnimationFrame函式被呼叫到的頻率降低，所以效能調校前的網頁會比較流暢（相對起來比較消耗電池），而調校後的網頁會有跳格的情況發生。

requestAnimationFrame這個函式並不常用在onScroll事件上，它最常用的時機是在手機等移動版頁面的動畫效果上，例如CSS無法做到的客製化動畫，像反覆變換透明度的圖示，不簡單的模塊或圖形移動，在老舊或廉價裝置上依照資源的多寡變動重畫動畫物件的頻率。這都是requestAnimationFrame最適合的場合。

Happy Coding Day!

習作 1-1 純CSS視差滾動設計(Pure CSS Parallax design)

習作 1-2 視差滾動設計與 requestAnimationFrame

習作 1-3 視差滾動設計與變換特效

習作 1-4 視差滾動設計與淡入淡出特效

最近迷上了做視差滾動設計（Parallax Design）頁面。這個技術可以回朔到1980年代的遊樂器，利用好幾層移動速度不一樣的圖層，讓玩家在2D運算的時代體驗3D的立體感。沒想到到了2010年代又在網頁世界引起一陣風潮。

圖片來源：維基百科。

視差捲動的特色不只是帶來立體感，許多視差捲動的變種利用滾動速度不一樣的特性做出了很多不同的感覺，例如：

運用position fixed的特性做出變換背景。DEMO在此。

運用透明前景與背景配合做出景物融合效果。DEMO在此。

橫向捲軸的視差滾動。DEMO在此。

視差滾動其實有很明顯的缺點，就是不適合在內容豐富的網站裡面使用，往往會把網頁配置弄得讓人昏頭轉向，失去焦點。如果是大型網站或入口網站，耐用度會下降，SEO也會受到影響。

視差滾動如同這篇所述，一般比較適合展示性質的單元活動或宣傳。以及吸引使用者目光為主的產品行銷網頁。但是在我練習與實作視差捲動的網頁時，我發現這個技術也是個可以讓前端工程師獲益良多的東西。因為在實作的過程中，你會手賤地想要東加一點特效西加一點動畫，最後就學了一大堆CSS與Javascript的旁門左道 :P

前一陣子在PTT與臉書上都看到一個非常有趣的視差捲動手法，是純粹使用CSS的特殊作法。由於傳統的視差捲動都是使用Javascript對onScroll事件做出處理，所以能用純CSS的手法達成就非常吸引人。這篇文章相信很多人都看過：

Pure CSS parallax scrolling websites

這個作法的妙處在於它使用了CSS3的perspective來做3D變形（這裡有w3c schools的展示網頁）的效果。由於perspective主要作用於子元素上，我們就能用簡單的transform: translateZ將圖層往前或往後挪移，而往前的圖層的捲動速度會變得較快，向後的圖層因為距離我們的螢幕較遠，所以捲動的速度變慢。捲動視差的效果就這麼做出來了。

而因為圖層挪近挪遠的關係，他的大小也會跟著變動，因此要使用scale參數把拉近自己的圖層縮小，挪遠的圖層放大，這樣才能確定圖層能夠填滿左右邊界，以及鑲嵌上的圖形不會變形。

下面就是一個從原本的DEMO網頁拿來的CSS範例：

/* Parallax base styles */ .parallax { height: 500px; /* fallback for older browsers */ height: 100vh; overflow-x: hidden; overflow-y: scroll; -webkit-perspective: 300px; perspective: 300px; } .parallax__group { position: relative; height: 500px; /* fallback for older browsers */ height: 100vh; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .parallax__layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(.7); transform: translateZ(90px) scale(.7); } .parallax__layer--base { -webkit-transform: translateZ(0); transform: translateZ(0); } .parallax__layer--back { -webkit-transform: translateZ(-300px) scale(2); transform: translateZ(-300px) scale(2); } .parallax__layer--deep { -webkit-transform: translateZ(-600px) scale(3); transform: translateZ(-600px) scale(3); } .parallax__group { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }

這個作法有趣的地方是他極大利用了CSS3的新屬性，所以我們不用JavaScript來操作各個圖層的滾動速度，這樣就能避免因為onScroll事件的頻率與瀏覽器repaint事件不同調造成的跳格問題（雖然這能透過requestAnimationFrame來減輕症狀）。但在加了一堆有的沒的特效之後一樣會跳格。

不過純CSS製造滾動視差這個作法還是有幾種致命問題：

天殺的IE6/7/8/9/10/11都不支援perspective，所以碰到IE只好投降乖乖用JavaScript來實作parallax。

在不同的瀏覽器的perspective也沒有統一的標準，所以在Chrome等webkit系上看到的效果會與Firefox等gecko系的瀏覽器不同，尤其是捲動到最底下，能看到的東西有很大的誤差，Firefox會吃掉一部分最底下的物件，必須多加一些DOM元素來撐開。

在最上層的DIV元素不能再加入其他兄弟姊妹DIV，加了之後整頁會無法滾動。

雖然這個作法的缺點頗多，但是依然是一個美麗而優雅的解法。下面就是我依照該概念實作出來的習作頁面，有興趣的人可以開出來玩玩看（IE無效）：

http://neversay.github.io/parallax/homework1.html

Happy Coding Day!!

習作 1-1 純CSS視差滾動設計(Pure CSS Parallax design)

習作 1-2 視差滾動設計與 requestAnimationFrame

習作 1-3 視差滾動設計與變換特效

習作 1-4 視差滾動設計與淡入淡出特效