POPSブログ

jQuery レスポンシブ・Transitもどき処理

408

  Category:  jquery2017/02/27 pops 

クロスフェード以外のエフェクトも簡単に出来る構造で、最も構造が単純でリサイズされた時の処理も簡素化されています。但し、TransitはCSS3処理では有りません。通常のjQuery animate()で数多くのエフェクトを組み合わせましたもので、余り見かけないものと思います。相違はデモで確認ください。

 

responsive

 

jQuery レスポンシブ・Transitもどき処理のテスト

色々なエフェクト処理を内包したものです。CSS3処理では有りませんので、Transitもどき処理とでも呼ぶことにします。通常レスポンシブでは、ボーダー、陰影処理を加えるには不向きですので、画像部分を縮小して見やすくしたものも「デモ2」に掲示します。すべて画像専用処理の構造に成ります。
またデモではA-link等は省略しますが、簡単に設定可能です。

 

max-widthを使用した形

ここより本題に入ります。レスポンシブにはmax-widthを使用すれば対処できます。下記に構造を示しますが、liリスト構造ではなく直接「img要素」を並べた簡略された画像専用の構造になります。
このエフェクトでプラグインなどを作っている方は居ないと思います。メンドウでも自分で作るほかない。

 

zuzu

 

DEMO 1 (通常)

通常のHTML5ページでみてみます。ブラウザ幅を変更して確認ください。

