プレゼンテーション風表示を可能にするjavascript「s5」

近頃プレゼンをするにはPowerPointが馬鹿の一つ覚えのように使われています。
しかしWeb上では全画面を用いるような仕組みはありませんでした。
s5はWebプレゼンテーションを簡単に作成することができるJavascriptです。

使用方法
headにCSSとscriptを埋め込みます。
なおアップロードするのはuiフォルダのdefaultにあるものだけで構いません。
<link rel="stylesheet" href="http://yourdomain/slides.css" type="text/css" media="projection" id="slideProj">
<link rel="stylesheet" href="http://yourdomain/outline.css" type="text/css" media="screen" id="outlineStyle">
<link rel="stylesheet" href="http://yourdomain/opera.css" type="text/css" media="projection" id="operaFix">
<link rel="stylesheet" href="http://yourdomain/print.css" type="text/css" media="print" id="slidePrint">
<script src="http://yourdomain/slides.js" type="text/javascript"></script>
次にベースレイアウトの作成です。
<div class="layout">
<div id="controls"></div>
<div id="currentSlide"></div>
<div id="header"></div>
<div id="footer">
<h1>プレゼンタイトル名</h1>
<h2>日付など</h2>
<!-- 左下に表示されます -->
</div>
</div>
</div>

メインとなるスライドは以下のように書きます。
<div class="presentation">
<div class="slide">
<h1>スライドタイトル</h1>
<h3>見出し</h3>
</div>
<-- 作成したい枚数分 -->
</div>
以上がベースです。
その他はプレゼンテーション風表示を可能にするjavascript「s5」サンプルでご覧下さい。

2007年08月23日

前の記事：テキストボックスを伸縮させるjavascript「resizeTextarea」
次の記事：dojo 3D chart

関連記事

• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 奥から手前にズームするJavaScript「Spacegallery.js」
• amazonライクにぐるぐる回るJavaScript「3D Image Carousel」
• フォームで全自動でフリガナを付与するJavaScript「AutoKana.js」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」