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

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

デモ

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

1.画像の設置

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

park-1456270_1920

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

コードは以下です。

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

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

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

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

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

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

mouseupのイベントが呼び出されないバグ

注意しなければいけないのがボタンを押して離した時の処理でmouseupだけだとボタンを押す→ドラッグ→別のとこでクリックを離すという動作をしたときにmouseupイベントが呼ばれません。

そのために、.bind(“dragend”)というイベントも呼び出しています。

マウスのドラッグでパノラマ写真の位置を変更させる方法

マウスの現在の座標はmousemoveイベントで取得することができます。
要素の上にマウスがある時に呼び出されるのでドラッグを感知するにはmousedownイベントと併用して使用しなければなりません。

また、mousemoveイベントではその座標の位置を取得するだけなのでマウスをクリックした位置から離した距離までを計測しなければなりません。

そのため、パノラマ写真を描画している要素の上に要素をかぶせて、上の要素から下の要素へのタイムラグを利用して、ドラッグ機能を実装しています。

シェアする

  • このエントリーをはてなブックマークに追加