jQueryでプレゼンテーションできる「Fathom.js」

jQueryでプレゼンテーションできる「Fathom.js」サンプル コーディングに慣れた人はパワーポイントよりもhtmlでプレゼン資料を作るほうが簡単なのではないでしょうか。
Fathom.jsを利用することで手軽にプレゼン資料を作成可能です。

使用方法 Fathom.jsからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="fathom.min.js"></script>
<script type="text/javascript">
$(function() {
$('#presentation').fathom();
});
</script>

上記を記述したら、次のルールでスライドを作成していきます。
<div id="presentation">
<div class="slide">
スライド1枚目
</div>
<div class="slide">
スライド2枚目
</div>
</div>

また、簡単にデザインを当てるには下のCSSを書いて下さい。
div.slide {
-webkit-box-shadow: 0 0 50px #c0c0c0;
-moz-box-shadow: 0 0 50px #c0c0c0;
box-shadow: 0 0 50px #c0c0c0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
height: 700px;
padding: 20px;
position: relative;
width: 900px;
}

下記のオプションもあります
[自動再生]
timeline: [ 0, 15, 30, 50 ] //各秒数を記述(設定すると手動で動きません)
[動画]vimeoのみ対応
video: { source: 'vimeo',
id: '16917950',
parent: '#vimeo', //表示したいid名
autoplay: true
}


jQueryでプレゼンテーションできる「Fathom.js」サンプル

sponsors

「jQueryでプレゼンテーションできる「Fathom.js」」をシェアする

記事作成:
記事URL:

TOP > > jQueryでプレゼンテーションできる「Fathom.js」