59・60のアニメーションのスピードを変更

無料テンプレート 59・60 のブロックの増やし方に続いて、他の箇所の編集方法を解説します。

scroll action on/off のテキストを変更

ワンページスクロールの ON/OFF を切り替えるボタンのテキストは変更できます。

OFF ボタンのテキストは、index.html で編集します。

<div id="on_off"><div id="off_button">scroll action off</div></div>

青字が変更箇所です。

ON ボタンのテキストは、script.js を編集します。

以下は、script.js の 26行目に記載されています。

$('#on_off').html('<div id="on_button">scroll action on</div>');

青字が変更箇所です。

アニメーションのスピードを変更

アニメーションのスピードは、script.js の 5行目～ 12行目で変更できます。

var title_speed = 700; // タイトル（700）
var h1_p_speed = 500; // 内容（500）
var footer_speed = 700; // フッター（700）
var one_page = 500; // ワンページスクロール（500）
var one_page_touch = 400; // ワンページスクロール・iPhone/iPad（400）
var nav_button = 500; // ナビボタンスクロール（500）
var nav_open_close = 200; // ナビオープン（200）
var on_off_hover = 300; // hover（300）

青字がスピードの設定です。

1000 = 1秒です。

// の後は、処理に影響しないコメント（メモ書き）です。括弧内には、初期設定をメモしておきました。コメントは削除しても構いません。

var title_speed は、タイトルの背景と文字が表示されるスピードです。最初に背景が表示されて、その後に文字が表示される設定です。

var h1_p_speed は、ブロック内の見出し（<h1>タグ）と段落（<p>タグ）が表示されるスピードです。最初に見出しが表示されて、その後に段落が表示される設定です。

var footer_speed は、フッターの段落が表示されるスピードです。フッターには見出しがないので、別の設定を設けました。

var one_page は、「マウスホイール」と「テンキーの上下キー」によるワンページスクロールのスピードです。ナビゲーションの「上下ボタン」の設定も含まれます。

var one_page_touch は、iphone や iPad の「上下のフリック」によるワンページスクロールのスピードです。

初期設定では、タッチ操作の方が少し早い 400 ミリ秒に設定されています。

var nav_button は、ナビゲーションの丸ボタンをクリック（またはタップ）した時のスクロールのスピードです。トップへ戻るボタンの設定も含まれます。

var nav_open_close は、ナビゲーションを開閉するスピードです。

var on_off_hover は、ワンページスクロールの ON/OFF を切り替えるボタンに hover した時に透過するスピードです。

ゆったりと見せたいコンテンツの場合は、全体的にスピードを遅く（数値を大きく）してみてください。

キビキビとした印象にしたい場合は、初期設定を利用するか、更にスピードを早く（数値を小さく）してみてください。

当サイトの無料テンプレートがお役に立ちましたら幸いです。