[JS]映画のエンドロールみたいな演出を加えるスクリプト -End Credits

普通のウェブページに、映画の終わりに流れるスタッフロールみたいな演出を加えるjQueryのプラグインを紹介します。

サイトのキャプチャ

End Credits -GitHub

End Creditsのデモ

デモではそのエンドロールをゆっくりお楽しみください。

デモのキャプチャ

デモページ

「Open Credits」をクリックすると、始まります。

まずは、タイトルとキャストがアニメーションでゆっくりと流れます。

デモのキャプチャ

エンドロールにはさまざまなコンテンツを配置できるので、本物の映画のようにかっこよく仕上げることも可能です。

デモのキャプチャ

End Creditsの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

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

Step 2: HTML

まずは、エンドロールを呼び出すボタン。

<a href="#creditos" name="creditos">Open Credits</a>

エンドロールはdiv要素などに「#credits」を付与し、その中に記述します。通常時は表示されず、ボタンをクリックをすると表示されます。

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

sponsors

top of page

©2018 coliss