● 通常デモページ (http://pops-web.com/main/baserhtml/test006.html) : 通常ページでの表示デモ

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

 

DEMO 2 (陰影処理、画像横幅縮小)

通常のHTML5ページでみてみます。ブラウザ幅を変更して確認ください。

● 通常デモページ (http://pops-web.com/main/baserhtml/test006b.html) : 通常ページでの表示デモ

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

 

DEMO 3 (DEMO1に背景色)

通常のHTML5ページでみてみます。ブラウザ幅を変更して確認ください。(動作はDEMO1と同じです)

● 通常デモページ (http://pops-web.com/main/baserhtml/test006a.html) : 通常ページでの表示デモ

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

 

構造と簡単な説明

エフェクト専用のimg要素を最上層に配置して、何らかのエフェクト処理します。animate()を利用すれば多用な変化をさせることが可能です。(もう少し作れるが、見た目がほぼ同じなので、この程度にした)
図の様に、各要素の大きさが同じで連続して重なっている構造の場合は処理が簡単な傾向にあるようです。

div要素の中にに直接img要素を並べた簡素な構造です。そのままで、A-link構造にも可能で、ほぼ修正のいらない理想的な構造と思います。ここまで到達するまでスゴイ時間を要した。アホだね。


zu

 

1. 原則、外側divにmax-width:880pxを設定します。(media screenでの設定も同じ)
2. エフェクトは最低2枚の画像を必要とします。重ねはposition:absolute設定で行う。
(クロスフェードなどのエフェクト専用の「画像層#top-imageitem」をimgの一番上に配置します)
3. div.imgは同じ大きさで並びますので、ブラウザのリサイズの際修正がいらないのが特徴です。
IE7.8でも修正がほぼいりません。設定条件次第ですがIE8には注意。
(重なり順保持で、念のためimg要素にはz-indexをつけています)
4. 外側divは、imgがabsolute設定のため自動で伸縮しませんので、随時高さを修正しなければなりません。
マスクをも兼ねています。(IEは高さを値で設定しないと機能しない場合が多い)

5. ボーダー、陰影をつける際は、画像の大きさなどを修正する必要があります。(デモ2参照)
6. この構造では画像拡大が問題なく動作します。(単なる偶然ですが、構造によっては横拡大が異常な場合あり)
7. スマートフォンでは大きな画像を縮小表示するので、画像枚数は少ないほうが良い。
8. スライドショー的使用に向いていると思います。
9. Pager、コントロールをつけたものは、次ページに掲載します。(ページ容量の都合)


● 単純簡素な構成

設定条件次第ですがIE8には注意が必要。横幅を修正すれがOKな事が多い。


<div>
 <img />
 <img />
 .
 .
</div>

● A-linkの場合は下記の様にする。CSSの追加などはいらない。


<div>
 <a><img /></a>
 <a><img /></a>
 .
 .
</div>

● エフェクトについて。

1. 画像のポジションと幅高さを変更して、様ざまなエフェクトを実現しています。
(jQuery UIプラグインなしでも、いろいろ出来るんです)
2. IN OUTの種類があり変化をつけています(クロスフェードは同じ)。最初は強制的にINに成ります。
3. ランダムに実行されますが、同じエフェクトが連続する場合があります。
4. この基本構造を変えた場合、横幅の拡大が上手く機能しない事があります。


テキトウな呼称ですが、以下登録されていて、animate()実行時にランダムに選定されます。
scale-xy,scale-y,scale-x,slid-up,slide-dn,slid-left,slide-right,
scale-righ,scale-left,scale1.5,scale,scale,scale2,scale0.5,fade,fade,fade
中央表示の場合のポジションと大きさのデータですが、理解できれば、値の変更、追加可能です。

その時の画像の大きさに、値を掛けて移動伸縮しているだけです(JS参照)。


//ポジションと大きさのデータ
var w_array=[0,1,0,1,1,1,1,0,0,              1.5,     1.5,    1.5,      2,     0.5,     1,1,1];
var h_array=[0,0,1,1,1,1,1,0,0,              1.5,     1.5,    1.5,      2,     0.5,     1,1,1];
var posx_array=[0.5,0,0.5,0,0,1,-1,0,1,     -0.25,   -0.25,   -0.25,   -0.5,   0.25,    0,0,0];
var posy_array=[0.5,0.5,0,1,-1,0,0,0,1,     -0.25,    0,      -0.5,    -0.5,   0.25,    0,0,0];

「OUT」処理で大きさをグローバルで保存して利用しているのが「ミソ」です。


//現在の大きさ
width_v=w;
height_v=h;

および

width_v=image_w;
height_v=image_h;

● 対応ブラウザと検証

html5.js、css3-mediaqueries.jsを読み込んでいますので、仕方なく「IE」をも検証しました。
当方としては別段IEに対応する気は毛頭有りませんし、特にIE 9 8 7はもはや対応すべきではなく「排除」すべきです。


1. 一応、モダンブラウザおよび、IE 11 10 9 8 7まで表示可能です。(IEは問題ありすぎ...)
(IE11はモダンブラウザに属するが、CSS3、Canvas対応などでは他より劣るので余り対応したくない)
2. 検証はブラウザ付属ので「ペロッパーツール」および「確認ツール」で行いました。(一部、iphone6で確認)
3. デモページで使用のjQueryは jquery-1.11.3.min.js です。


HTML CSS JS

下記にHTML CSS JSを提示します。CSS JSの名前は自由です。単純なimgのみの構成にしました。
このようなものは「A-link」をつけて使用される場合が多いようです。

HTML

画像URLは当方のデモでのものです。実際にはユーザー設置条件にあわせます。
最後のimg要素は画像処理用の「エフェクト層」に成ります。自動生成しませんので、手書きで書いてください。


<div id="transitBase">
 <img class="image-parts" src="/main/baserhtml/images/mainImage-01.jpg" />
 <img class="image-parts" src="/main/baserhtml/images/mainImage-02.jpg" />
 <img class="image-parts" src="/main/baserhtml/images/mainImage-03.jpg" />
 <img class="image-parts" src="/main/baserhtml/images/mainImage-04.jpg" />
 <img class="image-parts" src="/main/baserhtml/images/mainImage-05.jpg" />
 <img id="top-imageitem" class="image-parts" src="/main/baserhtml/images/mainImage-01.jpg" />
</div>

エフェクト専用の画像層を通常は自動で作りませんので、img要素の最後に、下記の様に書いてください。
Class名、Id名は自由に変更可能です。デモでは「Id名」を書きました。
各画像の「表示,非表示」を頻繁に行うため、jQueryのオブジェクトとして保存してアクセスを早める工夫をします。



<img class="image-parts" src="最初の画像URL" />
またはIDをつける、処理が若干早くなります
<img id="top-imageitem" class="image-parts" src="最初の画像URL" />

TOP-ITEMをオブジェクト保存する。どちらでも良い。ID名で判定が理想的です。


最後の要素で判定、処理が若干早くなります
var top_item=img_elm.eq(img_len-1);
ID名で判定、処理がより若干早くなります
var top_item=$('#top-imageitem');

HTML5でのテスト表示結果

通常デモページのHTML構成を違わせてテストした結果、モダンブラウザおよび IE7-11 まで表示結果はOKでした。

重要、ブラウザ右外側に「空白」が出来る場合がありますが除去の処理です。body直下の全体をラップした要素に overflow:hidden 設定すれば除去出来ます。「空白」の出ない処理方法もありますが...


#wrappr{
overflow:hidden;
}

つまり、max-width をそのまま単独で使用すれば、構造によっては右外側に「空白」が出来る。

media screen設定を上書きすれば、直りますが...

@media screen設定の場合。

media screen設定の場合は下記の様になるが、余りこのような設定で使用する事は無いと思う。
この場合、max-widthは media screen に設定されますので要素の幅は width:940px となる。

また個別にmedia screen 設定されましたので右に空白は出ません。心配な方はそのままでも結構です。HTML表示に影響は有りません。



#transitBase{
position:relative;
width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;
}
/* 上書き */
@media screen and (max-width:879px){
	#transitBase{
		width:100%;
	}
}

DEME1の説明

simple-transit.js

通常の処理です。簡単なスライドショー形式の作りで、コントロール、Pagerなど有りません。(図1番参照)


● max-width設定の場合(デモはこちらを設定しました)

リサイズ修正を考慮すれば、こちらが処理し易いかも知れません。


max-width設定の場合、空白がでる

/* 構造 */
#transitBase{
position:relative;/*IE7対応*/
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;
}

