POPSブログ

jQuery CSS3 transit.js使用のボタン式画像分割アニメーション

364

  Category:  jquery2015/08/15 pops 

jQueryプラグイン、jquery.transit.js、で簡単にCSS3 transitionの記述が出来ますので画像分割アニメーションに応用、回転も簡単に出来て便利、通常のjQueryアニメーションより軽快に動作。ボタンとHOVERサムネール表示形式にしてみました。

 

jQuery CSS3 transit.js使用の画像分割アニメーション2、(ボタン配置形式)テスト


jquery.transit.js、jQueryプラグインで簡単にCSS3 transitionの記述が、カスタムアニメーション animate() ライクに書けますので、通常の画像を回転させたり拡大させたりと便利です。通常のjQueryアニメーションより軽快に動作します。

以前はCSS3未対応のブラウザも多かったが、現在はセキュリティの観点から「モダンブラウザ」にほぼ移行して来ましたので、CSS3 transitionで処理してみます。

 

zu

 

ご注意、IE10以上のモダンブラウザでご覧ください(Chrome推奨)。IE9およびそれ以前のブラウザではご覧になれません。
但し、Android系の動作は不明です。


説明用画像分割アニメーション2 (ボタン配置形式)

これは、説明用の「画像分割アニメーション」で簡略化しています。(このページではjquery-1.6.4とjquery.transit.jsを使用)


分割アニメーション実行中以外の時「ボタン」が機能します。(AUTO文字表示の時)、表示中の画像には無効です。

 

 

このテスト表示を見ても、CSS3 transition によって従来より早く軽く処理されているのが判ります。

 

1. 回転が簡単に出来るのが最大の利点。(scale等も使用可能)
2. 3D等も可能です。(ブラウザの機能によって多少違いあり)
3. 以前のjQuery animate()処理と比較して格段に軽い。(全てでは無いが...)
4. 軽いのでアニメーション時間も長く出来、Easingの指定も容易です。
5. 現在、transit.js対応はAndroid系が含まれていませんので動作は不明です。

 

DEMO2


DEMO2、欄外にサムネールボタンを配置した形 (2015/08/16追加)
JS、CSS はDEMO2ページに有ります。

DEMO-024




 

簡単な説明


CSS3 transition画像分割アニメーション2の説明


「前ページ」の「画像分割アニメーション」slice-transition-st.js にボタンとHOVERサムネール表示を追加したものです。
「画像分割アニメーション」の部分はjQueryプラグイン、jquery.transit.jsを利用してCSS3 transition処理をしています。JS詳細は「前々ページ」の記事を参照ください。


【参照】当方の記事: jQuery CSS3 transit.js使用の画像分割アニメーション (ボタンとHOVERサムネールなし)


ボタンとHOVERサムネール表示を追加

ボタンを押せば対応する画像を表示出来ます。そのまま放置すればAUTOに切り替わり、次の画像を表示します。


 

上記デモのHTML JS CSS

transition処理には jquery.js の他に jquery.transit.js が必要です。


HTML

ボタンとHOVERサムネールの #btn-box #thumb-box が追加されています。


<div id="image-box-base">
	<div id="image-box"><img /></div>
	<div id="top-box"></div>
	<div id="loading"></div>
	<div id="text-view"></div>
	<div id="btn-box"></div>
	<div id="thumb-box"><img /></div>
</div>

JS

slice-transition-bt.js
「前々ページ」のサンプル、slice-transition-st.js にボタンとHOVERサムネール表示を追加したものです。


//slice-transition-bt.js
//説明用の簡略形/BTN、サムネール表示
//標準、ラップしない1枚DIV形式、一応機能する
//z-index変更、各階層もz-indexをつけた

