画像が降るJavaScript「PikaPika_Atlantis」共有プラグイン

By サンエタ, 2009年7月31日

今回は、ピカピカ画像（GIFアニメーション）が降ってくるJavaScript「PikaPika_Atlantis」が
見事FC2のプラグイン審査をえて共有プラグインの欄に並ぶことが出来ました。

今回のプラグイン「PikaPika_Atlantis」に関する詳細を記述させていただきたいと思います。
それでは、詳細は続きから。

【はじめに】

まず初めに、当プラグイン「PikaPika_Atlantis」をダウンロードしてくださり
ありがとうございました。

今回のプラグインは海の神秘イメージさせて作らせていただいた共有プラグインです。
（少し雪っぽくなったような・・・＾＾；）

【利用規約】

「PikaPika_Atlantis」を使用していただくさいの利用規約は以下のようになっています。

・アダルトサイト：使用不可

・作者記述部分：削除不可
（著作権記述部分の編集はOKですが、制作者情報は削除不可）

【動作環境】

IE4・IE5・IE5.5・IE6・IE7・IE8
Firefox2 Firefox3
Opera
Safari

大体主要ブラウザの殆どに対応していることを確認致しました。

【素材提供元】

スクリプト参考元：
「Dynamic Drive」様
感謝！

Sun Eternityバナー
「ANTARES-アンタレス- 」様
感謝！

【プレビュー】

「PikaPika_Atlantis」をお試し表示する

【ダウンロードURL】

共有プラグインの欄のURLで
&process=download&no=26104&mob=0

共有プラグインナンバー
26104

【～コード～上記利用規約を守り、コピーしてお使いください】

//～～▼JavaScriptコードここから▼～～

<script language="JavaScript">
<!--
/******************************************
初めに当プラグイン「PikaPikaAtlantis」をダウンロードしていただき
ありがとうございます。利用規約は以下のようになっています。

～利用規約～
・二次配布：不可
・アダルトサイト：使用不可
・作者記述部分：削除不可
（著作権記述部分の編集はOKですが、制作者情報は削除不可）

スクリプト提供元：（感謝）

http://www.dynamicdrive.com/dynamicindex3/snow_dev.htm

Sun Eternityバナー提供元：（感謝）

http://antaresit.blog24.fc2.com/

PikaPikaAtlantis（プラグイン）の詳細

http://annkokunokizinn.blog116.fc2.com/blog-entry-203.html

******************************************/

//画像を変えれば降る画像も変わります。
var snowsrc="http://img164.imageshack.us/img164/6297/pikapikaataniani.gif"

// ここの数値を増やすと画像の数が増加します（多くしすぎると動作が重くなります）
var no = 7;//デフォルトの数値:7

// Configure whether snow should disappear after x seconds (0=never):
//0にするとずっと表示、数字を指定すると指定した時間表示
var hidesnowtime = 0;

// Configure how much snow should drop down before fading
//("windowheight" or "pageheight")
//pageheightを指定するとページ内全体で繰り返し、windowshegihtを指定すると指定したブラウザの範囲領域で繰り返す
var snowdistance = "windowheight";

///////////Stop Config//////////////////////////////////
//ブラウザによる動作判定
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&amp;&amp;!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables

//最初のsnowdistanceでwindowheightを指定した場合はここの数値の部分が表示されるキラキラ画像が表示される領域の部分となる
var i, doc_width = 800, doc_height = 1200;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

//配列宣言部分＆各乱（ランダム数値取得＊厳密には乱数はランダムではない）数取得
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "http://blog-imgs-19.fc2.com/a/n/n/annkokunokizinn/pikapikaatani_ani.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); //横幅表示開始位置の乱数-50px
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // 左右移動乱数
stx[i] = 0.02 + Math.random()/15; // 左右速度乱数
sty[i] = 0.2 + Math.random(); // 落下速度乱数
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"#\"><img _fcksavedurl="\"#\" /><img" src='"+snowsrc+"' border=\"0\" /><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\" /><\/div>");
}
}
}