空白除去のため必要です
#wrappr{
overflow:hidden;
}
-----------------------------------------------------------

リサイズ修正が楽です
imgがabsolute設定のためモダンブラウザでも高さ修正が必要

box_elm.css({'height':h});

box_elm.css({'height':image_h});

● @media screen設定の場合 (IE8注意)

本来は同じなのですが、IE8のみ横幅を修正しなければなりません。IE対処の意図は有りませんが、一応検証しておきます。


@media screen設定の場合、空白が出ない

/* 構造 */
#transitBase{
position:relative;/*IE7対応*/
width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;
}
/* 上書き */
@media screen and (max-width:879px){
	#transitBase{
		width:100%;
	}
}

スライダーに@media screen設定のため
下記の空白除去は原則不要です
#wrappr{
overflow:hidden;
}

リサイズ修正時にIE8のみ横幅を修正しないと画像が正常になりません。いまどき、IE8の修正などする方は居ないと思います...


imgがabsolute設定のためモダンブラウザでも高さ修正が必要

box_elm.css({'width':w,'height':h});/*IE8*/

box_elm.css({'width':image_w,'height':image_h});/*IE8*/

IE8を考慮しなければ、通常の処理でよい。(いまどき、IE8に対処は考え難い)


imgがabsolute設定のためモダンブラウザでも高さ修正が必要

box_elm.css({'height':h});

box_elm.css({'height':image_h});

サンプルJS CSS

CSS


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

#header,#main{
width:100%;
height:auto;
margin:0 auto;
text-align:center;
background-color:#eee;
}

/* 機能します */
#transitBox{
position:relative;
width:100%;
height:auto;
background-color:#333;
}

/* 構造 */
/* div borderダメ*/
#transitBase{
position:relative;/*IE7対応*/
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;
}
/* 上書き */
/*@media screen and (max-width:879px){
	#transitBase{
		width:100%;
	}
}*/

/* image */
#transitBase img{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}

JS


//simple-transit.js
//簡易構造画像エフェクト/拡大修正
//IE7 OK

