プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js

複数のパネルを多彩なアニメーションで次々にスライドするMITライセンスのスクリプトを紹介します。
jQueryなどの併用はなく、単体で動作し、1KBと超軽量です。

デモのキャプチャ

Bespoke.js
Bespoke.js -GitHub

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
プレゼンのループ

プラグインは自作して、機能を拡張することもできます。
詳しくは、下記をご覧ください。

top of page

©2017 coliss