(function($){

	$(function () {

		//角丸、陰影必要でないなら削除する
		$('#image-box-base').css({borderRadius:'10px',boxShadow:'0 0 10px #000'});

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

		var split_free=true;//自動分割 true false
		var speed=800;//拡大移動、アニメ速度
		var delay_speed=120;//出現間隔、delay基準時間 100-200

		//自動分割でない場合の分割
		var split_h=11;//標準の横方向分割数、奇数値
		var split_v=5;//標準の縦方向分割数、奇数値
		var split_total;

		//読み込み画像の大きさ、未使用
		var imageH=640;
		var imageW=300;

		//baseの大きさ/全てこの値を使用
		var box_W=640;//画像BOX幅
		var box_H=300;//画像BOX高さ

		//タイマーの使用、useであること
		var timer_use="use";
		//タイマー値 5000-10000
		var time=5000;

		//パーツのセット true/使用しない場合はfalse
		var partsset=true;//true

		//テキスト表示の使用 use=true
		text_use=true;//true false

		//自動分割の場合、free分割データを登録/奇数値が良い
		var splitHs=[13,11,11,9,7];
		var splitVs=[7,5,5,5,3];

		//スケール方向番号データ 0-3
		var scales=[0,0,1,1,2,3];
		//回転データ、余り回転しない
		var rotates=[0,0,0,0,1,2,3];

		//画像リスト
		var loadImage_len=0;
		var imagelist=[
			"/main/images/flight01.jpg",
			"/main/images/flight02.jpg",
			"/main/images/flight03.jpg",
			"/main/images/flight04.jpg",
			"/main/images/flight05.jpg",
			"/main/images/flight06.jpg"
		];
		loadImage_len=imagelist.length;

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

		//読み込み画像URL保存容器
		var assets=[];
		//分割大きさ位置保存容器
		var chip_W=[],chip_H=[],chip_pos_X=[],chip_pos_Y=[];
		//実際配置位置
		var set_pos_X=[],set_pos_Y=[];
		//移動配置位置
		var mov_pos_X=[],mov_pos_Y=[];

		//変数
		var globalflag=false,timerID=null;
		var inType=true;
		var moveType="";
		var once=true;
		var viewtext;
		var sliceflag=0;
		var keep_url;

		//ボタン サムネール
		var clickbtns=[];//未使用
		var hover_thumb;

		//最初の画像0のこと
		var image_no=0;
		//画像数
		var image_max=0;

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

		//外枠jqueryオブジェクト
		var tabmenu=$("#tab-menu");
		var boxbase=$("#image-box-base");
		var imagebox=$("#image-box");
		var topbox=$("#top-box");
		var loading=$("#loading");
		var textview=$('#text-view');
		//
		thumb_box=$('#thumb-box');
		thumb_box.fadeOut(50);
		//角丸、陰影必要でないなら削除する
		thumb_box.css({borderRadius:'5px',boxShadow:'0 0 5px #000'});

		//欄外移動
		topbox.css({'left':box_W});
		//loadingを一旦けす
		loading.css({'display':'none'});
		//スタート
		init();

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

		//ステージ周りセット
		function init() {

			//bulk-load、画像一括ロード
			bulkload();

		}

		//DRAW、アニメ
		function imagedraw() {

			globalflag=false;
			//カウントクリア
			sliceflag=0;
			//TEXT
			text_set("");

			//ボタン active表示変更
			if (partsset) {
				$('#btn-box').find(".circle-btn").each(function(i){
					$(this).removeClass("active");
					if(i == image_no){$(this).addClass("active");}
				});
			}

			//IN OUTを確率で決定
			inType=true;
			var in_no=Math.floor(Math.random()*2);
			if (in_no == 0) {inType=false;}

			//最初はIN
			if(once){
				once=false;
				inType=true;
			}

			//分割変更
			if (split_free) {
				var splitNo=Math.floor(Math.random()*splitHs.length);
				//分割値代入
				split_h=splitHs[splitNo];
				split_v=splitVs[splitNo];
			}
			split_total=split_h*split_v;

			//スライスオブジェクトを作る
			var chipboxs=[];//ラップ未使用
			var transboxs=[];//ラップ無し
			//計算上の仮想ポイント
			var virtual_X=[];
			var virtual_Y=[];

			//make chip
			var sliceboxs="";
			for (var i=0; i < split_total; i++) {
				sliceboxs += '<div id="'+ 'slice'+ i + '" class="slice_bk"></div>';
			}
			//append #top-box
 			$('#top-box').append(sliceboxs);

			for (var i=0; i < split_total; i++) {
				transboxs[i]=$("#slice"+i);//オブジェクト保存

			}

			//スライス寸法データを得る1
			slice_set(box_W,box_H,split_h,split_v);
			//分割合計要素数計算
			split_total=split_h*split_v;

			//背景画像挿入
			var slice_url=assets[image_no];
			if (!inType) {slice_url=keep_url;}

			var k=0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//DIVの位置と大きさ
					transboxs[k].css({'left':chip_pos_X[k],'top':chip_pos_Y[k],'width':chip_W[k],'height':chip_H[k]});
					//背景画像セット
					transboxs[k].css({'width':chip_W[k],'height':chip_H[k],'background-image':'url('+ slice_url + ')'});
					//BACKGROUND-SET position
					transboxs[k].css({'backgroundPosition':(chip_pos_X[k] * -1) + 'px ' + (chip_pos_Y[k] * -1) + 'px'});

					k++;
				}
			}

			//out
			if (!inType) {imagebox.children("img").attr({'src':assets[image_no]}).css({'display':'block'});}

			//アニメ条件設定
			//配列クリア
			var delay_st=[];
			var delay_pt=[];
			//rotation受渡変数配列
			var rotate_v=[];
			//動きの分類
			moveType="";

			//標準パターン番号削除未使用
			var patternflag=false;
			//パターン番号未使用
			var pattern_no=0;

			//多目的判定用
			var chgxyflag=Math.floor(Math.random()*5);
			//多目的用2
			var chgflag=Math.floor(Math.random()*3);

			//多目的判定用3 1-2の値
			var chgflag2=Math.floor(Math.random()*2)+1;
			//逆転フラグ
			var chg_v=Math.floor(Math.random()*2);
			if (chg_v < 1) {chg_v=-1;}

			//タイプ決定フラグ未使用
			var typeflag=0;

			//delay番号
			var delay_no=Math.floor(Math.random()*11);

			//delayed遅延させる/20%
			var delayed=Math.floor(Math.random()*5);
			//半径、幅の60%で外側配置
			var radius=Math.floor(box_W*0.6);


			//配置disposition位置番号/加算値
			var disposition_no=Math.floor(Math.random()*8);
			var disposition_X=0;
			var disposition_Y=0;

			//スケール方向番号
			var scale_no = scales[Math.floor(Math.random()*scales.length)];
			var scale_X=0;
			var scale_Y=0;

			//回転データ取得
			var rotate=rotates[Math.floor(Math.random()*rotates.length)];

			//透明度
			var alpha_no=Math.floor(Math.random()*2);
			//速度補正係数
			var spd_v=1;

			//radius半径補正、20% 円形の内部位置になる/強制透過
			if (chgxyflag == 0) {radius *=0.5;alpha_no=0;}

			//回転の場合の食み出し防止、長いので見える、透過させる
			if (split_h == 1 || split_v == 1) {
				if (rotate > 0) {alpha_no=0;}
			}

			//Even算出
			var even_v = 1;
			if (split_v % 2 != 0) {even_v = 0;}

			//Bitmap配置、配置条件設定
			var vx=0,vy=0,angle_v=0;
			var shc=(split_h/2)-0.01;
			var svc=(split_v/2)-0.01;
			var diag_no=0;
			var v_x=0;
			var v_y=0;
			flag3=1;
			var k=0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//仮想ポイント/計算用の仮想位置
					virtual_X[k]=chip_pos_X[k]+chip_W[k]/2;
					virtual_Y[k]=chip_pos_Y[k]+chip_H[k]/2;

					//中子戻り位置
					set_pos_X[k]=0;
    					set_pos_Y[k]=0;

					//移動加算値等の計算
					switch(disposition_no){
						case 0://その場所で
							disposition_X=0;
							disposition_Y=0;
							spd_v=0.5;
						break;
						case 1://XY内部ランダム位置
							disposition_X=Math.floor(Math.random()*box_W)-virtual_X[k];
							disposition_Y=Math.floor(Math.random()*box_H)-virtual_Y[k];
							spd_v=1;
						break;
						case 2://中央OK
							disposition_X=box_W/2-virtual_X[k];
							disposition_Y=box_H/2-virtual_Y[k];
							spd_v=0.8;
						break;
						case 3://外側に、radius半径補正あり/仮想ポイントとの差を移動OK
							var angle=Math.random()*360;
							disposition_X=(Math.cos(angle)*radius+(box_W/2))-virtual_X[k];
							disposition_Y=(Math.sin(angle)*radius+(box_H/2))-virtual_Y[k];
							scale_no=0;//補正
							spd_v=1.5;
						break;
						default://その場
							disposition_X=set_pos_X[k];
							disposition_Y=set_pos_Y[k];
							spd_v=1;
					}

					//スケール方向決定
					switch(scale_no){
						case 0:
							scale_X=0;scale_Y=0;
						break;
						case 1:
							scale_X=1;scale_Y=1;
							alpha_no=0;//スケール方向番号補正
						break;
						case 2:
							scale_X=0;scale_Y=1;
						break;
						case 3:
							scale_X=1;scale_Y=0;
						break;
						default:
							scale_X=0;scale_Y=0;
					}

					//rotation値の決定 90度x、逆転有り
					rotate_v[k]=rotate*90*chg_v;

					//回転の変化、回転0以外なら交互逆転する、確率33%
					if (chgflag == 1) {rotate_v[k] *= flag3;}

					//初期の移動
					//IN
					if (inType) {
    						//一括補正/細部補修の必要あり
						mov_pos_X[k]=disposition_X;
						mov_pos_Y[k]=disposition_Y;
						//CSS
						transboxs[k].css({translate:[mov_pos_X[k],mov_pos_Y[k]],rotate:rotate_v[k],scale:[scale_X,scale_Y],'opacity':alpha_no});
					}

					//OUT
					if (!inType) {
						//一括補正/細部補修の必要あり
						mov_pos_X[k]=disposition_X;
						mov_pos_Y[k]=disposition_Y;
						//XY位置はそのままで良い
						transboxs[k].css({translate:[0,0],rotate:0,scale:[1,1],'opacity':1});
					}

					k++;
					flag3 *=-1;
				}
				if (even_v) {flag3 *=-1;}
			}

			//delay_no10 ランダムを減らす30%
			if (delay_no == 10 && chgflag) {delay_no=0;}

			//delayの計算/通常より増やした
			var sh=split_h-1;
			var sv=split_v-1;
			var flag3=1;
			var kk=0;//方向違いカウント
			var kkk=0;//半分でカウントダウン
			var k3=0;//逆斜め
			var k=0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					k3=(split_h-j)+i;//逆斜め
					//縦方向にカウント
					kk=i*split_v+j;
					kkk=k;
					if (k > (split_total-1)/2) {kkk=Math.abs(split_total-k)-1;}

					if (delay_no < 2) {delay_st[k]=(i+j)*delay_speed;}//斜め
					if (delay_no > 1 && delay_no < 4) {delay_st[k]=k3*delay_speed;}//左右逆斜め
					if (delay_no == 4) {delay_st[k]=(i+j+k/split_total/4)*delay_speed;}//滑らか

					if (delay_no == 5) {delay_st[k]=(1+kkk*0.05)*delay_speed;}//ほぼ同時
					if (delay_no == 6) {delay_st[k]=kk*delay_speed;}
					if (delay_no == 7) {delay_st[k]=kkk*delay_speed;}
					if (delay_no == 8) {delay_st[k]=(Math.abs(Math.abs(i-sh/2)-sh)+Math.abs(Math.abs(j-sv/2)-sv))*2*delay_speed;}//円形状外から中心に
					if (delay_no == 9) {delay_st[k]=(Math.abs(i-(sh/2))-Math.abs(j-(sv/2)))*3*delay_speed;}//対角組あわせX状に
					if (delay_no == 10) {delay_st[k]=Math.floor(Math.random()*split_total)/2*delay_speed;}//適当なランダム

					if (delay_no > 10 ) {delay_st[k]=k*2*delay_speed;}

					//分割数が少ない場合早いので、間隔をあける1.5-3
					if (split_total < 16) {delay_st[k] *=2;}

					//delayed遅延
					if (delayed == 1) {
						if (flag3 < 0) {delay_st[k] +=1000;}
					}

					k++;
					flag3 *=-1;

				}
				if (even_v) {flag3 *=-1;}
			}

			//delay反転
			if (chgxyflag > 2) {
				delay_st.reverse();

			}

			//移動、z-index変更はで狂うので先に実行
			topbox.css({'left':0});

			//配列
			var number=[];
			for (var i=0; i < split_total; i++) {
				number[i]={'id':i,'delay':Math.floor(delay_st[i])};
			}
			//配列をソート/delayの昇順にsort
			number.sort(function(a,b) {
				var x=a.delay;
				var y=b.delay;
				if(inType){return x > y ? 1 : -1;}//IN昇順
				if(!inType){return x < y ? 1 : -1;}//OUT降順
			});

			for (var i=0; i < split_total; i++) {
				var dno=number[i].id;
				//ラップ無し
				transboxs[dno].css({'z-index':i});
			}

			//text_set("inType/ "+inType+" / disposition_no "+disposition_no+" / delay_no "+delay_no);

			//並び替えに時間がかかるので調整
			setTimeout(function() {

				//移動ここではまずい
				//topbox.css({'left':0});

				//アニメの実行
				var k=0;
				var params={};
				for (var i=0; i < split_h; i++) {
					for (var j=0; j < split_v; j++) {

						if (inType) {
							transboxs[k].delay(delay_st[k]).transition({translate:[0,0],rotate:0,scale:[1,1],'opacity':1},speed,"ease",function(){
								sliceflag ++;
								//終了
								if (sliceflag == split_total) {finshAll();}
							});

						}
						if (!inType) {
							transboxs[k].delay(delay_st[k]).transition({translate:[mov_pos_X[k],mov_pos_Y[k]],rotate:rotate_v[k],scale:[scale_X,scale_Y],'opacity':alpha_no},speed,"ease",function(){
								sliceflag ++;
								//終了
								if (sliceflag == split_total) {finshAll();}
							});
						}

						k++;

					}
				}

			},800);//500-1000
		}

		//アニメ全て完了
		function finshAll () {

			//全てが完了してから下画像表示
			if (inType) {
				imagebox.children("img").attr({'src':assets[image_no]}).css({'display':'block'});
			}

			topbox.empty();
			topbox.css({'left':imageW});

			//クリア
			globalflag=true;
			keep_url=assets[image_no];

			//遅延
			setTimeout(function() {

				text_set("AUTO");
				//タイマー次ぎ開く
				if (timer_use == 'use') {
					set_timer();
				}

			},500);

		}

		//スライス要素の位置大きさ決定、保存
		function slice_set(bw,bh,slh,slv) {
			//スライス
			slice_W=Math.round(bw/slh);//YOKO
			slice_H=Math.round(bh/slv);//TATE
			slice_Wb=bw-slice_W*(slh-1);
			slice_Hb=bh-slice_H*(slv-1);
			var k=0;
			for (var i=0; i < slh; i++) {
				for (var j=0; j < slv; j++) {
					//大きさ保存
					chip_W[k]=slice_W;
					if (i == slh-1) {chip_W[k]=slice_Wb;}
					chip_H[k]=slice_H;
					if (j == slv-1) {chip_H[k]=slice_Hb;}
					//位置保存中央補正前
					chip_pos_X[k]=(slice_W*i);
					chip_pos_Y[k]=(slice_H*j);
					k ++;
				}
			}
		}

		//image-load、1画像ロード
		function imageload() {
			//
		}

		//bulk-load、画像一括ロード
		function bulkload() {

			text_set("Loading Now!");
			//Loading
			loading.css({'display':'block'});

			//画像マルチローダーに進む
			imageload_count=0;
			multiLoader();

		}

		//画像複数ローダー1
		function multiLoader() {

			//画像Load終了判定
			if(imageload_count < loadImage_len) {
				//読み込み
				getLoadImage();
			} else {
				//終了
				multicomplete();
			}
		}

		//new Image()の実行
		function getLoadImage() {

			//new Loader
			var image_loader=new Image();
			image_loader.onload=function() {

				//サムネールURL保存
				assets.push(imagelist[imageload_count]);
				//次画像のロード
				imageload_count ++;
				multiLoader();
			}
			image_loader.onerror=function() {

				//カウントアップのみ
				imageload_count ++;
				multiLoader();
			}
			//URL
			image_loader.src=imagelist[imageload_count];
		}

		//全ての画像読み込み完了
		function multicomplete() {

			//画像数確認、再計算
			image_max=assets.length;
			//簡易TEXT
			text_set("Loading End!");
			//Loading
			loading.css({'display':'none'});
			//時間調整
			setTimeout(function() {

				//パーツのセット
				parts_set();
				//分割描画
				imagedraw();

			},1000);

		}

		//次ぎの開く要素を計算
		function next_set() {

			//次ぎの番号
			image_no +=1;
			if (image_no > (image_max-1)) {image_no=0;}
			imagedraw();

		}
		//タイマー
		function set_timer() {

			//タイマー再セット
			if (timer_use == 'use') {

				//一旦切ってからセット
				clearTimeout(timerID);
				timerID=setTimeout(next_set,time);
			}

		}

		//TEXT表示
		function text_set (t) {
			if (text_use) {
				textview.text(t);
			}
		}

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

		//パーツのセット
		function parts_set () {

			if (partsset) {

				var btns_html="";
				for (var i=0; i < image_max; i++) {
					btns_html +='<span class="circle-btn"></span>';
				}
				//pに入れる
				btns_html='<p>' + btns_html + '</p>';
				//#top-boxにappendする
 				$('#btn-box').append(btns_html);

				//アクションセット
				$('#btn-box').find(".circle-btn").each(function(i){

					//角丸、陰影必要でないなら削除する
					$(this).css({borderRadius:'5px',boxShadow:'0 0 5px #000'});
					clickbtns[i]=$(this);//オブジェクト保存、未使用

					$(this).click(function() {
						hit_image(i);
					});
					$(this).hover(function() {
						$(this).toggleClass("hover");
						if ($(this).hasClass('hover')) {
							open_hover_image(i);
						} else{
							close_hover_image();
						}
					});
				});

			}
		}

		//ボタンが押された処理
		function hit_image(no){

			var hitno=no;
			//同じ番号は除く
			if(hitno == image_no) {return false;}

			//条件アニメ外
			if(globalflag){
				//タイマー一旦切る
				clearTimeout(timerID);
				image_no=hitno;
				imagedraw();

			}else{
				return false;
			}

		}

		//HOVERサムネール処理
		//thumb-open
		function open_hover_image(no){
			thumb_box.children("img").attr({'src':assets[no]});
			thumb_box.fadeIn(200);
		}
		//thumb-close
		function close_hover_image(){
			thumb_box.fadeOut(50);
		}

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

	});

})(jQuery);


