POPSブログ

baserCMS4.0系 TOP画像のTransition処理

401

  Category:  basercms2017/01/10 pops 

baserCMS4.0系レスポンシブデザイン「TOP画像のTransition処理」画像分割処理をレスポンシブ対応にしてみました。「Transition処理」部分の縮尺変更で対処します。動作にはHTML5ベースが条件です。

 

demo14

 

baserCMS4.0系 TOP画像のTransition処理のテスト

「Transition処理」部分をmax-widthで処理出来ないため、縮尺変更で対処しているのが特徴に成ります。
「Transition処理」については当方の記事を参照ください。jquery.transit.jsは配布元よりダウンロードください。


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

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

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

 

1. 画像分割Transition処理はjquery.transit.jsを使用します。
2. モダンブラウザのみの対応になります。対象ブラウザ以外は静止画を表示します。
(IE10およびそれ以下、意味なしだがブラウザ幅に応じて静止画像も縮小します)
3. レスポンシブ表示に max-width を利用しません。
(その都度、必要要素の横縦幅をjQueryで「無理やり修正」しています)
4. CSS3処理のため画像は完全読み込み済みであること。loaderで事前に読み込み処理する。
5. CSS3処理のため結構動作が軽快です。デモでは940x300サイズの画像6枚使用しました。
6. 画像が大型ですから、スマートフォンには迷惑な話です。
(デモでは940x300サイズ画像を使用しています)


ie10

 

模擬デモ14、画像Transition処理TOPページ

自作「Transition処理」の簡単な画像分割アニメーションをTOPページにねじ込みました。多少の分割変更など可能です。

実際、iphone ipad で表示の際、縮小されているため各デバイスの解像度によっては、分割面に線が入る場合がありますが、
不良品では有りません。それなりの見え方になります。


demo14

 

DEMOはローカル動作で生成したHTMLを表示しています。
注意、動作確認の模擬ページですので、リンクなどは機能しません。


● 模擬デモページ (http://pops-web.com/main/baserhtml/top14.html) : TOPページの模擬出力HTML

● スマートフォン等の表示 : 確認ツールで見た場合の表示

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。


 

HTML CSS JSについて

DEMOで使用したjQueryは jquery-1.11.3.min.js、transitは jquery.transit.js(v0.9.12)です。
HTML CSS JSについて説明します。対象はモダンブラウザのみになります。


HTML構造 (HTML5の中に構築)

#transition-wrapはTransition処理用の構造。#mainImgはTransition処理の出来ないIE10他用の構造です。
JSでTransition処理出来ないブラウザならば、#mainImgに代替画像を入れて、上構造を削除します。


<div id="transition-wrap">
 <div id="transition-box">
  <div id="transition-box-inner">
   <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>
  </div>
 </div>
</div>
<div id="mainImg"></div>

以下、画像のパスは当方の場合です。利用の際は適正なパスに変更ください。


● Transition初期画像の表示

最初は黒画面ですが、「初期画像」を背景または#image-boxにセットできます。
必要でない場合は、使用する複数画像の最後の画像をセットします。
「初期画像」は一回きりの表示になります。複数画像の読み込みに時間を要しますのでセットすれば自然な流れになります。


背景画像でセットする場合
background:url('/main/baserhtml/images/mainImg20.jpg') no-repeat center center;

構造の中にセットする場合
<div id="image-box"><img src="/main/baserhtml/images/mainImg20.jpg" />

● Transition処理出来ないブラウザなら#mainImgに代替画像を入れる

#mainImgはbaserCMSの初期CSSの設定です。#mainImgは一回限りですから不便です、新たなCSSでクラス表示するならば、下記の様にします。


ID名は何でも良い、JS側もあわせること
<div id="autoMainImg" class="autoImage" ></div>

/*画像中央表示クラス*/
.autoImage{
text-align:center;
margin:0;
padding:0;
}
.autoImage img{
max-width:100%;
height:auto;
}

---------------------------------------------------------
JS側もあわせること

//分岐
if(browserIE){
	//IE10と以下
	//$('#mainImg').append('<img src="/main/baserhtml/images/mainImg12.jpg" />');
	$('#autoMainImg').append('<img src="/main/baserhtml/images/mainImg12.jpg" />');
	$('#transition-wrap').remove();
}
else{init();}

CSS

構造構成用とTransition処理用と2種類のCSSがあります。
使用する画像の大きさを記入ください。また画像URLが必要な所は画像までのパスを記入します。
下記、CSSはテキトウな名前で保存して読み込み使用します。

サンプルCSS

構造構成用CSS


/*重要*/
#Page{
overflow:hidden;
}

