/ deck.js

[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 一律是以你前端看到的頁碼數字來傳入,以免有所誤差。