360度パノラマ写真をjQueryでスクロールで表示させるページを作成

Date:	2016.08.06
Update:	2020.02.24

執筆･監修

上杉洋　Hiroshi Uesugi

1991年生まれ。株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

Xにポストする

Facebookで共有 B! ブックマークする

コピーする

360度風景写真をjQueryでスクロールできるイメージビューを作成しました。

デモではマウスドラッグでのスクロールとボタンによるスクロールを実装しています。

目次（読みたい所をクリック!!）

1.画像の設置

今回はこちらの画像を使用します。

画像の配置ですが、<img>タグを使用しても良いですが今回はパノラマ写真なのでCSSの標準プロパティでリピートが可能なBackgroundとして画像を配置します。

コードは以下です。

<div id="wrapper">
<div id="mContents">
</div>
<a href="#" id="move_left_btn"><img src="imgs/arrow_left.png" alt="左へ" class="move_left"></a>
<a href="#" id="move_right_btn"><img src="imgs/arrow_right.png" alt="右へ" class="move_right"></a>
</div>

div#wrapper {
	position:relative;
    border-top: 1px solid #86670f;
	border-bottom:1px solid #ae9768;
}
div#wrapper .move_left{
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	margin:auto;
}
div#wrapper .move_right{
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
}
div#mContents {
    width: 100%;
    height: 657px;
	background-image:url(imgs/park-1456270_1920.jpg);
    background-repeat:repeat-x;
    cursor: move;
    background-position: 50%;
}

#mContentsにパノラマ表示させる背景画像を設定し、X方向にリピートさせます。
高さは画像の高さと同じで良いでしょう。

後はbackground-positionを移動させるだけで写真が繰り返し表示されます。
プロパティは%でもpxでも問題無いですが今回は画像の中央からスライドを始めたかったので%指定にしています。

2.パノラマ写真を移動させる処理を記述

基本はbackground-positionの値を変更させることで写真の位置を移動させています。

ページが読み込まれたらmoveBG関数を呼び出しsetIntervalで繰り返し処理をさせます。
これで、speedの値を変更するだけで画像が任意の方向に移動します。

初期値は0なので止まっています。

$(document).ready(function () {
	//アニメーション開始
	moveBgFlg = true;
	setInterval(function(){
		if(moveBgFlg) moveBG();
	}, 1);
});
/* 眺望スクロール */
	//スクロールスピード
	var speed = 0;
	//画像幅
	var width = 2902;
	//画像X座標
	var bgX = 50;
	//アニメーションon//off
	var moveBgFlg = false;
	//マウスダウン判定
	var mouseDown = false;
	//マウスダウン位置
	var mouseDownX;
	/* 
		表示したい方向の矢印クリックで移動
		画像をクリックでスクロール停止/ドラッグで移動
	 */
	$(function(){
	//左に背景を移動
		$('#move_left_btn').mousedown(function(){
			speed = -0.6;
		});
		$('#move_left_btn').mouseup(function(){
			speed = 0.;
		});
		$('#move_left_btn').bind("dragend",function(){
			speed = 0;
		});
		//右に背景を移動
		$('#move_right_btn').mousedown(function(){
			speed = 0.6;
		});
		$('#move_right_btn').mouseup(function(){
			speed = 0;
		});
		$('#move_right_btn').bind("dragend",function(){
			speed = 0;
		});
		//背景をストップ
		//右に背景を移動
		$('#mContents').mousedown(function(evt){
			moveBgFlg = false;
			mouseDown = true;
		});
		$('#wrapper').mousemove(function(evt){
			mouseDownX = evt.offsetX;
		});
		$('#mContents').mousemove(function(evt){
			if(mouseDown){
				bgX = bgX + (mouseDownX - evt.offsetX) / 5;
				$('#mContents').css({'background-position': bgX + '% ' + 0 + 'px'});
			}
		});
		$('#mContents').mouseup(function(){
			moveBgFlg = true;
			mouseDown = false;
		});
	});
	function moveBG(){
		//画像のサイズまで移動したら0に戻る。
		//if (bgX <= -width) bgX= 0;
		//scrollSpeed分移動
		bgX += speed;
		$('#mContents').css({'background-position': bgX + '% ' + 0 + 'px'});
	}