POPSブログ

jQuery CSS3 3D回転Carouselで360度パノラマ写真を表示する

371

  Category:  jquery2015/10/26 pops 

CSS3 で作ったCarouselをjquery.transit.jsのtransitionアニメーションで回転させます。360度パノラマ写真を埋め込み表示して見ます。無理矢理応用していますが簡単に出来て便利です。当然少しクセが有りますが、ここでは改造jquery.transit.jsを使用しています。

 

jQuery CSS3 3D回転Carouselで360度パノラマ写真を表示する、テスト


ご注意、Chrome.Firefox.Opera.等、transform-style:preserve-3d対応のモダンブラウザでご覧ください(Chrome推奨)。IE系ブラウザではご覧になれません。但し、Safari、Android系の動作は不明です。
このデモに限り、特にChromeを推奨します。


zu

 

jQuery CSS3 3D回転Carouselで360度パノラマ写真を表示する

CSS3でCarousel等の構造を作り、transit.jsでアニメーションする試みです。
但し、transform-style:preserve-3dを使用しますので、まだ未対応のブラウザもありますし、且つtransit.jsがZ軸に対応していませんので、完全に機能しない場合も有ります。
それでも、そこそこ動きますので多少は重宝するかも知れません。考えてみれば大変無謀なことです。

 

1. 3Dに未対応のブラウザが多い。(Chrome推奨)
2. transit.jsがZ軸に対応していませんので設定しても機能しないものもある。
(無理やり動かしています、試してみて機能するものだけ利用します、問題があれば当然ゴマカシます)
3. このデモでは、Z軸に対応した改造transit.jsを使用しています。
(注意、改造jquery.transit.jsは全ての動作を保障されている訳ではありません)

4. 現在、transit.js対応はAndroid系が含まれていませんので動作は不明です。


● jquery.transit.jsの改造は[ jQuery CSS3 3D回転Carouselをtransit.jsで処理する ]を参照ください。(簡単)

 

DEMO jQuery CSS3 3D回転Carousel、360度パノラマ写真を表示

● デモページは [ jqury-1.9 ] で動作しています。JS、CSS、は「デモ」ページに掲載しています。


Chromeでの閲覧推奨、デモのHTML JS CSSは各デモページに有ります。

1 jQuery CSS3 3D回転Carouselで360度パノラマ写真を表示デモ (改造jquery.transit.jsを使用)

DEMO-031


2 画像無しの原型デモ (改造jquery.transit.jsを使用)

DEMO-031b


通常のjquery.transit.jsでは、Firefoxで乱れが大きいので省略します。



 

簡単な説明


jQuery CSS3 3D回転Carouselで360度パノラマ写真を表示するの説明


Y軸方向に回転し対応するパネルが最前面に来ます。(指定角度に3D回転します)
一旦、縮小して回転、その後所定の大きさに戻します。 transit.jsを利用しますので複数のtransition()を連続して実行出来ます。(現在、Z軸未対応3Dのため必ず思うようにはならない場合あり)

 

jQuery Transitプラグイン、jquery.transit.js

JSは配布元または、githubから取得できます。各ページに説明などの記載が有りますので読まれるのが良いでしょう。

● 配布元、Web Site: Transit / jquery.transit.min.jsダウンロード可

● githubでのJSのダウンロード : jQuery Transit / jquery.transit.jsダウンロード可

 

デモのHTML JS CSSについて

デモページに記載しています。


HTMLの構造について

