指定のタグをループ(setTimeout)でちょっと動かし続ける仕組み



ページ内の任意のタグをsplitで指定し、
setTimeoutでループで数px指定したタグをランダムに動かしてみました。

1.JavaScriptの記述例

<script language="javascript" type="text/javascript">
<!--
function tgmv(){
	T=new Array();
	//以下で指定したタグが対象になります
	N='a|img|li|ul|h1|h2|h3|h4|p'.split('|');
	for(i=0;i<N.length;i++){
		for(E=document.getElementsByTagName(N[i]),j=0;j<E.length;j++){
			T.push(E[j]);
		}
	}
	L=T.length;
	loop();
	void(0);
}
function loop(){
		for(i=0;i<L;i++){
			S=T[i].style;
			S.position='relative';
			S.left=Math.round(Math.random()*10-5)+'px';
			S.top=Math.round(Math.random()*10-5)+'px';
		}
		setTimeout('loop()',100);
}
-->
</script>

 

2.HTMLの記述例

「body」のonLoadとonResize時にJavaScript処理を行い、
idWrapのpadding位置を変更してます。

<div id="idWrap">
        <h1>指定のタグをループ(setTimeout)でちょっと動かし続けます。</h1>
        <p>下のロゴ画像をクリックしてみて下さい。</p>
        <div><a href="javascript:void(0);" onClick="tgmv()"><img src="/wp-content/plugins/wp-ogp/default.jpg" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a></div>
        <h2>h2タグです。</h2>
        <ul>
        <li>リストタグです。</li>
        <li>リストタグも動いてます。</li>
        </ul>
        <h3>h3タグです。</h3>
        <h4>h4タグも動いてますか?</h4>
</div>

 
指定のタグをループ(setTimeout)でちょっと動かし続けるデモ
 

使い方によっては、ページ内での目を引くちょっとした仕掛けになりそうですよね。