[JS]映画のエンドロールみたいな演出を加えるスクリプト -End Credits
Post on:2014年6月25日
普通のウェブページに、映画の終わりに流れるスタッフロールみたいな演出を加えるjQueryのプラグインを紹介します。
![サイトのキャプチャ](/wp-content/uploads-201402/2014062501-02.png)
End Creditsのデモ
デモではそのエンドロールをゆっくりお楽しみください。
![デモのキャプチャ](/wp-content/uploads-201402/2014062501-01.png)
「Open Credits」をクリックすると、始まります。
まずは、タイトルとキャストがアニメーションでゆっくりと流れます。
![デモのキャプチャ](/wp-content/uploads-201402/2014062501-02.png)
エンドロールにはさまざまなコンテンツを配置できるので、本物の映画のようにかっこよく仕上げることも可能です。
![デモのキャプチャ](/wp-content/uploads-201402/2014062501-03.png)
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