プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js
Post on:2013年3月28日
複数のパネルを多彩なアニメーションで次々にスライドするMITライセンスのスクリプトを紹介します。
jQueryなどの併用はなく、単体で動作し、1KBと超軽量です。
Bespoke.jsのデモ
デモでは5種類のアニメーションでスライドします。
操作は、デスクトップだとスペースバー・矢印キー、タッチデバイスだとスワイプに対応しています。
各アニメーションの変更は下部の「Exaple Theme」から変更します。
カバーフロー
iTunesのカバーフローのようにスライドします。
クラシック
パネルを左右にスライドします、前後が半透明なのがいいですね。
キューブ
キューブ状に配置したパネルをスライドします。
カルーセル
円状に配置したパネルをスライドします。
コンカーブ
凹状に配置したパネルをスライドします。
Bespoke.jsの使い方
スライドショーの実装は簡単で、3ステップです。
Step 1: HTMLと外部ファイル
スタイルシートとスクリプトを外部ファイルとして記述し、各パネルはsection要素で実装し、articleで包みます。
スタイルシートはテーマごとに変更します。
<link rel="stylesheet" href="path/to/my/theme.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="path/to/my/script.js"></script>
Step 2: スクリプトの実行
ラッパーを指定しスクリプトを実行します。
bespoke.horizontal.from(‘article’);
Step 3: カスタマイズ
スライドショーのデッキのデザインをカスタマイズするために、classが用意されています。
- bespoke-parent
- デッキを含む親要素
- bespoke-slide
- 各スライドの要素
- bespoke-active
- アクティブなスライド
- bespoke-inactive
- アクティブではない全部のスライド
- bespoke-before
- アクティブなスライドの前の全部のスライド
- bespoke-before-n
- アクティブなスライドの前のn番目のスライド
- bespoke-after
- アクティブなスライドの後の全部のスライド
- bespoke-after-n
- アクティブなスライドの後のn番目のスライド
プラグイン
デフォルトでも充分な機能が揃っていますが、機能を更に強化するプラグインも用意されています。
- bespoke-vcr
- 録画・再生
- bespoke-bullets
- ビュレットのアニメーション
- bespoke-hash
- ハッシュのルーティング
- bespoke-loop
- プレゼンのループ
プラグインは自作して、機能を拡張することもできます。
詳しくは、下記をご覧ください。
sponsors