AutoDemo をテンプレートにして作成

開始行:
*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 フ... ~ ***HTMLのカスタマイズ あなたの html ファイルに demo.js を読み込む指示が必要です... <script src="js/demo.js" defer></script> ~ ***demo.js のカスタマイズ あなたのサイトに合わせて demo.js をカスタマイズして下さい。 -設定項目１ 自身のサイトの構成に応じて、遷移させたいページの順に、以... 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.p... ~ ***付記：スクリプトにおける変数・関数 -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, t... document.body.addEventListener('mousemove', ResetTimer,... window.addEventListener('resize', ResetTimer, true); window.addEventListener('scroll', ResetTimer, true); /... timer_1 = window.setInterval(ElapsedTimeCheck, 500); //... -ResetTimer() マウスイベントのリスナー（都度タイマーをリセット） -ElapsedTimeCheck() 経過時間の計測（0.5秒ごとに呼ばれます） -DemoScroll() 1pxスクロール（デモの際 10ms ごとに呼ばれます） -MoveToNextPage 次のページへの遷移 ~ ~

終了行:
*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 フ... ~ ***HTMLのカスタマイズ あなたの html ファイルに demo.js を読み込む指示が必要です... <script src="js/demo.js" defer></script> ~ ***demo.js のカスタマイズ あなたのサイトに合わせて demo.js をカスタマイズして下さい。 -設定項目１ 自身のサイトの構成に応じて、遷移させたいページの順に、以... 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.p... ~ ***付記：スクリプトにおける変数・関数 -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, t... document.body.addEventListener('mousemove', ResetTimer,... window.addEventListener('resize', ResetTimer, true); window.addEventListener('scroll', ResetTimer, true); /... timer_1 = window.setInterval(ElapsedTimeCheck, 500); //... -ResetTimer() マウスイベントのリスナー（都度タイマーをリセット） -ElapsedTimeCheck() 経過時間の計測（0.5秒ごとに呼ばれます） -DemoScroll() 1pxスクロール（デモの際 10ms ごとに呼ばれます） -MoveToNextPage 次のページへの遷移 ~ ~

ページ名: