ページ全体を横スクロール無限ループするJavaScript

ページ全体を横にスクロールで無限ループするJavaScriptがあり、何と無く気になったのでちょっと試して見ました。

1.CSSの記述例

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1em;
	text-align:center;
	padding:15px 0 0 0;
}
h2{
	font-size:16px;
	font-weight:normal;
	line-height:1em;
	text-align:center;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

2.HTMLの記述例

<div id="idWrap">

<h1>ページ全体を横スクロール無限ループし続けます。</h1>


<div><img src="logo.jpg" alt="DAD UNION"></div>


<h2>無限ループしてますか?</h2>

</div>

3.JavaScriptの記述例

「body」の終了タグの直前に以下の内容を記述するだけで出来ました。

<script language="javascript" type="text/javascript">
<!--
(function(){

   var d = document;
   
   var bodyWidth = d.body.offsetWidth;
   var wrapper = d.createElement('SLWrapper');
   var leftContent = d.createElement('SLContent');

   setWrapper();
   setStyle();

   var rightContent = leftContent.cloneNode(true);
   rightContent.style.left = bodyWidth + 'px';
   wrapper.appendChild(rightContent);
   
   var x=0;
   var ax=1;
   var aax=1;
   
   loop();
   
   function setWrapper(){
     for(var i=0,len=d.body.childNodes.length-1; i<len; i++){
       var node = d.body.childNodes[0];
       leftContent.appendChild(node);
     }
     wrapper.appendChild(leftContent);
     d.body.appendChild(wrapper);
   }
   
   function setStyle(){
     d.body.parentNode.style.overflowX = 'hidden';
     with(wrapper.style){
       position = 'absolute';
       top = '0px';
       left = '0px';
       width = bodyWidth*2 + 'px';
       display = 'block';
     }
     with(leftContent.style){
       position = 'absolute';
       top = '0px';
       left = '0px';
       width = bodyWidth + 'px';
       display = 'block';
     }
   }
   
   function loop(){
     x += ax;
     ax += aax;
     x %= bodyWidth;
     ax %= bodyWidth;
     
     setScrollX(x);
     
     setTimeout(loop, 50);
   }
   
   function setScrollX(x){
     var targetX = Math.floor(x) % bodyWidth;
     if(targetX < 0){
       targetX += bodyWidth;
     }
     targetX = -targetX;
     wrapper.style.left = targetX + 'px';
     
   }
   
 })();
-->
</script>

ページ全体を横スクロール無限ループし続けるデモ

ソース元:ものすごい勢いで横スクロールさせるJavaScript

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