POPSブログ

jQuery レスポンシブ・クロスフェード処理2

411

  Category:  jquery2017/03/09 pops 

Transitもどき、Pager コントロール設定可能なJSを、クロスフェード専用に修正しました。このJSの便利なところは、陰影処理をした場合に自由に左右に空白を付ける事が出来る。つまり画像は小さくなるが、余裕を持って配置できる事です。img要素を重ねた単純な構造で設置も簡単です。

 

responsive

 

jQuery レスポンシブ・クロスフェード処理2のテスト

「前々ページ」に掲載のTransitもどきのJSを修正して、クロスフェード専用にしたもので、簡素な構成になっています。
スライドエフェクトなどにも簡単に修正は可能です。

 

DEMO (Pager コントロール、角丸陰影処理)

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

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

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

 

構造と簡単な説明

エフェクト専用のimg要素を最上層に配置して、何らかのエフェクト処理します。animate()を利用すれば多用な変化をさせることが可能です。このJSでは、クロスフェード専用に修正しています。

構成上の説明などは、下記ページを参照ください。

【参照】当方の記事: jQuery レスポンシブ・Transitもどきコントロール付き



zu

 

本体部分で有る#transitBaseは常に、縦横の大きさが修正される仕組みになっています。
尚、下記の理由からも常に縦横の修正を行っている。


1. 仮想マージン設定により、画像幅を常に修正している。
2. 画像が position:absolute のため本体は自動で伸びないので高さを修正。
3. IEでは高さを動的にpx値で与えないとマスクならない場合が多い。
4. マスクの場合、IE7は明示的に、position:relative にする。
5. この構造で、IE8は明示的にpx値で横幅を設定しないと、画像は伸びてしまう。
6. つまり、「div要素」#transitBaseの大きさを常時修正するだけで良い事になる。


下記記載はTransitもどきのJS説明と重複します。
色々と書いていますが、実際に作れば以外と簡単です。


1. 原則、外側divにmax-width:880pxを設定します。(media screenでの設定も同じ)
2. ボーダー、陰影処理でも、修正する事により左右の切れが無くなり、適正に配置されます。
(仮想マージンを20前後設定して画像を小さくします)
3. Pager、はボタン式、サムネール式より選べます。大きさはCSSで調整します。
IE7.8でも修正がほぼいりません。設定条件次第ですがIE8には注意。
4. コントロールは画像の内側に配置になります。(外側には配置出来ません)
5. スマートフォンでは大きな画像を縮小表示するので、画像枚数は少ないほうが良い。


● 対応ブラウザと検証

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」をつけて使用される場合が多いようです。(A-linkは簡単に付加できます)


HTML

「ul.li」構成では無く「div」要素の中に複数の「img」を重ねた最も単純な構成に成ります。
画像URLは当方のデモでのものです。実際にはユーザー設置条件にあわせます。
最後のimg要素は画像処理用の「エフェクト層」に成ります。自動生成しませんので、手書きで書いてください。

DEMOの場合の例、背景用のラップなし。


<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>

A-linkを付ける場合は、下記の様に書く。最後のエフェクト層はそのままです。
CSSの変更などは不要です。


<a href="#"><img class="image-parts" src="画像URL" /></a>

背景などを着色する場合は、新規に「div要素」などでラップします。構造設計、CSSは自由です。


<div id="transitBox">
 <div id="transitBase">
  <img />
  <img />
  .
  .
 </div>
</div>

HTML5でのテスト表示結果

構造は同じで、animate()部分だけ簡略化修正されたいますので、TransitもどきのJS原型とほぼ変わりません。クロスフェード以外の処理にも簡単に変更できます。


DEMEの説明

simple-transit5.js

コントロール、Pagerなどを設定出来るようにしました。詳細はJS先頭部分を参照ください。
アレンジなどはCSSで行いますが使用者の自由です。


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


#wrappr{
overflow:hidden;
}

● max-width設定の場合


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

#transitBase{
position:relative;
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;
}

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

● @media screen設定の場合

デモはこちらを設定しました。


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

#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%;
	}
}

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

サンプルCSS JS

CSS


/* 重要 */
#wrappr{
/*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:#fff;
}

/* 構造 */
#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);
border-radius:10px;
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;
}

