スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

PikaPika_Atlantis
ピカピカ
今回は、ピカピカ画像(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&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && 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 && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && 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を制作するときの参考にもなりますし、
久しぶりに楽しくいろいろと回覧させていただきました。

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


関連記事:
FC2共有テンプレート第一作「The-truth-Sky-Bblu」審査合格
FC2共有テンプレート第二作「Truth-AnotherVer」審査合格
FC2共有テンプレート第三作「Nature_Mystery_2culm」審査合格
FC2共有テンプレート第四作「Truth_Flare_Fire」審査合格
FC2共有テンプレート第五作「White_Blue_Nature」審査合格
FC2共有テンプレート第六作「Black_Clear_Clean」審査合格
FC2共有テンプレート第七作「Clear_Glass_Seconds」審査合格
FC2共有テンプレート第八作「Nature_Mystery_3C」審査合格
FC2携帯用共有テンプレート第一作「Mobile_Truth_Blue」審査合格
FC2共有テンプレート制作者の心得
FC2共有テンプレート週間DLランキングトップ!ありがとうございます!
英語や韓国など計8カ国の言語に対応させる翻訳プラグイン「World-Word-翻訳」
キラキラ画像が降ってくるJavaScript製FC2共有プラグイン「PikaPika_Atlantis」
コメント

safariでも確認しました( ´・ω・)ノ

題名通りSafariでも確認いたしました。
何かお役に立てればと。。。
既に知っていらしたら、すいません。

わかりました

>結城さん

>題名通りSafariでも確認いたしました。

ありがとうございます。自分はSafariでの環境テストは行っていないので、報告はとても助かります。

それにしても、プラグインの修正手続きで説明文の修正だけで、もう一度登録申請状態になるとは思いませんでしたね~
共有テンプレートでは説明文の修正はOKでしたので、プラグインもそうだった思ったのですが・・・まさか・・・申請状態になるとは・・・

次に登録されるのは2~3日後になるのでは
ないかな~と思います。

それでは結城さん、報告ありがとうございました。

はじめまして。

プライングお借りしました。
ありがとうございます♪
私は春らしく 桜の花びらを降らせてみました^^
とっても綺麗で気に入ってます(@⌒ο⌒@)b

綺麗ですね

>☆芽実☆さん

コメントありがとうございます。

>私は春らしく 桜の花びらを降らせてみました^^

おぉ~!、とても綺麗に桜が舞っていますね。
とってもセンスがよいと思いますよ^^

>とっても綺麗で気に入ってます(@⌒ο⌒@)b

ありがとうございます。そう言っていただけると自分も
製作した甲斐があります^^

そちらのサイトのほうも拝見させていただきましたが、とてもかわいらしく綺麗なビーズがたくさんありますね^^

自分の場合ですと、手先があまり器用ではないため、
細かく繊細な動きを要求される物がなかなかうまくできないんですよね^^;

ですので、☆芽実☆さんのように器用で繊細な作品を制作したりすることが自分にはできないので、いいな~と思いますよ^^

はじめまして^^

とても素敵なプラグインで、一目で気に入ってしまいましたv-9
あまり飾るタイプのプラグインはダウンロードしないのですが、何だか色合い的に凄く合ってる感じがしたので、早速ダウンロードさせて頂き、使わせて頂いてますe-420

カスタマしようかとも考えたのですが、元のままの方がテンプレートにマッチしてるので、そのまま使わせて頂きました。
これからも素敵なデザインを期待していますe-266 ありがとうございましたv-290

どうも

> 蓮RENさん

コメントありがとうございます。

>あまり飾るタイプのプラグインはダウンロードしないのですが、何だか色合い的に凄く合ってる感じがしたので、早速ダウンロードさせて頂き、使わせて頂いてます

お気に入りいただいたようで幸いです。ありがとうございます^^

>カスタマしようかとも考えたのですが、元のままの方がテンプレートにマッチしてるので、そのまま使わせて頂きました。
これからも素敵なデザインを期待しています ありがとうございました

カスタマイズにより画像を変えてみても面白いでしょうし、デフォルトのまま使用もいいと思いますよ^^

それでは蓮RENさん、
当サイトへの訪問、ならびにダウンロードしていただきありがとうございました。
コメントの投稿
管理者にだけ表示を許可する

トラックバックURL

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。