CSS

注意、各々の構成要素には適当な z-index が必要です。

slice-transition-bt.css


/* slice-transition-bt.css 日本語 */
/* image-box-base */
#image-box-base {
position:relative;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
background:url("/main/images/welcome_back4.jpg") no-repeat center center;
background-color:#000000;
overflow:hidden;
z-index:1;
}

/* image-box */
#image-box {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
z-index:2;
}
#image-box img {
padding:0;
margin:0;
}

#top-box {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
z-index:3;
}

#top-box .slice_bk {
position:absolute;
background-position: 0 0;
top:0;left:0;
/*overflow:hidden;*/
}

/* loading */
#image-box-base #loading {
display:block;
position:absolute;
top:0;left:0;
width:100%;height:100%;
background:url("/main/images/loading.gif") no-repeat center center;
background-color:transparent;
z-index:4;
}
#text-view{
position:absolute;
top:0;left:0;
display:block;
width:630px;
height:16px;
padding:2px 5px;
font-size:12px;
color:#FF0000;
z-index:5;
}
#btn-box{
position:absolute;
bottom:0;left:0;
display:block;
width:640px;
height:15px;
z-index:6;
}
#btn-box p{
position:relative;
width:auto;
margin:0 auto;
line-height:100%;
text-align:center;
}
#btn-box p span{
display:inline-block;
width:10px;
height:10px;
margin-left:5px;
text-align:center;
background-color:#DAA520;
cursor:pointer;
}
#btn-box p span.active{
background-color:#FF0000;
}
#btn-box p span.hover{
background-color:#FFFFFF;
}