/*span構成コントロール*/
#transitBase #base-prev{
display:block;
position:absolute;
top:0;left:0;
width:20px;
height:100%;
margin:0;
padding:0;
background:url('/main/baserhtml/images/arrow_left_a3.png') no-repeat center center;
cursor:pointer;
z-index:100;
}
#transitBase #base-next{
display:block;
position:absolute;
top:0;right:0;
width:20px;
height:100%;
margin:0;
padding:0;
background:url('/main/baserhtml/images/arrow_right_a3.png') no-repeat center center;
cursor:pointer;
z-index:101;
}

/* btn */
#btnBox{
width:100%;
height:auto;
margin:10px auto;
text-align:center;
z-index:1000;
}
#btnBox span{
width:100%;
height:auto;
margin:5px;
font-size:16px;
color:#888888;
cursor:pointer;
}
#btnBox span.active{
color:#ff0000;
}

#btnBox span img{
width:40px;
height:18px;
border:#fff 1px solid;
}

#btnBox span img.active{
border:#f00 1px solid;
}

/*
#btnBox span img{
width:40px;
height:18px;
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
}
#btnBox span img.active{
opacity:1.0;
filter:none;
}
*/

JS


//simple-transit5.js
//簡易構造画像クロスフェード専用
//Pagerコントロール付き
//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;

	//コントロールBTNの使用
	var ctrlbtn_use=true;
	//BTNグループの使用true、不使用false
	var hitbtn_use=true;
	//サムネール使用true、ボタンはfalse
	var thumb_use=true;
	//サムネールの大きさはCSSで設定

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

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

	//エフェクト追加変数
	var cross_url="";
	var keep_url="";
	var window_width=0;
	var animeflag=false;
	//BTNオブジェクト
	var hit_btns=[];

	//現在の画像の大きさ
	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');
	});

	//コントロールBTN/span構成
	if(ctrlbtn_use){

		//append #transitBase
		box_elm.append('<span id="base-prev"></span>');
		box_elm.append('<span id="base-next"></span>');

		//オブジェクト
		var next_elm=$('#base-next');
		var prev_elm=$('#base-prev');

		//click-action
		next_elm.click(function(){
			//アニメ中はキャンセル
			if(animeflag){return false}
			//タイマーclear
			clearTimeout(timerID);
			next_set();
			return false
		});
		prev_elm.click(function(){
			//アニメ中はキャンセル
			if(animeflag){return false}
			//タイマーclear
			clearTimeout(timerID);
			prev_set();
			return false
		});

	}
	//BTNグループaction-set
	if(hitbtn_use){

		//後ろにappendする
		box_elm.after('<div id="btnBox"></div>');
		var mark="&#9679;";
		//make-btn
		var btnhtml="";
		for (var i=0; i < image_max; i++) {

			//ID名を付ける
			var name="hitbtn"+i;
			if(thumb_use){
				thumb='<img class="thumb" src="'+ image_urls[i] +'" />';
				btnhtml += '<span id="' + name +'">' + thumb + '</span>';
			}else{
				btnhtml += '<span id="' + name +'">' + mark + '</span>';
			}

		}
		//append #btnBox
 		$('#btnBox').append(btnhtml);
		btnhtml="";

		//action
		$('#btnBox').find('span').each(function(i){
			$(this).click(function(){hitno_set(i);});
		});
		//オブジェクト保存
		for (var i=0; i < image_max; i++) {
			hit_btns[i]=$('#hitbtn'+i);
		}

	}
	//最初をactiveに
	if(hitbtn_use){
		if(thumb_use){
			hit_btns[0].children("img").addClass('active');
		}else{
			hit_btns[0].addClass('active');
		}
	}

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

	//display
	partselm[0].css({'display':'block'});
	top_item.css({'display':'block'});

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

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

		animeflag=true;

		if(hitbtn_use){
			if(thumb_use){
				hit_btns[keep_no].children("img").removeClass('active');
			}else{
				hit_btns[keep_no].removeClass('active');
			}
		}

		//事前処理
		cross_url=image_urls[image_no];
		//cross_url画像切り替え
		top_item.attr({'src':cross_url}).css({'opacity':0});
		top_item.css({'display':'block'});//上層

		//エフェクト
		top_item.animate({'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;
			animeflag=false;

			if(hitbtn_use){
				if(thumb_use){
					hit_btns[image_no].children("img").addClass('active');
				}else{
					hit_btns[image_no].addClass('active');
				}
			}

			set_timer();

		});

	}

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

		//タイマーclear
		clearTimeout(timerID);
		//次ぎの番号
		image_no +=1;
		if (image_no > (image_max-1)) {image_no=0;}
		effectImage();

	}

	//戻る要素を計算
	function prev_set() {

		//タイマーclear
		clearTimeout(timerID);
		//戻る番号
		image_no -=1;
		if (image_no < 0) {image_no=image_max-1;}
		effectImage();

	}
	//指定番号で計算
	function hitno_set(no) {

		//表示番号ならキャンセル
		if(no==keep_no){return false}
		//アニメ中はキャンセル
		if(animeflag){return false}
		//タイマーclear
		clearTimeout(timerID);
		//番号
		image_no=no;
		effectImage();
		return false

	}

	//タイマー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);


