[deckjs] deck.js 投影片加強版

首先，你需要裝我所寫得 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 淡淡地冒出來。是的，這個東西就是要讓你可以快速的把這種效果做出來。

原理是這樣：

每次換頁，會將你的 slide 的 id 轉換到 hash 上面去（請看官方網站換頁時的網址列）。

然後（預設值）會在你的 .deck-container 的父元件上面，加入 .on-slide-X 的類別，X 是頁碼（由 0 開始的頁碼數字）。

所以我們就可以利用 CSS 來作這件事情（讓每次換頁，針對不同的子元件，套用不同的效果）。

``` css .on-slide-2 #css-transition span.css-transition { color: red; }


淡出或是淡入也是一樣的道理（請使用 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 一律是以你前端看到的頁碼數字來傳入，以免有所誤差。

You might also like...