他の場合と違い、角丸陰影をつけていますので、1構造多くなっています。(#carousel-3d-baseで角丸陰影をつけるとずれる)

私の習性として「角丸陰影」は絶対条件なのですが、このJSに限りあきらめて通常の陰影です。


<div id="carousel-base-wrap">
	<div id="carousel-3d-base">
		<div id="carousel-3d"></div>
	</div>
</div>

HTML側に記載も可能ですが。JS側で生成した方が簡単です。


JSについて

説明用に下記で「デモ」のJSを表示します。背景画像Carousel、transform3d-carousel2.jsの例

DEMOのJS

注意、改造jquery.transit.jsを使用しています。


//transform3d-carousel2.js
//360度パノラマ写真/Firefox注意

//Carousel-H
(function($){

	$(function () {

		//初期設定
		//-----------------------------------------------------

		var transit_speed=1200;//3D速度
		var scale_speed=600;//縮小拡大速度
		var scale_v=0.25;//縮小値

		//ベースの大きさ
		var bace_W=640;
		var bace_H=300;
		//エレメントの数
		var carousel_len=36;
		//エレメントの大きさ
		var elem_W=100;
		var elem_H=300;

		//半径
		var radius=-567;

		//接する半径計算/隙補正
		radius=-(Math.round((elem_W/2)/Math.tan(Math.PI/carousel_len))-5);

		//Firefoxはbase-wrapでoverflow:hiddenできない
		//Firefox角丸成らない
		$('#carousel-base-wrap').css({boxShadow:'0 0 10px #000'});

		//-----------------------------------------------------

		var moveflag=false;//アニメ中判定
		var elem=[];//エレメント保存用

		//オブジェクト保存
		var carousel_3d_base=$('#carousel-3d-base');
		var carousel_3d=$('#carousel-3d');

		//エレメント配置角度の計算
		var eleme_angle=360/carousel_len;

		//改造JS使用
		for (var i=0; i < carousel_len; i++) {

			var deg_v=i*eleme_angle + "deg";

			var id_name="photo-elem" + i;
			var html='<div id="' + id_name + '" class="elem-3d"></div>';
			carousel_3d.append(html);
			elem[i]=$("#photo-elem" + i);

			//CSS3設定、rotateYを先に
			elem[i].css({rotateY:deg_v,rotateX:0,translateZ:radius});

			//Firefox対策背景画像
			var bg_x=i*100;
			var bg_y=0;
			elem[i].css({'backgroundImage':'url(' + '/main/images/yosima143day.jpg' + ')','background-position':bg_x +'px ' + bg_y + 'px'});
			//backgroundPositionの場合
			//elem[i].css({'backgroundImage':'url(' + '/main/images/yosima143day.jpg' + ')','backgroundPosition':bg_x});

		}

		//ボタンをつくる
		var btnhtml="";
		for (var i=0; i < carousel_len; i++) {
			btnhtml=btnhtml + '<span class="my-btn">' + i + '</span>';
		}
		$('#rotateChg-box').append('<p>' + btnhtml + '</p>');
		$('#rotateChg-box').find('span').eq(0).addClass('setcolored');

		//移動と回転
		var radius_v=radius*-1;
		carousel_3d.css({translateZ:radius_v,rotateX:0,rotateZ:0});

		//重要、初期のCSS設定/どんな場合も必要です
		carousel_3d.css({scale:[1,1],scaleZ:1,rotateY:0});//使用するもの

		//3D回転/delayはdelay()でするFirefox180度対策
		function rotate3d_box(angle){

			moveflag=true;//回転中判定

			//縮小
			carousel_3d.transition({scale:[scale_v,scale_v],scaleZ:scale_v},scale_speed,function(){

				//3D回転
				$(this).delay(250).transition({rotateY:angle},transit_speed,"linear",function(){

					//縮小を戻す
					$(this).delay(250).transition({scale:[1,1],scaleZ:1},scale_speed,function(){
						//完了
						moveflag=false;

					});

				});

			});

		}

		//クリックアクション/回転はマイナス設定
		$("#rotateChg-box span").each(function(i){
			var hitno=i;
			var angle=0;
			var angle_v=360/carousel_len;//角度

			$(this).click(function(e) {

				if(moveflag){return false;}

				$(this).addClass("setcolored");
				$(this).siblings("span").removeClass("setcolored");
				//マイナス値
				angle=angle_v*i*-1;rotate3d_box(angle);

				return false;
			});
		});

	});

})(jQuery);



マイナス半径値でCarouselを作る


下図のものはDEMO2を参照ください。

zuzu

 

図の様に、マイナス半径値でCarouselを作ると奥が正常になり、手前が左右逆転された構成で表示される。
通常のCarouselと正反対ですから室内の円形壁面に投影した360度パノラマ写真の様に見える訳です。
Carousel要素にbackface-visibility:hiddenを与えると手前が非表示になります。
backface-visibility:hiddenを設定しない場合であっても、縮小拡大、perspectiveの値によっても見え方に相違があります。



#carousel-3d .elem-3d{
backface-visibility:hidden;
}

非表示になるのはdisplay要素のみですから、div要素でラップされたimg要素(inline要素)は消えませんので注意。
デモでは、div要素に「背景画像」として流し込んでいるのでOK。


Carousel本体を半径分移動する

半径分移動すると、画像が原寸表示になります。
半径はマイナスですから補正はプラス値の半径になる。



//移動と回転
var radius_v=radius*-1;
carousel_3d.css({translateZ:radius_v,rotateX:0,rotateZ:0});

Carousel要素を接する

隙間無く並べる為Carousel要素を接する様にしますが、少し隙が出来るために「このデモ」では少し修正しました。
条件によって変わりますので実際の表示を確認しながら修正した。画像の大きさ画像ファイルの大きさなどによりマシン処理能力での差異があるようです。



