TVにあってWebサイトにはないもの。それは・・・スタッフロール!それに気づいてからはや数年・・・。そのjQueryプラグインを作成しました。
概要
Webサイトにもスタッフロールが流れたら面白いなーと思い作ったjQueryプラグインです。レイアウト2種類+縦or横に流れるorフェードバージョン+おまけが入っています。動作は現時点のデスクトップの最新ブラウザで確認しています。
デモ一覧
タイプ1:縦レイアウト+縦スクロール
役職と名前が縦に並んでいるバージョンを縦にスクロールしていくバージョンです。
タイプ2:縦レイアウト+フェード
役職と名前が縦に並んでいるバージョンをフェードで表示していくバージョンです。
タイプ3:縦レイアウト+横スクロール
役職と名前が縦に並んでいるバージョンを右から左に表示していくバージョンです。
タイプ4:横レイアウト+縦スクロール
役職と名前が横に並んでいるバージョンを縦にスクロールしていくバージョンです。
タイプ5:横レイアウト+フェード
役職と名前が横に並んでいるバージョンをフェードで表示していくバージョンです。
タイプ6:横レイアウト+横スクロール
役職と名前が横に並んでいるバージョンを右から左に表示していくバージョンです。
タイプ7(おまけ):名前が縦に並んでいるバージョンを奥に流れていくスターウォーズっぽいバージョンです。
使い方
ファイルの読み込み
staffroll.jsとstaffroll.cssを読み込みます。
<link rel="stylesheet" href="staffroll.css">
<script type="text/javascript" src="staffroll.js"></script>
中のレイアウトはCSSを調整するといろいろいろできると思います。
プラグインの読み込み
JavaScriptを実行します。
<script type="text/javascript">
$(function(){
$('#staffRoll').staffRoll();
});
</script>
オプション
オプションは以下の設定ができます。デフォルトでは以下の設定です。
type : '1', //タイプの選択
allTime : 3000,//スクロールのかかる時間(スクロールタイプのみ)
delay : 1000,//次のスクロールまでのディレイ時間
fadeTime : 4000//フェードにかかる時間(フェードタイプのみ)
HTML
<div id="staffRoll">
<div class="section whole">
<h2>原作</h2>
<ul>
<li>かしゅう</li>
</ul>
</div>
<div class="section>
<h2>原案</h2>
<ul>
<li>かしゅう</li>
</ul>
</div>
~~中略~~
<div class="section whole end">
<p>完<p>
</div>
id=”staffroll”で全体を囲みます。そして一つ一つの職業をclass=”section”で囲みます。
この際、class=”section whole“とするとその職業はウインドウに対して高さ100%のエリアになります。
最後にclass=”section whole end“とするとここのエリアでストップし完となります。(スターウォーズ風のものは全部消えていきます)
ただWebサイト上でどこに入れるかは悩みどころです。TVや映画だとお話の終わりですがWebサイトだと特に終わりがないので・・・。
全部のページ見たらとか最奥のページにたどり着いたらとか、フォームでお買い物したら流すとか・・・。
というわけで、スタッフロールを流せるjQueryプラグインでした。
コメント