ページ全体を横にスクロールで無限ループするJavaScript処理の記述があったので試して見ました。
Contents
ページ全体を横スクロールで無限ループする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>
ページ全体を横スクロール無限ループし続けるデモページ
ソース元:ものすごい勢いで横スクロールさせるJavaScript
ソース元:ものすごい勢いで横スクロールさせるJavaScript
使い方によっては目を引くちょっとした仕掛けになりそうですよね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告