通常の半径計算
radius=Math.round((elem_W/2)/Math.tan(Math.PI/carousel_len);

//接するマイナス半径計算と修正
radius=-(Math.round((elem_W/2)/Math.tan(Math.PI/carousel_len))-5);

360度パノラマ写真の幅

等分しなければ成らないので、基本的に3600ピクセルが扱い易い。36等分すれば要素1つは「100ピクセル」に成る。
高さは随意です。デモでは高さ300ですが、画像高さは490有りますので広げることが可能です。
尚、360度パノラマ写真を当方で作れませんので下記サイトのものを使用させて戴きました。


予島P.A.の360度展望、yosima143day.jpg 3600x490

【画像引用】信州パノラマ写真集: 瀬戸中央自動車道(瀬戸大橋)予島P.A.の360度展望


背景画像処理


簡単な背景表示なのですが、Firefoxでポジション設定と、陰影処理の影響での不具合と結構問題があります。
結果的に、Firefox対応は面倒です。Chromeならばスコブル簡単です。


zuzuzu

 

Firefox以外の背景画像処理

backgroundPositionで行いますので簡単です。但し、情景が左方向に移動(右回転)してゆきます。 参考、プラス半径の場合は後ろから取り出して並べます。



elem[i].css({'backgroundImage':'url(' + '/main/images/yosima143day.jpg' + ')','backgroundPosition':bg_x});

参考、プラス半径の場合は後ろから
var bg_x=3600-i*100;

Firefox対策の背景画像処理 (マイナス半径の場合)

Firefoxでは backgroundPosition が機能しませんので、従来の background-position で設定することになります。
但し、情景が左方向に移動(右回転)してゆきます。マイナス半径の場合です。プラス半径の場合は後ろから取り出します。



書式は、background-position:'x y' であるので

//Firefox対策背景画像
var bg_x=i*100;
var bg_y=0;
elem[i].css({'backgroundImage':'url(' + '/main/images/yosima143day.jpg' + ')','background-position':bg_x +'px ' + bg_y + 'px'});

------------------------------------------------------------

参考、下記設定は
background-position-x
background-position-y
IE独自のものですから、当然、Firefoxで機能しません。

Firefox対策の背景画像処理2 (プラス半径の場合)

Firefoxでは backgroundPosition が機能しませんので、従来の background-position で設定することになります。
この際、背景は後ろから取り出して並べます。 但し、情景が右方向に移動(左回転)してゆきます。プラス半径の場合です。



書式は、background-position:'x y' であるので

//Firefox対策背景画像
var bg_x=画像幅-i*100;
var bg_y=0;
elem[i].css({'backgroundImage':'url(' + '/main/images/yosima143day.jpg' + ')','background-position':bg_x +'px ' + bg_y + 'px'});

陰影処理、角丸陰影処理

陰影が旨く行きません。陰影でのマージンが少し変で、全体がずれるので困ります。
Firefoxは特に、中の角丸処理が機能しませんので、ここでは通常の「陰影処理」のみにしました。


通常は、下記で良いのだが、図の様にFirefoxで両端のパネルが切れる。


$('#carousel-base-wrap').css({borderRadius:'10px',boxShadow:'0 0 10px #000'});

#carousel-base-wrap{
overflow:hidden;
z-index:1;
}

Firefox対策のため下記の様に角丸無しに変更した。またoverflow:hiddenの位置も変えた。


//Firefoxはbase-wrapでoverflow:hiddenできない
//Firefox角丸成らない
$('#carousel-base-wrap').css({boxShadow:'0 0 10px #000'});

#carousel-3d-base{
overflow:hidden;
}

通常のjquery.transit.jsを使用する場合

通常のjquery.transit.jsはZ軸に対応していませんので、CSSをJSで設定する時、transformを利用することになりますが、制約も多く3D本体が歪んだり回転軸がずれたりすることが有ります。また当然アニメ中でZ軸の制御は出来ません。
Firefoxではかなり厳しい状態です。いつの日にか、正式にjquery.transit.jsがZ軸に対応するのを待つほか方法は無い。


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

 

ちょっとだけ最後にのたまう

ちょっとしたCSS設定の違いで構造が出来なくなったりしますので、ご注意ください。
transit.jsのバージョンアップなどの事由、または、transform-style:preserve-3d 対応に変わったりした時は書き換える可能性があります。
JSの変更などは自由ですが、問題がでましたら自己解決ください。


Carouselタイプのものです。基本的なことなので参照ください。改造jquery.transit.jsも極簡単に作れます。

【参考】当方の記事: jQuery CSS3 3D回転Carouselをtransit.jsで処理する


以上です。

 


[ この記事のURL ]


タグ:jquery , Transition , css3

 

ブログ記事一覧



[1]