/* slice-transition-1.css */
#transition-wrap{
clear:both;
width:100%;
height:auto;
margin:0;
}
#transition-box {
position:relative;
width:940px;
height:300px;
margin:0 auto;
}
#transition-box-inner {
position:absolute;
top:0;left:0;
display:block;
width:940px;
height:300px;
padding:0;
}

Transition処理用CSS


/* image-box-base */
#image-box-base {
position:relative;
display:block;
width:940px;
height:300px;
padding:0;
background:url('/main/baserhtml/images/mainImg12.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:940px;
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:940px;
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/baserhtml/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;
}

JS

JSは画像分割JSをレスポンシブ表示用に追加処理したオリジナルです。Transition部はpx処理ですのでブラウザ幅を取得判断してスケールで伸縮しています。

max-widthレスポンシブ表示はTransition部本体のズレが生じるので、ブラウザ幅を取得して必要な箇所の幅高さをjQueryで修正しています。目だって反応が遅いことも有りませんので、使用に耐えれると思います。


JS上部で動作などの初期設定を行います。


● 分割画像のアニメの速度など。タイマー値はアニメ終了後のサイクルタイムです。


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

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

● 分割数、縦横の分割数を記載します、同じ分割数がある場合は出現割合が多くなります。分割なしは 1 です。奇数値を設定した場合の方がアニメはキレイになります。
正方形分割(または正方形に近い分割)に適したアニメに設定されていますが、どのような分割でもそれなりにアニメします。
気に入らない場合は「叱って」やってください。


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

● 下記は変更しないでください。


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

● 画像リストに画像を登録します。Transitionアニメ処理は「完全読み込み済み」が条件ゆえLoaderで読み込みます。
スグに読み込み完了しますのでローデング画像などはいらないくらい。
読み込みに失敗すればスキップしてアニメ表示しません。表示しない場合は画像パスを確認ください。


//画像リスト
var imagelist=[
	"/main/baserhtml/images/mainImg4.jpg",
	"/main/baserhtml/images/mainImg5.jpg",
	"/main/baserhtml/images/mainImg6.jpg",
	"/main/baserhtml/images/mainImg10.jpg",
	"/main/baserhtml/images/mainImg11.jpg",
	"/main/baserhtml/images/mainImg12.jpg"
];

● 画像修正係数、設定係数値で縮尺しますが、陰影をつけた場合は特に有効になります。
ブラウザ幅にもよりますが、画像より狭いと図の様に陰影が切れますので少し縮小して配置させます。
縮尺しても、CSS3処理のため以外と軽快ですが、画像表示品質はモニター解像度、ブラウザなどによって差異があります。

kireru

//画像修正係数0.95-1.0
img_rate=0.98;

● 角丸、陰影処理


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

● 描画レーヤーのoverflow解除

overfalow

現在Transitionアニメ処理層など全体がoverflow:hidden状態でマスクされています。overflow解除しますと「描画レーヤー」全体に描画され、上図の様に表示出来ます。この際に角丸処理は無意味ですので下記の様に変更します。
但し、PC以外では余り効果がないかも知れません。処理はランダムですので常時枠外で表示される訳ではない。



CSS
#image-box-base {
/*overflow:hidden;*/
}
---------------------------------------------------------
JS
//陰影のみ
$('#image-box-base').css({boxShadow:'0 0 10px #000'});

● JSの読み込み順序

1. jQueryを最初に、(jquery-1.11.3.min.js)
2. jquery.transit.js、(jQueryのプラグイン)
3. slice-transition-n2b.js、(名前変更可能)


サンプルJS (slice-transition-n2b.js)


//slice-transition-n2b.js
//slice-transition-new2.jsを修正した
//標準、ラップしない1枚DIV形式、一応機能する
//z-index設定方式変更3、各階層もz-indexをつけた
//全画像一括ロード機能つき

