PAGES

GUIDE

DATA

AutoDemo

Web作品展示用 スクリプト

ページを操作しない状態が一定時間経過すると、当該ページの自動スクロールがはじまり、スクロールが終了すると次のページへ遷移するスクリプトです。
 マウスを動かすとデモモードを離脱して通常の状態戻るので、基本的には普通に閲覧が可能です。あくまでも操作のない状態が続くと、勝手にデモに移行する・・という、追加的な存在です。

以下、デモです。5秒間何もしないと自動スクロールを開始します。

使い方

  • 上記 CODE から丸ごとダウンロードして下さい。
  • 必要なのは js フォルダの中にある demo.js のみです。それ以外のファイルはすべて動作確認用の単なるサンプルなので不要です。
  • あなたの Webサイトフォルダの中の適当な場所(例えば js フォルダ)に demo.js を投入して、以下のカスタマイズを行なって下さい。
  • プレーンな JavaScript で書いているので、jQuery は不要です。

HTMLのカスタマイズ

あなたの html ファイルに demo.js の読み込み指示が必要です。すべてのHTMLファイルの <head> に以下のコードを追加して下さい。

<script src="js/demo.js"></dcript>


demo.js のカスタマイズ

あなたのサイトに合わせて demo.js をカスタマイズして下さい。

  • 設定項目1
    自身のサイトの構成に応じて、遷移させたいページの順に、以下の「ファイル名(〜.html)」を書き換えて下さい。ページ数は任意で、追加可能です。
    FileName[0] = "index.html";
    FileName[1] = "about.html";
    FileName[2] = "gallery.html";
    FileName[3] = "links.html";
    //      以下同様    :
  • 設定項目2
    マウス操作がなくなってからデモに移行するまでの「経過時間」を設定して下さい。単位は「ミリ秒」です。
    let ElapsedTime = 5000; // デフォルトは5秒
  • 設定項目3
    スクロールのフレームインターバルを設定して下さい。数字が小さいほどスクロールが早くなります。
    let ScrollInterval = 10; // デフォルト 10ミリ秒

留意事項

  • iPhone の Safari、Mac の Firefox, Chrome, Safari で動作確認しています。
  • demo.js には以下の関数が存在します。あなたのオリジナル関数と名前が重複しないことを確認して下さい。
    • ResetTimer():マウスイベントのリスナー(都度タイマーをリセット)
    • ElapsedTimeCheck():経過時間の計測(0.5秒ごとに呼ばれます)
    • DemoScroll():1pxスクロール(デモの際 10ms ごとに呼ばれます)
    • MoveToNextPage():次のページへの遷移
  • document.body.scrollHeight, window.innerHeight, window.pageYOffset を計測して、スクロールの終了を判定しています。あなたのサイトにこれらを動的に変更するスクリプトが存在すると誤動作する可能性があります。

スクリプトの説明


以下、説明は書きかけです。

  • Global Values
    • let demo = false;
    • let startTime;
    • let currentTime;
    • let timer_1;
    • let timer_2;
    • let scrollSize;
  • window.onload = function(){}
     startTime = new Date();
     document.body.addEventListener('mouseup', ResetTimer, true);
     document.body.addEventListener('mousemove', ResetTimer, true);
     window.addEventListener('resize', ResetTimer, true);
     window.addEventListener('scroll', ResetTimer, true);  // デモに入ると Remove される
     timer_1 = window.setInterval(ElapsedTimeCheck, 500); // 1秒:1000
  • ResetTimer()
    マウスイベントのリスナー(都度タイマーをリセット)
  • ElapsedTimeCheck()
    経過時間の計測(0.5秒ごとに呼ばれます)
  • DemoScroll()
    1pxスクロール(デモの際 10ms ごとに呼ばれます)
  • MoveToNextPage
    次のページへの遷移




Last-modified: 2019-11-22 (金) 15:09:55