【第154 話】 JavaScript で作る美女たちのスクリーンセーバー - オリジナル★テンプレート 編 -
★ソラマメはセクシーな画像を一日じゅう垂れ流し続けてくれる素晴らしいサイトである。ブログでセクシーなボディーをもっともっと披露したければ、GIF やFLASH などという俗世のものには手をつけず、Ajax全盛の昨今、Java スクリプトの力を借りて露出マニアになりましょう。- by Lovely Wolf -
★読者のリクエストにお応えして、久しぶりに90 秒シリーズでもやってみる。
★まずは、だれでも簡単に作れるオリジナルテンプレートをつかって解説してあげよう。
・・・サンプルテンプレートは、3カラム(サイドバー右左) だ。横幅を拡げる方法など、スタイルシートの設定については、以下のバックナンバーをどうぞ。
【ソラマメのオリジナル★テンプレートのくずし方 関連記事】
# Case 1.<WEB URL>
http://lovelywolf.slmame.com/e539026.html
# Case 2.<WEB URL>
http://lovelywolf.slmame.com/e541011.html
# Case 3.<WEB URL>
http://lovelywolf.slmame.com/e543277.html
★して、いったいどこがスクリーンセーバーなのか？と尋ねられた日にゃ、背景画像がアニメーションしてればスクリーンセーバーなのさと答えるのみ。
・・・・・・サンプルでは、トランジション効果を出すための画像を用意してみた。
★じゃぁ、アニメーションの原理とは？画像→切り替え（トランジション効果）→画像の繰り返しにすぎない。
・・・テレビの映像だって、1秒間に30 フレームの絵が順番に映ってるだけだし。
★では、本題のスクリーンセーバーの作り方に行きますか。
Tips 1. 最初に表示させる背景画像をスタイルシートに登録しておく
・・・メインの画像でおぉっ！って言わせたいなら、一番目に表示される背景画像をスタイルシートに設定しておく。これをやっておかないと、JavaScript が画像を読み込んでる間、何も表示されないダサいブログに成り下がってしまうから注意してくれ。
赤字部分を自分の画像にすれば、そのまま使えます。
/* ブログタイトル・概要 */
#banner{
background-color: #333333;
height: 500px;
/*width: 750px;*/
width: 1100px;
margin: 0px;
overflow: hidden;
background-image: url(http://img01.slmame.com/usr/lovelywolf/09041801-0.jpg);
}
Tips 2. スクリーンセーバーにする画像はすべて先読みさせておく
<body>
<frame src="http://img01.slmame.com/usr/lovelywolf/09041801-0.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041801-1.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041801-2.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041802-0.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041802-1.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041802-2.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041803-0.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041803-1.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041803-2.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041804-0.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041804-1.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041804-2.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041805-0.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041805-1.jpg" width="1" height="1"></iframe>
<iframe src="http://img01.slmame.com/usr/lovelywolf/09041805-2.jpg" width="1" height="1"></iframe>
・・・
</body>
・・・オレがよく使う200KB ほどの大きい画像は言うまでもなく、小さい画像でも先読みさせるとスムーズなアニメーションになるため、画像はすべて読み込ませておいたほうがいい。先読み中の表示サイズは、縦1px、横1px に指定しているので、意図しないところで見えてしまうようなことはない。
Tips 3. JavaScript に画像と、画像を切り替える時間を設定する
・・・サンプルでは、ファイル名に「0.jpg」が含まれている画像を7 秒間表示し、画像と画像の切り替え用画像（トランジション効果付き1.jpg、2.jpg）2 枚をそれぞれ0.5 秒ずつ、あわせて1秒間だけ表示させることでアニメーション効果を高めてみた。さらにランダム表示ではなく、シナリオどおり登録した順に表示させるようにしてみた。
・・・
赤字部分で時間(1 秒=1000 )を設定し、自分の画像にすれば、そのまま使えます。どこに書くかというと、「トップページ」「個別記事」「アーカイブ」の<body> タグ内の一番最後がいい。
なお、このスクリプトは自作したものなので、使う場合は著作権情報もコピペして記載してください。ご質問がある方は、コメント欄からどうぞ。
<body>
<script type="text/javascript">
<!--
/*--------------------------------------------------------------------------
* Blog Screen Saver, version 1.2.0
* Copyright(C)2009/* Lovely Wolf Report in SLMaMe * ALL Rights Reserved
* For details, please check the website :
http://lovelywolf.slmame.com/
*--------------------------------------------------------------------------*/
/* 数値設定 */
fist_display_time =
1000; // 最初の画像が切り替わるまでの時間(1/1000秒)
main_display_time =
7000; // 画像の表示時間(1/1000秒)
transition_time =
500; // トランジション中の画像を表示する時間(1/1000秒)
var num=0;
var imglist = new Array(
"http://img01.slmame.com/usr/lovelywolf/09041801-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041801-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041801-2.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041802-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041803-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041802-2.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041803-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041803-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041803-2.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041804-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041804-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041804-2.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041805-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041805-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041805-2.jpg"
);
if(window.addEventListener){
window.addEventListener("load", settime, false);
}
else if(window.attachEvent){
window.attachEvent("onload", settime);
}
else{
window.onload = settime;
}
function settime(){
setTimeout(imgload, fist_display_time);
}
function imgload(){
if(num < imglist.length){
document.getElementById('banner').style.backgroundImage='url("'+imglist[num]+'")';
if(imglist[num].match(/0\.jpg/)){
TimerIDS = setTimeout(imgload, main_display_time);
}
else{
TimerIDS = setTimeout(imgload, transition_time);
}
num++;
}
if(num == imglist.length){
num=0;
clearTimeout(TimerIDS);
setTimeout(imgload, transition_time);
}
}
//-->
<script>
</body>
・・・以上、わずか90 秒でソラマメの美女たちがスクリーンセーバーになってくれることを期待して。