【第 77 話】 エフェクト付きのスクリーンセーバーができるかも！- 実践 編 -
★前回の記事でスクリーンセーバーを試したついでに、ある外国の方が作ったJavaScript を埋め込んでみた。
おぉ、マジでCool なブログが出来そうな予感。・・・ソラマメが世界に通用するセカンドライフブログでいっぱいになるまでは、Wolf の戦いはつづく。 - by Lovely Wolf -
★CSS Linked Photo Shuffler
・・・著作権情報は、しっかりと表記すべきでしょ。
//
// CSS Photo Shuffler v1.0 by
// Carl Camera
//
http://iamacamera.org
//
// SetOpacity Function and inpiration from Photo Fade by
// Richard Rutter
//
http://clagnut.com
//
// License: Creative Commons Attribution 2.5 License
//
http://creativecommons.org/licenses/by/2.5/
//
// Customize your photo shuffle settings
//
// * Surround the target <img /> with a <div>. specify id= in both
// * set background-repeat:no-repeat in CSS for the div
// * The first and final photo displayed is in the html <img> tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
★フェードイン、フェードアウトの微妙な時間調整もできるし、リピートの回数も指定できたりして、使えるかも。
・・・いまどき、シコシコとFlash やGIF をいじってる場合ちゃうでしょ。
var gblPhotoShufflerDivId = "photodiv"; var gblPhotoShufflerImgId = "photoimg"; var gblImg = new Array('http://img01.slmame.com/usr/lovelywolf/08100502.jpg','http://img01.slmame.com/usr/lovelywolf/08100501.jpg','http://img01.slmame.com/usr/lovelywolf/08100503.jpg'); var gblPauseSeconds = 3.25; var gblFadeSeconds = 2.85; var gblRotations = 100;var gblDeckSize = gblImg.length; var gblOpacity = 100; var gblOnDeck = 0; var gblStartImg; var gblImageRotations = gblDeckSize * (gblRotations+1); window.onload = photoShufflerLaunch; function photoShufflerLaunch(){var theimg = document.getElementById(gblPhotoShufflerImgId); gblStartImg = theimg.src; document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')'; setTimeout("photoShufflerFade()",gblPauseSeconds*1000); }; function photoShufflerFade(){var theimg = document.getElementById(gblPhotoShufflerImgId); var fadeDelta = 100 / (30 * gblFadeSeconds); if (gblOpacity < 2*fadeDelta ){gblOpacity = 100; if (gblImageRotations < 1) return; photoShufflerShuffle(); setTimeout("photoShufflerFade()",gblPauseSeconds*1000);}else{gblOpacity -= fadeDelta; setOpacity(theimg,gblOpacity); setTimeout("photoShufflerFade()",30); }; }; function photoShufflerShuffle(){ var thediv = document.getElementById(gblPhotoShufflerDivId); var theimg = document.getElementById(gblPhotoShufflerImgId); theimg.src = gblImg[gblOnDeck]; setOpacity(theimg,100); gblOnDeck = ++gblOnDeck % gblDeckSize; if (--gblImageRotations < 1){ gblImg[gblOnDeck] = gblStartImg; }; thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')'; }; function setOpacity(obj, opacity) {opacity = (opacity == 100)?99.999:opacity; obj.style.filter = "alpha(opacity:"+opacity+")"; obj.style.KHTMLOpacity = opacity/100; obj.style.MozOpacity = opacity/100; obj.style.opacity = opacity/100;}
#photodiv {background-repeat: no-repeat; padding:0px; margin:0px;border: none;}
#photoimg {background-repeat: no-repeat; padding:0px; margin:0px;border: none;}
【ブログでスクリーンセーバーを作ってみる！ - 関連記事】
# Case 1.<Web URL>
http://lovelywolf.slmame.com/e387898.html