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

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

使用方法
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」サンプルでご覧下さい。

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:dojo 3D chart