(function($){

  $(function(){

    function init(){

	//画像の大きさ
	var image_w=880;
	var image_h=380;

	//時間
	var cycle_time=6000;
	var fade_time=800;

	//オブジェクト
	//var box_elm_wrap=$('#transitBox');
	var box_elm=$('#transitBase');
	var img_elm=$('#transitBase img');

	//変数
	var img_len=img_elm.length;
	var image_max=img_len-1;
	var timerID=null;
	var image_no=0;
	var keep_no=0;
	var image_urls=[];
	var partselm=[];
	var item_w;

	//エフェクト追加変数
	var cross_url="";
	var keep_url="";
	var window_width=0;

	//Effectデータ
	var once=false;
	var move_type="in";
	var mvtypes=['in','out'];

	//ポジションと大きさのデータ
	//scale-xy,scale-y,scale-x,slid-up,slide-dn,slid-left,slide-right,scale-righ,scale-left,scale1.5,scale,scale,scale2,scale0.5,fade,fade,fade
	var w_array=[0,1,0,1,1,1,1,0,0,              1.5,     1.5,    1.5,      2,     0.5,     1,1,1];
	var h_array=[0,0,1,1,1,1,1,0,0,              1.5,     1.5,    1.5,      2,     0.5,     1,1,1];
	var posx_array=[0.5,0,0.5,0,0,1,-1,0,1,     -0.25,   -0.25,   -0.25,   -0.5,   0.25,    0,0,0];
	var posy_array=[0.5,0.5,0,1,-1,0,0,0,1,     -0.25,    0,      -0.5,    -0.5,   0.25,    0,0,0];

	//現在の画像の大きさ
	var width_v=image_w;
	var height_v=image_h;

	//一旦全てを消す/URL取得
	box_elm.find("img").each(function(i){
		$(this).css({'z-index':i,'display':'none'});
		partselm[i]=img_elm.eq(i);//オブジェクト保存
		image_urls[i]=$(this).attr('src');
	});

	//初期化、寸法きめ
	resizeFunc();

	//display
	partselm[0].css({'display':'block'});
	//TOP-ITEM
	var top_item=$('#top-imageitem');
	//番号
	image_no=0;

	//スタート遅延
	set_timer();

	//IN OUT エフェクト処理
	function effectImage(){

		//IN OUT取得
		var move_type=mvtypes[Math.floor(Math.random()*mvtypes.length)];
		//最初はIN
		if(!once){
			once=true;
			move_type="in";
		}
		//in強制設定
		//move_type="in";

		//位置データのランダム設定
		var chg_no=Math.floor(Math.random()*w_array.length);

		//現在の大きさから計算
		var pos_x=posx_array[chg_no]*width_v;
		var pos_y=posy_array[chg_no]*height_v;
		var w_v=w_array[chg_no]*width_v;
		var h_v=h_array[chg_no]*height_v;

		//IN
		if(move_type=='in'){

			//事前処理
			cross_url=image_urls[image_no];
			//cross_url画像切り替え
			top_item.attr({'src':cross_url}).css({'left':pos_x,'top':pos_y,'width':w_v,'height':h_v,'opacity':0});
			top_item.css({'display':'block'});//上層
			//IN エフェクト
			top_item.animate({'left':0,'top':0,'width':width_v,'height':height_v,'opacity':1},fade_time,function(){

				//階層処理
				partselm[image_no].css({'display':'block'});
				top_item.css({'display':'none'});
				partselm[keep_no].css({'display':'none'});
				//処理番号URL保存
				keep_no=image_no;
				keep_url=cross_url;
				set_timer();

			});
		};
		//OUT
		if(move_type=='out'){

			//事前処理
			cross_url=image_urls[image_no];
			//keep_url画像切り替え
			top_item.attr({'src':keep_url}).css({'left':0,'top':0,'width':width_v,'height':height_v,'opacity':1});
			//上層表示
			top_item.css({'display':'block'});

			//下層表示
			partselm[image_no].css({'display':'block'});
			partselm[keep_no].css({'display':'none'});

			//OUT エフェクト
			top_item.animate({'left':pos_x,'top':pos_y,'width':w_v,'height':h_v,'opacity':0},fade_time,function(){

				//上層処理
				top_item.css({'display':'none'});

				//処理番号URL保存
				keep_no=image_no;
				keep_url=cross_url;
				set_timer();

			});
		};


	}

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

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

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

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

	}

	//ラップの大きさを修正
	//window-resize
	$(window).resize(resizeFunc);

	//スライドのためBOXの大きさ設定
	function resizeFunc(){

		window_width=$(window).width();

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

			var w=window_width;
			var ratio=window_width/image_w;
			var h=image_h*ratio;

			//現在の大きさ
			width_v=w;
			height_v=h;

			box_elm.css({'height':h});
			//box_elm.css({'width':w,'height':h});/*IE8*/

		}else{

			//現在の大きさ
			width_v=image_w;
			height_v=image_h;

			box_elm.css({'height':image_h});
			//box_elm.css({'width':image_w,'height':image_h});/*IE8*/

		}

	}

    }//init end

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

    //遅延
    setTimeout(function() {
      init();
    },10);

  });

})(jQuery);


 

