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

##概要
Webサイトにもスタッフロールが流れたら面白いなーと思い作ったjQueryプラグインです。レイアウト2種類+縦or横に流れるorフェードバージョン＋おまけが入っています。動作は現時点のデスクトップの最新ブラウザで確認しています。

##デモ一覧

• タイプ1：縦レイアウト＋縦スクロール
  役職と名前が縦に並んでいるバージョンを縦にスクロールしていくバージョンです。
  デモ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"とするとここのエリアでストップし完となります。（スターウォーズ風のものは全部消えていきます）

ただWebサイト上でどこに入れるかは悩みどころです。TVや映画だとお話の終わりですがWebサイトだと特に終わりがないので・・・。 全部のページ見たらとか最奥のページにたどり着いたらとか、フォームでお買い物したら流すとか・・・。

というわけで、スタッフロールを流せるjQueryプラグインでした。

##転載元の記事
このWebサイトを作ったのは私だと主張するためのスタッフロールを流せるjQueryプラグインを作った｜WEB Drawer｜web制作に関するネタの引き出しサイト