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



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

1.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>
</body>

 
ページ全体を横スクロール無限ループし続けるデモ
 
ソース元:ものすごい勢いで横スクロールさせるJavaScript
 

前回の指定のタグをループ(SETTIMEOUT)でちょっと動かし続ける仕組み同様、
使い方によっては目を引くちょっとした仕掛けになりそうですよね。