http://imakewebthings.github.com/deck.js/
deck.js 是最近很受歡迎的 slide 製作方式，使用 HTML 5 的架構來製作投影片，只要載入他的核心 JavaScript 以及布景的 CSS，就可以構成最陽春的 slide 版本，他另外提供了一些用於場景變換的 transition 以及 extension，搭配使用就有很好的轉場效果，簡單介紹一下他的使用方式。
場景變換
目前官方提供了 4 個場景。
neon
none
swiss
web-2.0
只要 include 該同名的 JavaScript 以及 CSS，程式會自己偵測運行。
Transition
目前官方提供了三種特殊變換方式，只要載入同名的 CSS 檔案便可以使用。
- fade - 淡入淡出
- horizontal-slide - 平行切換
- vertical-slide - 垂直切換
Extension
- deck.goto: 按下 g 之後，可以輸入數字前往指定的 slide 頁面
- deck.hash: 將每個有指定 id 的 slide 於網址後方加入 anchor，這樣可以便於提供別人某個指定的網址，以觀看指定的 slide 頁面
- deck.menu: 按下 m 之後，可以將所有的 slide 切換為縮圖選擇模式（大推）
- deck.navigation: 增加可以點選左右切換頁面的按鈕
- deck.status: 呈現目前以及所有頁面的數字編號
相關的使用方式都在這邊：http://imakewebthings.github.com/deck.js/docs/
直接用實際的例子一步一步來完成投影片
這是最基本的 HTML 5 架構，現在要來 include 我需要的格式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>my first deck.js slide</title> </head> <body> </body> </html>
完成了初步的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my first deck.js slide</title>
<!-- core CSS -->
<link rel="stylesheet" type="text/css" href="css/deck/deck.core.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.hash.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.navigation.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.menu.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.status.css">
<!-- theme and transition CSS -->
<link rel="stylesheet" type="text/css" href="css/deck/web-2.0.css">
<link rel="stylesheet" type="text/css" href="css/deck/fade.css">
<!-- include js -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/deck/deck.core.js"></script>
<script type="text/javascript" src="js/deck/deck.hash.js"></script>
<script type="text/javascript" src="js/deck/deck.navigation.js"></script>
<script type="text/javascript" src="js/deck/deck.menu.js"></script>
<script type="text/javascript" src="js/deck/deck.status.js"></script>
<script type="text/javascript" src="js/deck/modernizr.custom.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
</head>
<body class="deck-container">
<!-- navigation extension -->
<a href="#" class="deck-prev-link" title="Previous">←</a> <a href="#" class="deck-next-link" title="Next">→</a>
<!-- status extension -->
<p class="deck-status"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span> </p>
</body>
</html>
我們指定了 .slide 給 deck 辨別，所以所有 class 等於 deck.js 的都會視為投影片，在同一個頁面你想要訊息依次出現的話，只要使用巢狀的結構，將所有內容加上 slide 的 class 屬性 就可以達成，使用一些 HTML 語法會產生不同的預設 layout，如 h1 - h6、pre、cite 等等，也可以搭配自己設計的 CSS 來布置你要的樣式，是不是很有趣呢。
沒有留言:
張貼留言