[JS]着眼点が面白い！スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue

オートキューやテレプロンプターのように、文章や歌詞、台詞、記事、原稿などのテキストを順番にスクロールして表示させるjQueryのプラグインを紹介します。

このままでの使用用途は限定されていますが、面白いことができそうな予感がします。

Scrollocue -GitHub

• Scrollocueのデモ
• Scrollocueの使い方

Scrollocueのデモ

デモではパラグラフが垂直に配置されており、それぞれがスクロールのキューになります。

デモページ

任意の場所をクリックすると、次の位置までスクロールします。

最初のパラグラフに移動して、ハイライト表示

操作は他にも、スペースバー、矢印キーに対応しています。

2番目のパラグラフに移動して、ハイライト表示

Scrollocueの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script src="js/jquery-2.0.3.js"></script>
<script src="js/scrollocue.js"></script>

Step 2: HTML

スクロールのキューとなるパラグラフを配置し、適用する範囲を指定できるようラッパーで包みます。
適用範囲のラッパー：#container

<div id="container">

  <h1>Scrollocue</h1>

  <div class="section meta">
      <p>A simple autocue/teleprompter system.</p>
      <p>Just use the arrows or spacebar to scroll.</p>
      <p>Now, let's walk through some text.</p>
  </div>

  <div class="section title">
      <p>Around the World in 80 Days</p>
      <p>Jules Verne</p>
  </div>

</div>

Step 3: JavaScript

jQueryのセレクタで適用のラッパーを指定し、スクリプトを実行します。

 <script>
  $('#container').scrollocue();
 </script>