icon_topicsテクニック

HTMLページで映画のスタッフロールを再現できるプラグイン「End Credits」

HTMLページに映画のスタッフロールのような演出を追加するjQueryプラグイン「End Credits」のご紹介です。

詳細はデモページを御覧下さい。

スクリーンショット 2014-06-30 13.45.13

「Open Credits」をクリックするとスタッフロールのようなものが表示されます。

実装方法は下記になります。
1・jQueryとEnd Creditsを読み込みます

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="static/endcredits.js"></script>

2・スタッフロールを呼び出すボタンを作成します

 <a class="btn btn-lg btn-success" href="#creditos" name="creditos">テキストでも画像でも大丈夫です</a>

3・スタッフロール内のコンテンツを作成します

<div id="credits">エンドロールに表示するコンテンツ</div>

比較的簡単に実装することが出来ます。
「endcredits.js」内の24〜29行目にオプションらしきものが記述されているので、そこを変更することでアニメーションの速度やアニメーション方法を変更できそうです。

その他にライブラリのカスタマイズが必要ですが、例えば動画プレイヤーをページに表示しておき、再生が終了したら画面全体にスタッフロールが流れるといった挙動も出来るかもしれません。
動画プレイヤーから再生完了のイベントを取り出してEnd Creditsを起動できるかが鍵ですね。

頑張ればスターウォーズの冒頭のようなロールも作成できそうですね。


End Credits in jQuery(GitHub)
Daniel Malkafly様(プロフィールページ