#thumb-box{
position:absolute;
bottom:40px;left:256px;
display:block;
width:128px;
height:60px;
border:2px solid #FFFFFF;
background-color:#FFFFFF;
z-index:7;
}
#thumb-box img{
width:100%;
height:100%;
margin:0;
padding:0;
}

#thumb-box:after, #thumb-box:before {
top:100%;
left:50%;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
}

#thumb-box:after {
border-color:rgba(255,255,255,0);
border-top-color:#FFFFFF;
border-width:10px;
margin-left:-10px;
}
#thumb-box:before {
border-color:rgba(255,255,255,0);
border-top-color:#FFFFFF;
border-width:11px;
margin-left:-11px;
}


 

ボタンとHOVERサムネール表示の処理


ボタンとHOVERサムネール表示の処理の切り替えなどの説明

 

パーツのセット

JS上部の設定により切り替えます。falseの場合は、ボタンとHOVERサムネール表示はしません。



//パーツのセット
var partsset=true;

ボタンを作りアクションをセットする

span要素でボタンを作りp要素に収容して、#btn-box にappendしています。
単純な構造で「中央表示」が簡単に出来ます。div要素で作ると結構大変です。
● アクションなどのセットは each() で処理した方が楽です。
● オブジェクト保存用clickbtns[i]、は保存していますが未使用です。



