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

ページ全体を横にスクロールで無限ループするJavaScript処理の記述があったので試して見ました。

Contents

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

ページ全体を横スクロールで無限ループする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>

ページ全体を横スクロールで無限ループするHTMLの記述

※見出しテキストと画像を用意しましたが、必要に応じて変更して下さい。

<div id="idWrap">

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


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


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

</div>

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

※「body」の終了タグ直前に以下の内容を記述するだけです。jQueryは使用して無いのでライブラリは読込必要ありません。

<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>