DEME2の説明

simple-transit2.js

box-shadow、boderをつけた場合、スマートフォンでは見栄えが良く有りませんので、幅を小さくして修正します。
マージンはCSSのmarginでは無く仮想のマージンで、画像幅を小さく計算して左右に隙を作っています。(図2番参照)
但し、PCで左右に余裕がある場合は画像の大きさは同じになります。
リサイズ時も同じですからIE8でも結果は同じです。


● max-width設定の場合

こちらが処理し易いかも知れません。


max-width設定の場合、空白がでる

/* 構造 */
#transitBase{
position:relative;/*IE7対応*/
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;
}

空白除去のため必要です
#wrappr{
overflow:hidden;
}

● @media screen設定の場合

マージン設定のため横幅を常に修正していますので、IE8に関係なく同じになります。


@media screen設定の場合、空白が出ない

/* 構造 */
#transitBase{
position:relative;/*IE7対応*/
width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;
}
/* 上書き */
@media screen and (max-width:879px){
	#transitBase{
		width:100%;
	}
}

スライダーに@media screen設定のため
下記の空白除去は原則不要です
#wrappr{
overflow:hidden;
}

リサイズ時の処理

仮想マージン値により少しBOX(#transitBase)を小さくします。画像は自動的に小さくなります。


function resizeFunc(){

	window_width=$(window).width();
	//全体の横幅
	all_w=image_w+margin;

	//画像修正、全体の幅で判定する
	if(window_width<all_w){

		//途中略

		box_elm.css({'width':w,'height':h});

	}else{

		//途中略

		box_elm.css({'width':image_w,'height':image_h});

	}

}

サンプルJS CSS

CSS


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

#header,#main{
width:100%;
height:auto;
margin:0 auto;
text-align:center;
background-color:#eee;
}

/* 機能します */
#transitBox{
position:relative;
width:100%;
height:auto;
background-color:#333;
}

/* 構造 */
/* border OK*/
#transitBase{
position:relative;/*IE7対応*/
width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
box-shadow:0px 0px 14px rgba(0,0,0,0.7);
overflow:hidden;
}
/* 上書き */
@media screen and (max-width:879px){
	#transitBase{
		width:100%;
	}
}

/* image */
#transitBase img{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}

JS


//simple-transit2.js
//簡易構造画像エフェクト/拡大修正/左右マージン設定
//IE7 OK

