Web上でプレゼン

PowerPointライクなJavascript「S5」

skuare.net

Webプレゼンテーションスクリプト

s5はWebプレゼンテーションを作成できるJavascriptです。
その上、印刷時にもレイアウトを調整してくれます。

また、なによりHTMLの書き方がわかれば簡単に作成することができるシンプルさが魅力です。

次のページからスライドの作成方法を紹介していきます。

headにCSSを埋め込む

headにJavascriptを埋め込む

ベースレイアウトの作成

<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>

アニメ−ション風表示

以下の様にulタグに指定します。
<ul class="incremental">
<li>中身</li>
</ul>

画像もできます part 1

画像をのせていく感じです(次ページでCSSを紹介)
<p class="imgcon" id="anim">
<img src="画像URI" id="me01" alt="">
<img src="画像URI" id="me02" alt="" class="incremental"> </p>

画像もできます part 2

CSSで画像を上手く重ねていきます。
なので画像はpngで透明にしておきましょう。
.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
#anim img {position: absolute; top: 42px; left: 24px;}
img#me01 {top: 0; left: 0;}
img#me02 {left: 23px;}

大事なのはベースをposition:relative;で指定して、画像を上手く重ねられるかです。

デザインが酷い?

デフォルトのデザインが正直いまいちな気もします。
一応何種類か別のデザインが下記サイトにあります。
S5 Themes

sponsors

終わり

The End
Thanks for Your visit!!

Javascriptライブラリ