How to Create an Infinite Horizontal Scrolling Page 【JavaScript】｜DAD UNION

I found a JavaScript implementation for infinite horizontal scrolling of the entire page and decided to try it out.

CSS for Infinite Horizontal Scrolling

Please modify as needed.

<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 for Infinite Horizontal Scrolling

Headings and images are provided, but feel free to modify as needed.

<div id="idWrap">

<h1>This page will scroll horizontally in an infinite loop</h1>


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


<h2>Is it looping infinitely?</h2>

</div>

JavaScript for Infinite Horizontal Scrolling

Add the following script just before the closing body tag. No jQuery library is needed.

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

Demo Page for Infinite Horizontal Scrolling

Demo of Infinite Horizontal Scrolling

Source: Rapid Horizontal Scrolling JavaScript

　
Depending on how you use it, this can be a visually striking effect.

　
Please use at your own risk if you decide to adapt this. Do not use the Google Analytics tag within the demo page tags.