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

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

簡単な方法

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

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

HTML部分

<script type="text/javascript" src="https://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等の学習に役立つ書籍を紹介します。

ページのトップへ戻る