(function($){

  $(function () {

	//IE10 9 8 7 6は実行しない判定
	//UserAgent
	var ua=window.navigator.userAgent;
	var browserIE=false;//IE11以下判定
	if(ua.match(/MSIE/)) {
    		browserIE=true;
	}
	//分岐
	if(browserIE){
		//IE10と以下
		//$('#mainImg').append('<img src="/main/baserhtml/images/mainImg12.jpg" />');
		$('#autoMainImg').append('<img src="/main/baserhtml/images/mainImg12.jpg" />');
		$('#transition-wrap').remove();
	}
	else{init();}

	//IE11以上はOK
	function init(){

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

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

		//画像修正係数0.95-1.0
		img_rate=0.98;

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

		//自動分割でない場合の分割/奇数値がキレイです
		var split_h=11;//標準の横方向分割数
		var split_v=3;//標準の縦方向分割数
		var split_total;

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

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

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

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

		//自動分割の場合、free分割データを登録/奇数値が良い
		var splitHs=[1,15,15,13,11,9,9,9,9,17,3];
		var splitVs=[1,5,5,5,3,5,3,3,1,1,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/baserhtml/images/mainImg4.jpg",
			"/main/baserhtml/images/mainImg5.jpg",
			"/main/baserhtml/images/mainImg6.jpg",
			"/main/baserhtml/images/mainImg10.jpg",
			"/main/baserhtml/images/mainImg11.jpg",
			"/main/baserhtml/images/mainImg12.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;

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

		var window_width=0;

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

		//外枠jqueryオブジェクト
		var boxbase=$("#image-box-base");
		var imagebox=$("#image-box");
		var topbox=$("#top-box");
		var loading=$("#loading");
		var textview=$('#text-view');

		//window
		window_width=$(window).width();
		//画像修正
		if(window_width<box_W){

			var w=window_width*img_rate;
			var hiritu=window_width/box_W*img_rate;
			var h=box_H*hiritu;
			//中心補正ずらし量
			var trans_x=(1-hiritu)*box_W*-0.5;
			var trans_y=(1-hiritu)*box_H*-0.5;

			$('#transition-box').css({'width':w,'height':h});
			$('#transition-box-inner').css({'width':w,'height':h});
			//ずらしとスケール
			boxbase.css({translate:[trans_x,trans_y],scale:hiritu});

		} else{
			boxbase.css({translate:[0,0],rotate:0,scale:[1,1],'opacity':1});

		}

		//欄外移動
		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("");

			//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);//オブジェクト保存
				transboxs[i].attr('no',i);//新規chip番号取得用
			}

			//スライス寸法データを得る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);
			//半径、幅の70%で外側配置、半分の時あり
			var radius=Math.floor(box_W*0.6);


			//配置disposition位置番号/加算値
			var disposition_no=Math.floor(Math.random()*9);
			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://その場所でOK
							disposition_X=0;
							disposition_Y=0;
							//スケール補正
							scale_no=0;
							spd_v=0.5;
							//スケール例外その場拡大20%
							if (chgxyflag == 2) {scale_no=4;}
						break;
						case 1://外側に、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];
							spd_v=1.5;
						break;
						case 2://左右に中心から補正OK
							v_x=(box_W/2+chip_W[k]/2)*chg_v;
							disposition_Y=0;
							if (!chgflag && i % 2 != 0) {v_x *=-1;}
							if (chgxyflag < 2) {v_x *=flag3;}
							disposition_X=(v_x+box_W/2)-virtual_X[k];
							//回転は見出し補正
							if(rotate > 0) {alpha_no=0;}
						break;
						case 3://上下に中心から補正OK
							disposition_X=0;
							v_y=(box_H/2+chip_H[k]/2)*chg_v;
							if (!chgflag && j % 2 != 0) {v_y *=-1;}
							if (chgxyflag < 2) {v_y *=flag3;}
							disposition_Y=(v_y+box_H/2)-virtual_Y[k];
							//回転は見出し補正
							if(rotate > 0) {alpha_no=0;}
						break;
						case 4://XY内部ランダム位置OK
							disposition_X=Math.floor(Math.random()*box_W)-virtual_X[k];
							disposition_Y=Math.floor(Math.random()*box_H)-virtual_Y[k];
							//スケール補正
							scale_no=0;
							spd_v=1;
						break;
						case 5://中央OK
							disposition_X=box_W/2-virtual_X[k];
							disposition_Y=box_H/2-virtual_Y[k];
							//if (!chgflag) {disposition_X=set_pos_X[k];}
							//スケール補正
							scale_no=0;
							spd_v=0.8;
						break;
						case 6://X軸中央上下にOK
							disposition_X=0;
							disposition_Y=(box_H/2-virtual_Y[k]);
							//スケール補正
							scale_no=3;
							spd_v=0.8;
						break;
						case 7://Y軸中央左右にOK
							disposition_X=(box_W/2-virtual_X[k]);
							disposition_Y=0;
							//スケール補正
							scale_no=2;
							spd_v=0.8;
						break;
						case 8://その場所で2
							disposition_X=0;
							disposition_Y=0;
							//補正
							spd_v=0.8;
						break;
						default://そのほか
							disposition_X=set_pos_X[k];
							disposition_Y=set_pos_Y[k];
							//スケール補正
							scale_no=0;
							alpha_no=0;
							spd_v=0.8;
					}

					//スケール方向決定
					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;
						case 4:
							scale_X=2;scale_Y=2;alpha_no=0;//スケール例外2倍、負荷が大きい
						break;
						default:
							scale_X=0;scale_Y=0;
					}

					//rotation値の決定 60度x、逆転有り
					rotate_v[k]=rotate*60*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 0
			//for (var i=0; i < split_total; i++) {
				//transboxs[i].css({'zIndex':0});//0
			//}

			//移動
			topbox.css({'left':0});

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

			//調整
			setTimeout(function() {

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

						if (inType) {

							//queue実行
							transboxs[k].delay(delay_st[k]).queue(function(){

								//出現順に上にする/ラップなし
								$(this).css({'zIndex':1+sliceflag});
								//var no=$(this).attr('no');//番号

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

								$(this).dequeue();//queue削除
							});

						}
						if (!inType) {

							//queue実行
							transboxs[k].delay(delay_st[k]).queue(function(){

								//出現順に上にする/ラップなし
								$(this).css({'zIndex':1+sliceflag});

								var no=$(this).index('.slice_bk');
								//var no=$(this).attr('no');//番号

								$(this).transition({translate:[mov_pos_X[no],mov_pos_Y[no]],rotate:rotate_v[no],scale:[scale_X,scale_Y],'opacity':alpha_no},speed,"ease",function(){
									sliceflag ++;
									//終了
									if (sliceflag == split_total) {finshAll();}
								});

								$(this).dequeue();//queue削除
							});
						}

						k++;

					}
				}

			},500);//300-500位

		}

		//アニメ全て完了
		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() {
				//分割描画
				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);
			}
		}

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

		//window-resize
		$(window).resize(resizeFunc);
		var window_width=0;

		function resizeFunc(){
			window_width=$(window).width();

			//画像修正
			if(window_width<box_W){

				var w=window_width*img_rate;
				var hiritu=window_width/box_W*img_rate;
				var h=box_H*hiritu;
				//中心補正ずらし量
				var trans_x=(1-hiritu)*box_W*-0.5;
				var trans_y=(1-hiritu)*box_H*-0.5;

				$('#transition-box').css({'width':w,'height':h});
				$('#transition-box-inner').css({'width':w,'height':h});
				//ずらしとスケール
				boxbase.css({translate:[trans_x,trans_y],scale:hiritu});

			}else{

				$('#transition-box').css({'width':box_W,'height':box_H});
				$('#transition-box-inner').css({'width':box_W,'height':box_H});

				boxbase.css({'width':box_W,'height':box_H});
				boxbase.css({translate:[0,0],scale:1});
				//boxbase.css({'scaleX':1,'scaleY':1});

			}

		}

	//init
	}

  });

})(jQuery);

使用画像

使用画像は規定により配布できません。900x300前後の大きさの画像を使用者が用意します。下記はLoading画像です。


loading


【参照】当方の記事: baserCMS4.0系をローカルにインストールする

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作1

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作2

【参照】当方の記事: baserCMS4.0系 TOP画像のレスポンシブ表示

【参照】当方の記事: baserCMS4.0系 TOP画像のエフェクト処理


 

簡単ですが、以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]