LogoMark.png

AutoDemo の変更点

#author("2021-09-25T11:07:33+09:00;2020-02-18T19:11:09+09:00","default:inoue.ko","inoue.ko")
*AutoDemo
Web作品展示用 スクリプト
~

マウス操作のない状態が一定時間経過すると当該ページの自動スクロールを開始し、スクロールが終了すると次のページへ遷移する・・というスクリプトです。

マウスを動かすとデモのモードを離脱して通常の状態に戻るので、基本的には普通に閲覧が可能です。あくまでも操作のない状態が続くと、勝手にデモに移行する・・という、追加的な存在です。
&small(遷移するすべての html ファイルがフォルダ内の同一階層に存在することが前提です。);

以下、デモです。５秒間何もしないと自動スクロールを開始します。
-''DEMO''：https://koichi-inoue.github.io/AutoDemo/
-''CODE''：https://github.com/koichi-inoue/AutoDemo
~

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

~

***HTMLのカスタマイズ
あなたの html ファイルに demo.js を読み込む指示が必要です。遷移させたいすべてのHTMLファイルの <head> に以下のコードを追加して下さい。
 <script src="js/demo.js" defer></script>
~

***demo.js のカスタマイズ
あなたのサイトに合わせて demo.js をカスタマイズして下さい。
-設定項目１
自身のサイトの構成に応じて、遷移させたいページの順に、以下の「ファイル名（〜.html）」を書き換えて下さい。ページ数は任意で、追加可能です。
 FileName[0] = "index.html";
 FileName[1] = "about.html";
 FileName[2] = "gallery.html";
 FileName[3] = "links.html";
 //      以下同様　   ：

-設定項目２
マウス操作がなくなってからデモに移行するまでの「経過時間」を設定して下さい。単位は「ミリ秒」です。
 let ElapsedTime = 5000; // デフォルトは５秒

-設定項目３
スクロールのフレームインターバルを設定して下さい。数字が小さいほどスクロールが早くなります。
 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
次のページへの遷移



~
~