← designg.info トップページに戻る(文字を中心にしたページ)← designg.info トップページに戻るdesigng.info トップに戻る→HTML トリック リスト一覧→ページにスパイス
サイトマップへ
サイトの使い方
カラフル・セレクティブその他(リンクなど)コミュニケーション(掲示板・ウェブログ)ダウンロードイントロデュースサイトのカラーリングアイディアノート ページにスパイス
表示編2と3ではジャバスクリプトを使ってスパイスを紹介しました。
ここでも使ってみます。
今度はページのスクロール。文章や説明といった、「縦に長い」ページはこの業を使って、自動でスクロールさせておけば、訪れた方も楽にブラウジングが出来ます。

画像データを一定時間ごとに切り替えて表示する

body?‡

<SCRIPT LANGUAGE="Javascript">
  var yPos=0;
  var yLimit=
1200;
  var timerID;

function scrollWin(){
  scroll(0,yPos);
  timerID=setTimeout("scrollWin()",
200);

  if(yPos>yLimit){
  yPos=0;
  }else{
  yPos+=
3;
  }
}
onUnload=clearTimeout(timerID);

scrollWin();
</SCRIPT>

これもジャバスクリプトを使っているわけです。では解説。今回はちょっと長くなりますが、難しくはありません。一回よく目を通してください。

まず、変更する箇所は3つだけです。

● この裏技を取り入れたいページの縦の長さ

スクロールを1回行う時間の間隔の長さ

● 一回に下にずれる分の長さ

● この裏技を取り入れたいページの縦の長さ
このテクニックを使いたいページの、「縦の長さ」のピクセル数を入力します。
3行目の「var yLimit=
1200;」の数字の部分をまずは適度な数字に置き換えましょう。

といっても、「そんなの計ったことない」という人が多いと思います。ので、算出方法を解説してあります。
こちらから>>

スクロールを1回行う時間の間隔の長さ
縦の長さを入力し終わったら、続いて7行目の、timerID=setTimeout("scrollWin()",
200);を見てください。
scrollWinの後についている数字(ここでは200)が、スクロールを1回行う時間の間隔の長さを意味します。
つまり、数が大きいほどスクロールはゆっくりと作動して、またその逆に数を少なくすると、滑らかにスクロールできるのです。
ちなみに、「数字÷1000」が秒を表しますので、ここでは「一回のスクロールを0.2秒間隔で行う」ことになります。

例)1.5秒にする場合は timerID=setTimeout("scrollWin()",1500);
また、10秒にする場合は timerID=setTimeout("scrollWin()",
10000);

● 一回に下にずれる分の長さ
3つ目に記入する場所は、スクロールする時に一回に下にずれる分の長さをピクセル単位で設定します。
11行目の yPos+=
3; の部分です。(ここでは3になっています)→一回のスクロールごとに3ピクセルずつ下に移動します
数が大きいほど、一回ごとのスクロールで大きく下にずれるので、ガバッとスクロールします。
その逆に数を好く少なくすると・・もうお分かりですね。

例)一回のスクロールを8ピクセルずつずらすときは yPos+=8;
例)また、一回のスクロールを思い切って30ピクセルずつずらすときは yPos+=
30;

 

説明が長くなりましたが、これだけの変更をしておけば、いよいよ設置完了。実際やってみると、案外、簡単です。

結果はこちらへ

この裏技を取り入れたいページの縦の長さ…算出方法

yLimitというのは、説明すると難しいので簡単に言いますが、この「裏技を取り入れるページの縦の長さ分のピクセル」、
つまり「ページの縦の長さ」の事をさします。
(正確にはスクロールの限界のことです)

といっても「縦の長さ?ピクセル?そんなの分かんない」という人のために、おおよその目安を。。

簡単な方法として、(ここではWindowsを例にたとえます)、デスクトップの何も無いところから右クリックして、現れたメニューから「プロパティ」を選びます。
プロパティーの画面が表示されたら・・、設定タブをクリック。
真ん中よりやや下、右側よりの「画面の領域」をチェックします。

ここでは横が1024ピクセルに対し、縦が768ピクセルの画面に設定されています。
次に、お使いのブラウザを立ち上げ、「最大化」します。

これを元に、縦の長さの大雑把な長さを求める式は・・・

(「縦のピクセル」×ページの画面数)+100

算出方法「画面数」というのは、あなたのページにスクロールバーがついているところを1として、キーボードの「PageDown」を押してうつっていないページがいくつ表示されるかを表す数字です。
(つまり、
ページを開いてPageDownキーを押してだいたい3回押したらページの下に来た、
という場合は画面数は「3」です。
また、3回目まで押したら前のページが途中まで見える場合、「2.5」ぐらいですね)
また、ページの縦の長さを入力する場合、やや余裕をもって入力したほうがいいので、「+100」を付け加えています。

 

→本文の説明に戻る

ページの上へ
このサイトの制作者、takkaについて。これから先にこのサイトに掲載する予定の企画やコンテンツをこのページで紹介していますインフォメーションメールの受付やオンラインの確認はこちらからどうぞサイトマップへ
コピーライト