I found a JavaScript implementation for infinite horizontal scrolling of the entire page and decided to try it out.
Contents
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
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.