//パーツのセット
function parts_set () {

	if (partsset) {

		var btns_html="";
		for (var i=0; i < image_max; i++) {
			btns_html +='<span class="circle-btn"></span>';
		}
		//pに入れる
		btns_html='<p>' + btns_html + '</p>';
		//#top-boxにappendする
 		$('#btn-box').append(btns_html);

		//アクションセット
		$('#btn-box').find(".circle-btn").each(function(i){

			clickbtns[i]=$(this);//オブジェクト保存、未使用

			$(this).click(function() {
				hit_image(i);
			});
			$(this).hover(function() {
				$(this).toggleClass("hover");
				if($(this).hasClass('hover')) {
					open_hover_image(i);
				}else{
					close_hover_image();
				}
			});
		});

	}
}

【重要】、ボタンに画像、文字を入れる場合は、p要素の line-height に注意して変更ください。



#btn-box p{
position:relative;
width:auto;
margin:0 auto;
line-height:100%;
text-align:center;
}

ボタンが押された処理

ボタンが押された処理は以下の通りで、表示している画像が同じ場合、アニメ実行中はボタンが機能しません。

アニメ実行中にアニメを停止 stop() することも可能ですが、「画像分割」では旨く stop() 処理するのは大変難しく、また停止すると見た目も悪くなるので、最後までアニメを実行した方がよいと思います。
よって、stop()処理は行っていません。完全にアニメが終了してから色々な処理をするようにしています。


