このWebサイトを作ったのは私だと主張するためのスタッフロールを流せるjQueryプラグインを作った

タイプ1：縦レイアウト＋縦スクロール

役職と名前が縦に並んでいるバージョンを縦にスクロールしていくバージョンです。

• デモ１

タイプ2：縦レイアウト＋フェード

役職と名前が縦に並んでいるバージョンをフェードで表示していくバージョンです。

• デモ2

タイプ3：縦レイアウト＋横スクロール

役職と名前が縦に並んでいるバージョンを右から左に表示していくバージョンです。

• デモ3

タイプ4：横レイアウト＋縦スクロール

役職と名前が横に並んでいるバージョンを縦にスクロールしていくバージョンです。

• デモ4

タイプ5：横レイアウト＋フェード

役職と名前が横に並んでいるバージョンをフェードで表示していくバージョンです。

• デモ5

タイプ6：横レイアウト＋横スクロール

役職と名前が横に並んでいるバージョンを右から左に表示していくバージョンです。

• デモ6

タイプ7（おまけ）：名前が縦に並んでいるバージョンを奥に流れていくスターウォーズっぽいバージョンです。

• デモ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“とするとここのエリアでストップし完となります。（スターウォーズ風のものは全部消えていきます）