タイトル画像
サイトタイトル画像

JavaScriptで画像をパノラマスクロールさせる方法

パノラマスクロールで撮影した写真を簡単にオンライン上で閲覧するために、方法をまとめます。

これらのスクリプトを利用すれば、写真の自動スクロールを簡単に作ることができます。

簡単な方法

これは「backgroundPosition」を移動させることで、スクロールさせる方法です。

背景画像をアニメーションさせる「backgroundPosition.js」を利用します。

HTML部分

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.backgroundPosition.js"></script>

<div class="scrollBg" style="width:400px; height:225px; background-image: url(./jobs.jpg)">
</div>

JavaScript部分

$(document).ready(function() {
  moveBgAround();
});

var en = 600; // スクロールしたい横の距離
var rl = 3;
var x = 0;
var y = 0;
function moveBgAround() {
  x = x + rl;
  if(x > en){
     x = 0;
  }

 // 動かす時間(数値が低いほど早い)
 var time = 50;
 
 //上記の設定でanimateさせる
 $('.scrollBg').animate({
   backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
 }, time, "swing", function() {
   moveBgAround();
 });
}

デモページ

サンプルを見るのが一番早いでしょう。

サンプルを見る

複雑な方法

JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」を利用します。

(function($) {
	$(function() {
		$("#scroller").simplyScroll({
			auto: false,
			speed: 10
		});
	});
})(jQuery);

などのような記載だけで

  • 水平方向のスクロール可能
  • ストップ・スタートのボタンを付加できる
  • 自動で移動、手動移動を切り替えれる
  • スクロールが終わったら終了する、ループする
  • スクロール速度
  • フレームレートの変更

などが簡単にできます。

スクリプトをダウンロードするとサンプルが多く入っています。

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2013/12/29)