1. アニメ実行中はボタンが機能しません。(stop()処理を省くため)
2. アニメstop()処理は行っていません。
3. 「画像分割」では、このような処理が一番良いと思います。
4. アニメ実行中、判定用の globalflag は false になるように処理しています。



//ボタンが押された処理
function hit_image(no){

	var hitno=no;
	//同じ番号は除く
	if(hitno == image_no) {return false;}

	//条件アニメ外
	if(globalflag){
		//タイマー一旦切る
		clearTimeout(timerID);
		image_no=hitno;
		imagedraw();

	}else{
		return false;
	}

}

//HOVERサムネール処理
//thumb-open
function open_hover_image(no){
	thumb_box.children("img").attr({'src':assets[no]});
	thumb_box.fadeIn(200);
}
//thumb-close
function close_hover_image(){
	thumb_box.fadeOut(50);
}

ボタンを外に配置変更する

ボタンは現在、#image-box-base の中にありますが、外に出すことも可能です。この場合 z-index はいりません。
現在、中にあるので、position:absolute ですがこの辺は都合のよい様に変更ください。



<div id="image-box-base">
	<div id="image-box"><img /></div>
	<div id="top-box"></div>
	<div id="loading"></div>
	<div id="text-view"></div>
	<div id="thumb-box"><img /></div>
