JavaScript

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

  /

このブログ記事では、ページ全体を横スクロールで無限ループさせるためのJavaScript処理について紹介します
。初心者のエンジニアやウェブ閲覧者が理解しやすいように、必要なCSS、HTML、そしてJavaScriptのコードを丁寧に解説します。デモページのリンクも提供するので、実際に動作を確認しながら学んでください。

Contents

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

まず、ページ全体を横スクロールさせるための基本的な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の記述

次に、HTMLの記述です。以下のコードを使用して、横スクロールさせるコンテンツを設定します。見出しテキストと画像を用意しましたが、必要に応じて変更してください。

<div id="idWrap">

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


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


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

</div>

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

最後に、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

まとめ

このブログ記事では、ページ全体を横スクロールで無限ループさせるためのCSS、HTML、そしてJavaScriptの記述方法を紹介しました。この技術を使うことで、ウェブサイトにインパクトのある動きを加えることができます。特に、商品ギャラリーやフォトギャラリーなど、視覚的にアピールしたいコンテンツに適しています。

この技術を活用して、あなたのウェブサイトに動きのある魅力的な演出を加えてみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

無限ループ ページ全体 賑やかし
関連記事