仮想マージンの設定

左右のマージン値合計値で、画像を表示する場合この値を差し引いて縮小します。JS先頭部分で設定して下さい。
よって陰影などがキレル心配が無いと言う訳です。

値を大きく取りすぎると、スマートフォンなどで、画像が小さく成り過ぎますますから注意ください。
サムネールより小さい画像にして「笑って過ごす」のも楽しいことです。


20前後、0なら縮小しません

//左右マージン合計値
var margin=20;

エフェクトの修正

右よりスライドさせるとすれば、下記の様にポジション移動すればよい。opacity設定は自由です。
この時の画像の大きさは width_v height_v で取得できます。
ポジション、大きさを変えれば、10-20種類の画像エフェクトなら簡単に作れると思います。


//事前処理ポジション移動
top_item.attr({'src':cross_url}).css({'left':width_v,'opacity':0});

//エフェクト
top_item.animate({'left':0,'opacity':1},fade_time,function(){

	略す

});

ボーダー、陰影処理など

Pager コントロール 陰影処理などは通常の「Transitもどき」とほぼ同じですから「前々ページ」を参照ください。


ボーダー、陰影処理などは、#transitBaseにCSSで設定します。
IE8.7は角丸陰影は処理出来ません。また、デモでは代替の処理はしていません。


#transitBase{
box-shadow:0px 0px 14px rgba(0,0,0,0.7);
border-radius:10px;
}

背景色などの装飾

標準では背景は有りません。図1番参照

zuzuzu

 

「div要素」#transitBaseはその時折の画像の大きさで有り、マスクされていますので、背景色などの装飾は親要素の背景などを操作することになります。クロスフェード処理のみならマスクはいりませんが、角丸での処理があるので、overflow:hiddenは設定しておいたほうが良い。
そのため、背景などを着色する場合は、新規に「div要素」などでラップします。構造設計、CSSは自由です。



<div id="transitBox">
	本体
</div>

背景色を塗る。図2番参照


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

#transitBase{
overflow:hidden;
}

背景範囲の指定。図3番参照
サムネールを透過させて変化させることも可能です。


#transitBox{
position:relative;
width:900px;
height:auto;
margin:0 auto;
background-color:#333;
}
@media screen and (max-width:899px){
	#transitBox{
		width:100%;
	}
}

#btnBox span img{
width:40px;
height:18px;
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
}
#btnBox span img.active{
opacity:1.0;
filter:none;
}

 

JS最後の遅延処理

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


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

 

使用画像

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


透過PNG画像、下に来る画像の色合いによっては認識しづらい場合が有ります。下は自作品で、品質は良くない。
別画像の必要なかたは自作するか、ネット上でプラグイン付属画像をパクッテください。

透過画像 透過画像 透過画像 透過画像 透過画像 透過画像 透過画像 20x20透過画像
---


下記は「ul.li」構成のクロスフェード処理に成ります。このページより若干メンドウかも知れない。

【参照】当方の記事: jQuery レスポンシブ・クロスフェード処理



 

モット効率的な方法もあるかも知れませんが、まだ判りません。誰か考えてください。
簡単ですが、以上です。

 


[ この記事のURL ]


タグ:html5 , css3 , Effect , jquery

 

ブログ記事一覧

年別アーカイブ一覧



[1]