[JS]映画のエンドロールみたいな演出を加えるスクリプト -End Credits
Post on:2014年6月25日
sponsors
普通のウェブページに、映画の終わりに流れるスタッフロールみたいな演出を加えるjQueryのプラグインを紹介します。
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