//MS IE6用処理
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight &amp;&amp; snowdistance=="windowheight")? window.innerHeight : (ie4up &amp;&amp; snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up &amp;&amp; !window.opera &amp;&amp; snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 10;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.4 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
-->
</script>
<noscript>
お使いの環境ではこのJavaScriptは動作しないようです
動作環境に関するご報告は<a href="http://3et.org/">3ET</a>までお願い致します。
</noscript>
<!--プラグイン作者記述領域-->
<div style="padding-left:2px;">
Present's by<br />
<a href="http://3et.org/"><img src="http://img117.imageshack.us/img117/1593/suneternitybarner.gif" alt="Sun Eternity" /></a>
</div>

//～～▲JavaScriptコードここまで▲～～

【様々なカスタマイズ】

今回のプラグインは上記のぴかぴか画像だけではなく他にも様々な
画像を降らせることも出来ます。

例えば

//画像を変えれば降る画像も変わります。
var snowsrc=”画像URL”

の部分の「画像URL」の部分を自分の好きな画像のURLを指定すれば他にも様々な
画像を振らせることも出来ます。

そして、画像の降ってくる数を調節したい場合は下記の部分を調節すれば
降る画像の数を調節することが出来ます。ただし、デフォルトの値はブラウザへの負荷対策のため、
数値を多くしすぎてしまうと動作が重くなります。

// ここの数値を増やすと画像の数が増加します（多くしすぎると動作が重くなります）
var no = 7;//デフォルトの数値:7

画像の降る時間を指定したい場合は以下の部分を編集すると指定することが出来ます。

// Configure whether snow should disappear after x seconds (0=never):
//0にするとずっと表示、数字を指定すると指定した時間表示
var hidesnowtime = 0;

そして、画像の降るページの範囲を指定したい場合は以下の部分に編集を加えいます。

// Configure how much snow should drop down before fading
//(“windowheight” or “pageheight”)
//pageheightを指定するとページ内全体で繰り返し、windowshegihtを指定すると指定したブラウザの範囲領域で繰り返す
var snowdistance = “windowheight”;

ここでは「var snowdistance = “windowheight”;」のダブルクォーテーションの
「pageraight」を指定すると、サイトの一番下の方まで画像が降るようになります。
（デフォルトではpageraightでした）

しかし、下の方まで画像を振らせてしまうとブラウザへの負荷が高くなってしまい、
動作が重くなるため、実際の実用性を考慮して降る範囲を指定できる
（windowsheight)を指定しています。

（画像が降っているところをブラウザで表示させると負荷が高くなります）

windowsheightでの画像の降る範囲の指定は

//最初のsnowdistanceでwindowheightを指定した場合はここの数値の部分が表示されるキラキラ画像が表示される領域の部分となる
var i, doc_width = 800, doc_height = 1200;

↑での数値：主にdoc_heightの数値を変えると画像の降る範囲をpx単位で
指定することが出来ます。ただし環境によっては初期回覧時のブラウザの
表示範囲（解像度）のみとなっています。

さらに細かいカスタマイズはプラグイン内部のコメントを見ていただければ幸いです。

【後書き】

主に日本で公開されているサンプルコードはIEのみに対応していて
Firefoxなどでも表示できないものが殆どなのですが、
英語圏のサンプルコードを見てみると実に多種多様で実用性の高いサンプルコードがたくさんあります。

自分としては見ていてなんだか飽きませんね＾＾

全ブラウザに対応したJSを制作するときの参考にもなりますし、
久しぶりに楽しくいろいろと回覧させていただきました。

それでは当サイトへ訪問してくれた皆さん、並びにダウンロードしてくださった方々
そして、素材を提供していただいた方々へ・・・
ありがとうございました。

No related posts.

管理人の制作物 | JavaScript, ピカピカ, ブログパーツ

3ET

プログラミング日記やテンプレートやソフトウェア等の制作からIT情報、管理人の趣味など多種多様なものを紹介