ふわふわ７■散らばる画像 -GF作品-

マウスを停止した位置に画像が集結し、マウスを動かすと散らばります。

●2016/07/07：即時関数で囲んで、グローバル変数を消しました。
散らばった大量の画像がマウスが停止した位置に集合し、マウスを動かすと散らばるユニークなJavaScriptです。
GF作品については、Gerard Ferrandez作品についての説明をお読み下さい。

■2016/07/06：スクロールしても動作するように改造したのですが、困った現象が発生しました。
ブラウザIE（IE11）のみ、極端に動作が遅くなります。イライラするほど遅いです。
他のブラウザ、Firefox、クロム、オペラでは、速度に問題ありません。
そのため、別にIEでも速度が速いJavaScriptを作成しました。
これは全ブラウザで使用できますが、スクロールした場合は、停止したマウスの位置に画像が集合しなくなります。
それでもよければ、こちらから。
ブラウザIE使用者なら、見比べると、動作速度の違いが分かります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ふわふわ７■散らばる画像 -GF作品-</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{
background:url(mo1.gif) no-repeat #cff center 150px;/*★背景画像指定。繰り返し無し。背景色水色 左右中央、上から150px*/
overflow-y:scroll;/*★縦スクロールバーを表示する。この方がチラチラしないが不要ならこの1行は削除*/
overflow-x:hidden;/*★横スクロールバーを出さない。横スクロールバーが出ないと困るならこの1行は削除*/
}
--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<p style="text-align:center;">マウスを停止した位置に画像が集結し、マウスを動かすと散らばります。</p>

<!--★ここからコピー。下記１行は散らばる画像の指定。画像ファイル名以外は、このままコピー-->
<img src="ps2.png" id="doot" style="display:none;">


<script type="text/javascript"><!--
/*===================================================
散らばる画像　script: Gerard Ferrandez - Ge-1-doot - JUNE 2oo3
http://www.dhteumeuleu.com　　js保管サイトhttp://www.geocities.jp/kawaida_1167/
★HTML5対応と重ね方、透過指定、スクロール対応へ。　　2016/07/07
===================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var N = 80;     //★原本80。マウス画像表示数。マウス画像指定はHTMLですること
var opa=0.7;    //★画像透過度。0 で完全透明なので、0 は指定しない
var S = 500;    //★原本500。画像がマウスに引き寄せられる。大きいほど速い
var Zx=-1;      //★文章の上にマウス画像が流れるか？　上に流れる：1   下に隠れる：-1。マイナス指定にしないとリンクが押せない


//指定ここまで-----------------------------------------------------------------------------------
var W = xm = ym = 0;
var O,nx,ny,tp;//■追加
function spAn(X,Y,O){
	this.obj = document.createElement("img");
	this.obj.src = document.getElementById("doot").src;
	this.obj.style.position = "fixed";//■原本absolute修正
	this.obj.style.left = X+"px";
	this.obj.style.top = Y+"px";
	this.obj.style.zIndex =Zx;//追加
	this.obj.style.opacity =opa;//追加
	document.body.appendChild(this.obj);
	this.O   = O;
	this.x   = X + W;
	this.y   = Y + W;
	this.dx  = 0;
	this.dy  = 0;
	this.dt  = 0;
	this.dt2 = 0;
	this.zx  = 1 - 2 * Math.random();
	this.zy  = -4 * Math.random();
	this.SCR = function(){
		with(this){
                        tp=window.pageYOffset;//■追加
			if(y<-W)y=tp+ny+W; else if(y>tp+ny+W)y=-W;//■tp+追加
			if(x<-W)x=nx+W; else if(x>nx+W)x=-W;
			dx  = x - xm;
			dy  = y - ym;
			dt  = Math.sqrt(dx * dx + dy * dy);
			dt2 = dt / (dt + S/dt);
			x   = xm + dx * dt2 + zx;
			y   = ym + dy * dt2 + zy;
			obj.style.left = x - W+"px";
			obj.style.top  =-tp+ y - W+"px";//■-tp+追加。-tpしないとスクロール後にマウスに集合しない
			if(O)O.SCR();
		}
	}
}
document.onmousemove = function(e){xm=e.pageX;ym=e.pageY;}
function GeFe() {
        tp=window.pageYOffset;//■追加
	nx =window.innerWidth-18;
	ny =window.innerHeight-18;
	W  = document.getElementById("doot").width * 0.5;
	xm = nx/2;
	ym =tp+ ny/2;//■tp+追加
	for(var i=0;i<N;i++){
		var a=Math.random()*Math.PI*2;
		O = new spAn(-W+xm+Math.cos(a)*ym,-W+ym+Math.sin(a)*ym,O);
	}
	setInterval( function(){O.SCR();},16 );
}
GeFe();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

ふわふわ７■散らばる画像 -GF作品- 最終修正日 : 2016/07/07

　ふわふわ７■散らばる画像 -GF作品-　　　　最終修正日 : 2016/07/07