POPSブログ

jQuery レスポンシブ・Transitもどきコントロール付き

409

  Category:  jquery2017/03/02 pops 

クロスフェードおよびスライドなどの各種エフェクト組み合わせのTransitもどきに、Pager コントロール等をつけました。「前ページ」の続きになります。

 

responsive

 

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

色々なエフェクト処理を内包したものです。CSS3処理では有りませんので、Transitもどき処理とでも呼ぶことにします。
「前ページ」にその原型と、説明をしています。
ここでは、Pagerとコントロールボタンをつけ、CSS操作でアレンジする方法などを記述します。

 

DEMO

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

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

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

 

 

構造と簡単な説明

エフェクト専用のimg要素を最上層に配置して、何らかのエフェクト処理します。animate()を利用すれば多用な変化をさせることが可能です。このJSでは、約15種のエフェクトを実現しています。
ここでは、Pagerとコントロールボタンをつけた仕様にしています。

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


zu

 

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


● 対応ブラウザと検証

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

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

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


<div id="transitBase">
 <a href="#"><img class="image-parts" src="/main/baserhtml/images/mainImage-01.jpg" /></a>
 .
 .

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

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

DEMEの説明

simple-transit3.js

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


● 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注意)

本来は同じなのですが、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;
}

サンプル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:#fff;
}

/* 構造 */
/* div borderダメ*/
#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);
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;/*40x18*/
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-transit3.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=[];

	//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');
	});

	//コントロール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();

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

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

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

		//位置データのランダム設定
		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;
				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();

			});
		};
		//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;
				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;

			//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
			box_elm.css({'width':w,'height':h});//マージン修正

		}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
			box_elm.css({'width':image_w,'height':image_h});//マージン修正

		}

	}

    }//init end

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

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

  });

})(jQuery);


Pagerとコントロールボタン

Pagerとコントロールボタンを付けることが可能です。JS先頭部分で設定して下さい。
コントロールは画像の左右(内部)につきます。この構造では画像の外側には付けることは出来ません。


1. Pagerは画像サムネールと。マークのどちらかを指定出来ます。大きさなどはCSSで設定します。
2. コントロールは透過画像を指定出来ますが、画像によっては見え難い場合があります。
(span要素で作っているため、高さの修正が不要です)
3. その他の装飾などは、使用者が決定して下さい。
4. 詳細はJSを参照ください。(前に作ったスライダーの場合と同じ方法です)


陰影、ボーダー処理

普通に陰影、ボーダー処理した場合、スマートフォン表示で左右の陰影などが切れてしまいますので、画像を指定の値(仮想マージン値)で修正縮小します(画像左右に空白をつくる操作です)。背景の装飾などと組み合わせても良いと思います。


zuzu

 

JS先頭で設定します。値は左右に割り振られます。横が縮小しますので、画像の高さも変化します。
値が 0 の場合は変化しません。陰影が無くとも設定を利用できます。


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

● Box-Shadow処理

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


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

IE8.7ではbox-shadowは無効なので、filter:Shadow またはborderで処理するとすれば、下記の様に成る。
(html5でのハックが難しいのでCSSを読み込んで処理)
IE8.7に対処しようとは思わないが、一応の対策として...


<!--[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]-->

● 角丸処理

画像隅を丸める角丸処理もできます。#transitBaseに、border-radiusを追加ください。
モダンブラウザ、IE11.10.9で有効、但しIE8.7では無効です。


border-radius:10px;

Pagerの装飾

Pagerの装飾も自由です。原則CSSで行います。場合によってはラップ層で囲み、背景色を設定しても良いでしょう。


● サムネールの透明度を変化させる方式。
全体の背景が黒になるようにします。下記の様に、サムネール画像の透明度を設定します。
この場合、陰影をつけても意味は有りません。背景が白の場合は余り効果がないようです。

下にある「背景の装飾例のDEMO」では背景を黒にしてサムネール画像の透明度を変化させています。



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

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

IE7.8の透明度設定、共にfilterに成ります。


IE7.8
filter:alpha(opacity=50);
IE8
-ms-filter:"alpha(opacity=50)";

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

filter削除は下記で出来るので使ってみました
filter:none;

背景の装飾など

構成が単純なため、背景などには対応していませんので、使用者が好みで構成して下さい。一例をデモで表示します。


zuzu

 

背景の装飾例のDEMO

構造が単純な為装飾など実行するには、別途ラップ層などで囲み対処します。(図3番参照)
ラップ層は使用者が好きに作っても結構です。下記にテキトウな構造例を示します。


simple-transit3b.jsになっていますが、左右マージン合計値0に設定しただけでsimple-transit3.jsと同等です。

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

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


ラップ層の構成、IDなどは自由ですが、仮に #transitBox とすれば、


<div id="transitBox">

	本体部分

</div>


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

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


animate()を利用した処理

animate()を利用すれば、複数のアニメを同時に処理出来ますので便利です。画像移動と共に透明度を変化させていますが、このJSでは一律に処理しています。


1. エフェクトの種類に応じて、透明度設定を変化させることも可能です。
2. IN OUT の処理を1つにも出来ますが、分離したほうが判り易いので分離して書いています。
3. 残念ながら、このままでは回転は出来ません。(CSS3処理ならば可能)
4. animate()を2段回で処理して、より複雑なアニメなども可能でショウ。

 

JS最後の遅延処理

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


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

 

使用画像

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


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

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


前ページ掲載のTransitもどき、Pager コントロールなしのJSです。

【参照】当方の記事: jQuery レスポンシブ・Transitもどき処理


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

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

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

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

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


 

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

 


[ この記事のURL ]


タグ:jquery , Effect , css3 , html5

 

ブログ記事一覧

年別アーカイブ一覧



[1]