例えば「このページの内容をパワポっぽくスライド表示するモードが欲しい」なんていうとき、役に立つフレームワークです。
reveal.jsと何が違うの?
HTMLでプレゼンテーションのスライドを作れるJSとして、とても有名なものにreveal.jsがありますが、これはHTMLで本格的なスライドを作るためのJSなので、冒頭の用途には使いづらいです。
bespoke.jsの動作は凄く単純で、
みたいなマークアップをされているコードに対して、
といった感じにクラスを振ってくれるだけです。
var bespoke = bespoke.from("#slides"); bespoke.next();
といった感じのコードでスライドを進めることができます(bespoke-active
が切り替わる)。
フレームワークとしてはこんな感じのJSが用意されているだけで、実際にスライドをスタイルするようなCSSは用意されていません。bespoke.jsが振ってくれるCSSクラスに対して自分でスタイルする必要があります。このJSの紹介に”DIY Presentation Micro-Framework”とあるのですが、これがDIYたる所以ですかね。
なにぶんこれしか機能がないので、既存のページをパワポっぽいスライドに仕立てるのにはぴったりなのです。
あとはCSSで表示しないHTMLをdisplay:none
しておいたり、CSSの切り替わりのときのアニメーションをtransition
で仕込んだりすれば、それっぽいのができます。
既存ページをパワポっぽいスライドに仕立てるニーズがある方は、お試しを。