(function($){

  $(function(){

    function init(){

	//画像の大きさ
	var image_w=880;
	var image_h=380;
	//左右マージン合計値
	var margin=20;

	//時間
	var cycle_time=6000;
	var fade_time=800;

	//オブジェクト
	//var box_elm_wrap=$('#transitBox');
	var box_elm=$('#transitBase');
	var img_elm=$('#transitBase img');

	//変数
	var img_len=img_elm.length;
	var image_max=img_len-1;
	var timerID=null;
	var image_no=0;
	var keep_no=0;
	var image_urls=[];
	var partselm=[];
	var item_w;

	//エフェクト追加変数
	var cross_url="";
	var keep_url="";
	var window_width=0;
	//全体の横幅
	var all_w;

	//Effectデータ
	var once=false;
	var move_type="in";
	var mvtypes=['in','out'];
	//ポジションと大きさのデータ
	//scale-xy,scale-y,scale-x,slid-up,slide-dn,slid-left,slide-right,scale-righ,scale-left,scale,puff,fade,fade,fade
	/*var w_array=[0,1,0,1,1,1,1,0,0,0.5,1,1,1,1];
	var h_array=[0,0,1,1,1,1,1,0,0,0.5,1.2,1,1,1];
	var posx_array=[0.5,0,0.5,0,0,1,-1,0,1,0.25,0,0,0,0];
	var posy_array=[0.5,0.5,0,1,-1,0,0,0,1,0.25,-0.1,0,0,0];*/

	//ポジションと大きさのデータ
	//scale-xy,scale-y,scale-x,slid-up,slide-dn,slid-left,slide-right,scale-righ,scale-left,scale1.5,scale,scale,scale2,scale0.5,fade,fade,fade
	var w_array=[0,1,0,1,1,1,1,0,0,              1.5,     1.5,    1.5,      2,     0.5,     1,1,1];
	var h_array=[0,0,1,1,1,1,1,0,0,              1.5,     1.5,    1.5,      2,     0.5,     1,1,1];
	var posx_array=[0.5,0,0.5,0,0,1,-1,0,1,     -0.25,   -0.25,   -0.25,   -0.5,   0.25,    0,0,0];
	var posy_array=[0.5,0.5,0,1,-1,0,0,0,1,     -0.25,    0,      -0.5,    -0.5,   0.25,    0,0,0];

	//現在の画像の大きさ
	var width_v=image_w;
	var height_v=image_h;

	//一旦全てを消す/URL取得
	box_elm.find("img").each(function(i){
		$(this).css({'z-index':i,'display':'none'});
		partselm[i]=img_elm.eq(i);//オブジェクト保存
		image_urls[i]=$(this).attr('src');
	});

	//初期化、寸法きめ
	resizeFunc();

	//display
	partselm[0].css({'display':'block'});
	//TOP-ITEM
	var top_item=$('#top-imageitem');
	//次の番号
	image_no=1;

	//番号
	image_no=0;
	//スタート遅延
	set_timer();

	//IN OUT エフェクト処理
	function effectImage(){

		//IN OUT取得
		var move_type=mvtypes[Math.floor(Math.random()*mvtypes.length)];
		//最初はIN
		if(!once){
			once=true;
			move_type="in";
		}
		//in強制設定
		//move_type="in";

		//位置データのランダム設定
		var chg_no=Math.floor(Math.random()*w_array.length);

		//現在の大きさから計算
		var pos_x=posx_array[chg_no]*width_v;
		var pos_y=posy_array[chg_no]*height_v;
		var w_v=w_array[chg_no]*width_v;
		var h_v=h_array[chg_no]*height_v;

		//IN
		if(move_type=='in'){

			//事前処理
			cross_url=image_urls[image_no];
			//cross_url画像切り替え
			top_item.attr({'src':cross_url}).css({'left':pos_x,'top':pos_y,'width':w_v,'height':h_v,'opacity':0});
			top_item.css({'display':'block'});//上層
			//IN エフェクト
			top_item.animate({'left':0,'top':0,'width':width_v,'height':height_v,'opacity':1},fade_time,function(){

				//階層処理
				partselm[image_no].css({'display':'block'});
				top_item.css({'display':'none'});
				partselm[keep_no].css({'display':'none'});
				//処理番号URL保存
				keep_no=image_no;
				keep_url=cross_url;
				set_timer();

			});
		};
		//OUT
		if(move_type=='out'){

			//事前処理
			cross_url=image_urls[image_no];
			//keep_url画像切り替え
			top_item.attr({'src':keep_url}).css({'left':0,'top':0,'width':width_v,'height':height_v,'opacity':1});
			//上層表示
			top_item.css({'display':'block'});

			//下層表示
			partselm[image_no].css({'display':'block'});
			partselm[keep_no].css({'display':'none'});

			//OUT エフェクト
			top_item.animate({'left':pos_x,'top':pos_y,'width':w_v,'height':h_v,'opacity':0},fade_time,function(){

				//上層処理
				top_item.css({'display':'none'});

				//処理番号URL保存
				keep_no=image_no;
				keep_url=cross_url;
				set_timer();

			});
		};


	}

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

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

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

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

	}

	//ラップの大きさを修正
	//window-resize
	$(window).resize(resizeFunc);

	//スライドのためBOXの大きさ設定
	function resizeFunc(){

		window_width=$(window).width();
		//全体の横幅
		all_w=image_w+margin;

		//画像修正、全体の幅で判定する
		if(window_width<all_w){

			all_w=window_width;
			var w=window_width-margin;//マージン修正
			var ratio=w/image_w;
			var h=image_h*ratio;

			//現在の大きさ
			width_v=w;
			height_v=h;

			box_elm.css({'width':w,'height':h});

		}else{

			//現在の大きさ
			width_v=image_w;
			height_v=image_h;

			box_elm.css({'width':image_w,'height':image_h});

		}

	}

    }//init end

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

    //遅延
    setTimeout(function() {
      init();
    },10);

  });

})(jQuery);


