首先，你需要裝我所寫得 html5-deckjs，當然，因為我是好人，所以我做了一鍵安裝。
$ wget --no-check-certificate https://github.com/hinablue/html5-deckjs/raw/master/install.sh -O - | sh
$ cd ~/html5-deckjs
$ ./html5-deckjs.sh To create a new project, enter a new directory name: _
當然，你也可以複雜一點。
$ git clone git://github.com/hinablue/html5-deckjs.git
$ cd html5-deckjs
$ ./update.sh
$ ./html5-deckjs.sh To create a new project, enter a new directory name: _
你輸入完你所要建立的投影片名稱之後，回到上一層目錄（或是家目錄，如果你使用一鍵安裝的話），然後切換到你剛剛打的投影片名稱目錄，裡面就是已經建立好的投影片模組了。打開 index.html 就可以編輯你的投影片了。當然，你要編輯的是 HTML 的原始碼（因為我是原始碼控啊）。
然後，我附帶了一個我自己做的 sass 效果樣式。檔案在 /sample/_special.sass 這裡，要用的話請自行拷貝到你的投影片資料夾的 /sass 底下，使用 @import 的方式拉進來就可以了。
這個東西要幹麼呢？我們先去 deck.js 的官方網站看一下：How Does It Work? 然後你可以按方向鍵上下或是左右來換頁，你會發現，右邊的區塊文字會變色。然後底下會有 status 跟 navigation 淡淡地冒出來。是的，這個東西就是要讓你可以快速的把這種效果做出來。
原理是這樣：
淡出或是淡入也是一樣的道理（請使用 CSS3）。
<strong><font size="5" color="#ff0000">UPDATE:</font></strong> 由於我龜毛的關係，所以我改寫了那四個 @mixin！
* on-slide-hide($page, $nth_child, $child, $parent_id) 傳入第 N-th 頁，第 N-th 個子元件，子元件所屬選擇器，父元件。
* on-slide-show($page, $nth_child, $child, $parent_id) 傳入第 N-th 頁，第 N-th 個子元件，子元件所屬選擇器，父元件。
* on-slide-hide-and-show($hide_page, $show_page, $nth_child, $child, $parent_id) 傳入從第 N-th 頁開始，第 M-th 頁結束，第 N-th 個子元件，子元件所屬選擇器，父元件。
* focus-on-slide($page, <strong><font color="#ff0000">$element, $trigger,</font></strong> $parent_id) 傳入第 N-th 頁，觸發（@extend）的選擇器，子元件，父元件。
看起來沒差，但是 $child 跟 $parent_id 可以用預設值帶入喔！
範例說明：
* +on-slide-hide(1, 1, "footer > p", "#css-transition") 第一頁，在 #css-transition 底下的 footer > p:nth-child(1) 隱藏。
* +on-slide-hide(2, 1, "footer > p", "#css-transition") 第二頁，在 #css-transition 底下的 footer > p:nth-child(1) 顯示。
* +on-slide-hide-and-show(1, 5, 1, "footer > p", "#css-transition") 第一到第四頁，在 #css-transition 底下的 footer > p:nth-child(1) 隱藏。直到第五頁，在 #css-transition 底下的 footer > p:nth-child(1) 顯示。
* +focus-on-slide(1, "span.css-transition", ".text-color-red", "#css-transition") 第一頁，在 #css-transition 底下的 span.css-transition 引入（@extend）.text-color-red 的選擇器屬性。
有沒有實際的例子？
.span-on-the-fly
color: red
/* 這裡就是預設值
$on-slide-parent: "#first-look-sass"
$on-slide-child: "footer > p"
.on-slide-1 #first-look-sass
span.sass-brackets
@extend .span-on-the-fly
span.sass-semicolon
@extend .span-on-the-fly
span.nested-property
@extend .span-on-the-fly
footer
> p:first-child
+single-transition('opacity', 1s, linear, 0.5s)
> p:nth-child(2)
+opacity(0)
@import _special
.span-on-the-fly
color: red
+focus-on-slide(2, ".span-on-the-fly", "span.sass-brackets" "span.sass-semicolon" "span.nested-property")
+on-slide-hide(2, 2)
+on-slide-show(2, 1)
所有的 child 都可以支援 lists 與 string 的輸入，我上述的例子就是使用 lists 輸入。你把他當作是一個空白分隔的陣列就好了。<strong><font color="#ff0000">我加上了預設值，所以，可以不用一直重複寫 child 跟 parent 的部份，大量縮減寫錯的機會跟 Copy/Paste 的時間。</font></strong><del>所以，我做了四種 @mixin 來幫你作這件事情。 </del><ul><li><del>on-slide-hide($page, $nth_child, $child, $parent_id) 傳入第 N-th 頁，第 N-th 個子元件，子元件所屬選擇器，父元件。 </del></li><li><del>on-slide-show($page, $nth_child, $child, $parent_id) 傳入第 N-th 頁，第 N-th 個子元件，子元件所屬選擇器，父元件。 </del></li><li><del>on-slide-hide-and-show($hide_page, $show_page, $nth_child, $child, $parent_id) 傳入從第 N-th 頁開始，第 M-th 頁結束，第 N-th 個子元件，子元件所屬選擇器，父元件。 </del></li><li><del>focus-on-slide($page, $trigger, $element, $parent_id) 傳入第 N-th 頁，觸發（@extend）的選擇器，子元件，父元件。</del></li></ul><del> 範例說明： </del><ul><li><del>+on-slide-hide(1, 1, "footer > p", "#css-transition") 第一頁，在 #css-transition 底下的 footer > p:nth-child(1) 隱藏。</del></li><li><del>+on-slide-hide(2, 1, "footer > p", "#css-transition") 第二頁，在 #css-transition 底下的 footer > p:nth-child(1) 顯示。 </del></li><li><del>+on-slide-hide-and-show(1, 5, 1, "footer > p", "#css-transition") 第一到第四頁，在 #css-transition 底下的 footer > p:nth-child(1) 隱藏。直到第五頁，在 #css-transition 底下的 footer > p:nth-child(1) 顯示。</del></li><li><del>+focus-on-slide(1, ".text-color-red", "span.css-transition", "#css-transition") 第一頁，在 #css-transition 底下的 span.css-transition 引入（@extend）.text-color-red 的選擇器屬性。</del></li></ul><del>有沒有實際的例子？ </del><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><del>.span-on-the-fly </del><del> color: red </del><del>.on-slide-1 #first-look-sass </del><del> span.sass-brackets </del><del> @extend .span-on-the-fly </del><del> span.sass-semicolon </del><del> @extend .span-on-the-fly </del><del> span.nested-property </del><del> @extend .span-on-the-fly </del><del> footer </del><del> > p:first-child </del><del> +single-transition('opacity', 1s, linear, 0.5s) </del><del> > p:nth-child(2) </del><del> +opacity(0)</del></blockquote><del>這是一個簡單的 SASS 範例。然後換用我的 @mixin 就變成了：</del><del> </del><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><del>@import _special </del><del>.span-on-the-fly </del><del> color: red </del><del>+focus-on-slide(2, ".span-on-the-fly", "span.sass-brackets" "span.sass-semicolon" "span.nested-property", "#first-look-sass") </del><del>+on-slide-hide(2, 2, "footer > p", "#first-look-sass") </del><del>+on-slide-show(2, 1, "footer > p", "#first-look-sass")</del></blockquote> <del>打完收工。
所有的 child 都可以支援 lists 與 string 的輸入，我上述的例子就是使用 lists 輸入。你把他當作是一個空白分隔的陣列就好了。</del>
<strong><font size="6">BUT!</font></strong>
你一定會發現，我上面是寫 .on-slide-1 可是底下卻是傳入 2！原因在於，我們在前端看到的頁碼如果是 2 的話，那麼我在 CSS 的地方，就是要用頁碼減 1 的方式來寫，為了避免要去計算頁碼的麻煩，所以我的 @mixin 一律是以你前端看到的頁碼數字來傳入，以免有所誤差。