Scroll In

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。

スタイルシートで画面右外に表示してあるオブジェクトを左端までスクロールさせるためのDynamicHTML(DOM+JavaScript)です。ループをしないものの、Internet ExplorerのMARQUEE要素に似た動作をします。スクリプトはscriptフォルダにあるものとして記述しています。

Sample

スクロールインします。クリックでサンプルの再表示ができます。

<div id="scroll" style="position:relative; left:100%;">スクロールインします。</div>

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。

ここからスクリプトをファイルに保存して、<HEAD>～</HEAD>内に上記のように記述してスクリプトを読み込ませます。

スクリプトは<BODY>のonload属性で実行します。2番目のパラメータが処理タイミング（ミリ秒）です。なお、スクロールバーを表示しないようにするには、スクロールするように指定した要素の親要素にoverflow:hiddenを指定しておきます。