Box-Shadow処理

box-shadowはモダンブラウザおよび、IE11.10.9に有効です。#transitBaseに設定します。
仮想マージン値により少しBOX(#transitBase)を小さくします。画像は自動的に小さくなります。


#transitBase{
position:relative;
width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
box-shadow:0px 0px 14px rgba(0,0,0,0.7);
overflow:hidden;
}

box-shadowはCSS3ですので、IE7.8には対応していません。Html5ではIE7.8のハックは難しいようです。
下記の様に別途CSSを読み込み対処します。(borderもしくはshadow)

いまどき、IE7.8対応は考えられませんが... 出来れば何もしない方が良いと思います。


<!--[if lt IE 9]>
<style>
#transitBase{
/*border:5px solid #ccc;*/
filter:progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=120,strength=5,enabled=true);
}
</style>
<![endif]-->

背景の装飾など

zuzu

 

上記のサンプルは、構造が単純な為装飾など実行するには、別途ラップ層などで囲み対処します。(図3番参照)
ボーダー、陰影を付ける場合は「デモ2」のJSを利用ください。


<div id="transitBox">

	本体部分

</div>


#transitBox{
position:relative;
width:100%;
height:auto;
background-color:#333;
}

背景の幅は100%のみになります。もし画像幅にしたい場合は、リサイズ関数、resizeFunc()での処理が必要になります。これは省略します。

 

JS最後の遅延処理

主にIE系ですが、画像を読み込んでからでなければ、上手く動作しない場合など1秒位遅延させると良い場合があります。その対策で付けていますが、今回は必要ではありませんでした。


//遅延/IE7
setTimeout(function() {
 init();
},10);

 

使用画像

原則、使用者が用意します。(880x380サイズ) : サンプルでの使用画像



スライダー処理の場合は下記ページ参照ください。

【参照】当方の記事: jQuery レスポンシブ・スライダー、エンドレスタイプ

【参照】当方の記事: jQuery レスポンシブスライダー処理

CSS3、Transit処理のサンプル。但しモダンブラウザのみ動作。(baserCMSでなくとも動作します)
少し効率が悪いのでその内に外側レスポンシブ部分を修正するかも知れません。

【参照】当方の記事: baserCMS4.0系 TOP画像Transit


 

モット効率的な方法もあるかも知れませんが、まだ判りません。誰か考えてください。
次回は、Pager コントロールを付けてみます。簡単ですが、以上です。

 


[ この記事のURL ]


タグ:html5 , css3 , Effect , jquery

 

ブログ記事一覧

年別アーカイブ一覧



[1]