</div>
<div id="btn-box"></div>

タイマーで次画像を表示する機能を停止する

タイマー機能を停止すれば、最初の画像を表示して停止しますので、ボタンのみで表示出来ます。
● JS上部、タイマー使用設定を use 以外にする。
● 文字表示、AUTO を変更する。HIT-BTN など記述は自由。



//タイマーの使用
var timer_use="";


//アニメ全て完了
function finshAll () {

	途中省略

	//遅延
	setTimeout(function() {

		text_set("HIT-BTN");
		//タイマー次ぎ開く
		if (timer_use == 'use') {
			set_timer();
		}

	},500);

}

ボタンのactive表示変更

ボタン active表示変更は下記の様に行っています。色々な方法があると思いますが、一例です。



//ボタン active表示変更
if (partsset) {
	$('#btn-box').find(".circle-btn").each(function(i){
		$(this).removeClass("active");
		if(i == image_no){$(this).addClass("active");}
	});
}

角丸、陰影処理

jquery.transit.jsを読み込んでいるので、「角丸、陰影」処理を下記の様に3箇所行った。簡単で有る。
当然CSS側で記述しても良い。




//角丸、陰影必要でないなら削除する
$('#image-box-base').css({borderRadius:'10px',boxShadow:'0 0 10px #000'});

//角丸、陰影必要でないなら削除する
thumb_box.css({borderRadius:'5px',boxShadow:'0 0 5px #000'});

//アクションセット
$('#btn-box').find(".circle-btn").each(function(i){

	//角丸、陰影必要でないなら削除する
	$(this).css({borderRadius:'5px',boxShadow:'0 0 5px #000'});

	略す
});

HOVERサムネールのCSS3について

矢印の付いたサムネール枠を使用しています。制作と変更などは下記のジェネレーターを参考にして下さい。

【参考】当方の記事: css arrow please


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。DEMO2ページより取得できます。

Loading画像

 



 

ボタンとHOVERサムネール表示のないものは「前々ページ」を参照ください。

【参照】当方の記事: jQuery CSS3 transit.js使用の画像分割アニメーション

transit.jsに付いては下記ページの記事を参照ください。

【参照】当方の記事: jQuery transit.jsの使用方法を調べてみました


 

以上です。

 


[ この記事のURL ]


タグ:slice , Transition , jquery

 

ブログ記事一覧



[1]