POPSブログ

baserCMS4.0系 TOP画像のエフェクト処理2

402

  Category:  basercms2017/01/16 pops 

baserCMS4.0系レスポンシブ対応の「TOP画像のエフェクト処理」の続きで、少し簡略化にしてみました。また通常のjQueryを使用して「Transitionもどき」でどれだけ処理できるかもテストしてみます。CSS3処理ではないので、余りブラウザを問いません。

 

demo-zu

 

baserCMS4.0系 TOP画像のエフェクト処理2のテスト

max-widthで処理しているため、少々複雑な面もありますが、まだIE系でも見るために単純なことしか出来ません。CSS3では有りませんが意外と多彩な動きを処理出来ます。
下記は前に作ったJSです。構造が少し違います。

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

 

● max-widthを利用しない通常JSを修正した形式は最終段、「max-widthを利用しない画像エフェクト」参照ください。

 

1. レスポンシブ表示に max-width を利用しました。(別形式も最後に記載)
2. 通常のjQuery処理ですので、モダンブラウザおよびIE10以下にも対応しています。
(html5.jsを読み込んでるために確認しているだけで本格対応しようとは思っていません)
3. 単純構造のためPHP出力でも利用できると思います。
4. 画像幅が決まっていますので、拡大する用途には不向きです。(CSS3処理はしていない)
5. 画像が大型ですから、スマートフォンには迷惑な話です。
(デモでは880x380サイズ画像を使用しています)
6. jQueryは jquery-1.11.3.min.js を使用しています。


当方の構成と画像処理

当方では、画像を2枚重ねてエフェクト処理しているのが基本です。そのため、position:absoluteを設定しています。
本来はCSS3処理すべきなのですが、IE対応の「ページテンプレート」なので、あえて変な作りになっています。


1. この構造をhtml5で中央表示にすると、右に余白が出、横スクロールバーも出ます。
2. body直下の要素を overflow:hidden すれば余白を除去補正できます。
3. 「デモ」html5では「div #Page」で全体がラップされた構造になっていますので、
ここをoverflow:hidden処理しています。下記参照。


● 下記はその余白除去の処理ですので、注意ください。(ID名は自由です、直下にwraperが在れば利用可能)


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

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

//jQueryで処理する場合、下記でも機能します

$("body").wrapInner('<div id="xxxxx"></div>');
$('#xxxxx').css({'overflow':'hidden'});

● 最初の遅延は古いIEの反応が遅いための処置ですが、遅延なしでも良いとも思う。
(IE以外のモダンブラウザは遅延の必要は有りません)


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

max-widthを利用した画像エフェクト

下記が、基本的なHTML構造ですが前よりも簡略化されています。一番外側のDIVが無くとも機能します。
リスト形式ですから、PHP出力にも対応が可能と考えています。

下右図の様にmax-width設定のため画像を横幅より広げることが出来ませんので拡大の場合は縦方向のみですから少し見た目が悪い。縮小は問題は無い様です。html5の拡大縮小はCSS3のscaleを操作しますから本来は何ら問題は無い。

拡大用途の場合は、max-widthを利用しない通常横幅設定のJSを利用ください。「こちら」です。


zu

 

次は模擬デモ16のHTML CSSに成ります。

基本構造とCSS


<div id="fadeBox">
 <ul id="fadeBase">
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-02.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-03.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-04.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-05.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
 </ul>
</div>

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


CSS

この構造で、IE7では「右空白」は除去できません。もはや対応外ですが述べておきます。


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

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

/* 構造 */
/* ul borderダメ IE7のみ横スクロール*/
#fadeBase{
position:relative;/*IE7対応*/
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;/*MASK*/
}
/* image il */
#fadeBase .image-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}
#fadeBase .image-wrap img{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}

模擬デモ3種類

 

模擬デモ15、簡略画像エフェクト4付きTOPページ

margin auto方式、IEでは問題が起きるので注意のこと、修正OK

作成した模擬デモ「TOPページ」を表示します。リンクなどは機能しません。ブラウザの「戻る」ボタンで戻ってください。

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

レスポンシブWebデザインの表示確認ツールで見た場合 : 確認ツールで見た場合の表示


クロスフェードを含む「Transitionもどき」エフェクト処理です。Loaderで画像を読み込み処理します。


<!-- image UILI方式はIEスクロールバーがでる#Page機能せず -->
<div id="fadeBox">
   <ul id="fadeBase">
     <li id="fadeBaseBtm"><img src="/main/baserhtml/images/mainImg.jpg" /></li>
     <li id="fadeBaseTop"><img /></li>
     <div id="fadetextBox"><p>TEXT</p></div>
   </ul>
</div>


サンプルJS CSS


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

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

/* 構造 */
/* ul borderダメ IE7のみ横スクロール*/
#fadeBase{
position:relative;/*IE7対応*/
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;/*MASK*/
}
/* image il */
#fadeBaseBtm{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
z-index:1;
}
#fadeBaseBtm img{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}
#fadeBaseTop{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
z-index:2;
}
#fadeBaseTop img{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}
/* text */
#fadetextBox{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:5px;
text-align:left;
z-index:3;
}
#fadetextBox p{
color:#FF0000;
}


//responsive_effect.js
//画像フエードエフェクト3
//簡略化リスト方式

(function($){

  $(function(){

    function init(){

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

	//時間
	var cycle_time_main=8000;
	var cycle_time=6000;
	var fade_time=1000;

	//画像リスト
	var loadImage_len=0;
	var imagelist=[
		"/main/baserhtml/images/mainImage-01.jpg",
		"/main/baserhtml/images/mainImage-02.jpg",
		"/main/baserhtml/images/mainImage-03.jpg",
		"/main/baserhtml/images/mainImage-04.jpg",
		"/main/baserhtml/images/mainImage-05.jpg"
	];
	loadImage_len=imagelist.length;

	//オブジェクト
	var box_elm=$('#fadeBox');
	var img_box_elm=$('#fadeBase');
	var btm_item=$('#fadeBaseBtm');
	var top_item=$('#fadeBaseTop');
	var loading_text=$('#fadetextBox').find('p');//TEXT

	//変数、未使用も含む
	var timerID=null;
	var assets=[];//読み込み画像URL保存容器
	var cross_url="";
	var keep_url="";
	var image_max=0;
	var image_no=0;
	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,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];

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

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

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

	//描画準備
	function imagedraw(){

		loading_text.text("Wait");

		setTimeout(function() {
			//fade描画
			fadeImage();
		},cycle_time_main);

	}

	//Main-fadeImage
	function fadeImage (){

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

		//TEXT
		loading_text.text("Effect "+move_type);

		//事前処理/大きさ補正/現在の大きさでなら正確にアニメできる
		//IN
		if(move_type=='in'){
			cross_url=assets[image_no];
			top_item.children("img").attr({'src':cross_url}).css({'left':pos_x,'top':pos_y,'width':w_v,'height':h_v,'opacity':0});
			top_item.children("img").css({'display':'block'});//上層
			//IN エフェクト
			top_item.children("img").animate({'left':0,'top':0,'width':width_v,'height':height_v,'opacity':1},fade_time,function(){
				//階層処理
				btm_item.children("img").attr({'src':cross_url});//下層
				top_item.children("img").css({'display':'none'});//上層
				//事後処理
				keep_url=cross_url;
				//TEXT
				loading_text.text("Auto");
				//タイマーセット
				set_timer();
			});
		};

		//OUT
		if(move_type=='out'){
			cross_url=assets[image_no];
			top_item.children("img").attr({'src':keep_url}).css({'left':0,'top':0,'width':width_v,'height':height_v,'opacity':1});
			top_item.children("img").css({'display':'block'});
			btm_item.children("img").attr({'src':cross_url});//下層
			//IN エフェクト
			top_item.children("img").animate({'left':pos_x,'top':pos_y,'width':w_v,'height':h_v,'opacity':0},fade_time,function(){
				//階層処理
				top_item.children("img").css({'display':'none'});//上層
				//事後処理
				keep_url=cross_url;
				//TEXT
				loading_text.text("Auto");
				//タイマーセット
				set_timer();
			});
		}
	};

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

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

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

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

	}

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

		loading_text.text("Now Loading");

		//画像マルチローダーに進む
		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() {

		loading_text.text("Loading END");

		//画像数確認、再計算
		image_max=assets.length;
		//描画準備
		imagedraw();

	}

	//フロートしているので大きさを修正
	//window-resize
	$(window).resize(resizeFunc);

	function resizeFunc(){

		window_width=$(window).width();

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

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

			width_v=w;
			height_v=h;

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

		}else{

			width_v=image_w;
			height_v=image_h;

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

		}

	}

    }//init end

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

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

  });

})(jQuery);


 

模擬デモ16、簡略画像フェード付きTOPページ

margin auto方式、liリスト、IEでは問題が起きるので注意のこと、修正OK

作成した模擬デモ「TOPページ」を表示します。リンクなどは機能しません。ブラウザの「戻る」ボタンで戻ってください。

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

レスポンシブWebデザインの表示確認ツールで見た場合 : 確認ツールで見た場合の表示


クロスフェードのみの処理です。画像はリストで記載します。最後の層がエフェクトに成ります。


<div id="fadeBox">
 <ul id="fadeBase">
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-02.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-03.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-04.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-05.jpg" /></li>
  <li class="image-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
 </ul>
</div>

サンプルJS CSS


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

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

/* 構造 */
/* ul borderダメ IE7のみ横スクロール*/
#fadeBase{
position:relative;/*IE7対応*/
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;/*MASK*/
}
/* image il */
#fadeBase .image-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}
#fadeBase .image-wrap img{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}


//pops-fade-box.js
//画像クロスフェード1
//IE7のみ横スクロール

(function($){

  $(function(){

    function init(){

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

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

	//オブジェクト
	var box_elm_wrap=$('#fadeBox');
	var box_elm=$('#fadeBase');
	var img_elm=$('#fadeBase .image-wrap');

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

	//一旦全てを消す/URL取得
	$('#fadeBase .image-wrap').each(function(i){
		$(this).css({'z-index':i,'display':'none'});
		image_urls[i]=$(this).children("img").attr('src');
	});

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

	//display
	img_elm.eq(0).css({'display':'block'});
	//TOP-ITEM
	var top_item=img_elm.eq(img_len-1);
	//次の番号
	image_no=1;

	//スタート遅延
	setTimeout(function() {
		effectImage();
	},start_time);

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

		//事前処理
		top_item.css({'display':'none'}).css({'opacity':0});
		top_item.children("img").attr({'src':image_urls[image_no]});//画像切り替え
		top_item.css({'display':'block'});

		//クロスフェードのみ
		top_item.animate({'opacity':1},fade_time,function(){

			//階層処理
			img_elm.eq(image_no).css({'display':'block'});
			top_item.css({'display':'none'});
			img_elm.eq(keep_no).css({'display':'none'});
			//処理番号保存
			keep_no=image_no;
			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 hiritu=window_width/image_w;
			var h=image_h*hiritu;

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

		}else{

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

	}

    }//init end

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

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

  });

})(jQuery);


 

模擬デモ17、簡略画像エフェクト付きTOPページ

margin auto方式、Div、IEでは問題が起きるので注意のこと、修正OK


● 画像のみの羅列で、一部のスマートフォン、タブレット系でeach文を認識しない場合がある。

あくまでも、responsinatorでの出来事で有り、天気、マシンの気分も影響すし、CSSの記載の影響もあるかも知れない。得てして「セレクタ」の認識が良くない時はある。


書き方が手っ取り早い、機能しなかった

$('#fadeBase .image-parts').each(function(i){
	//
});

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

厳格にしたら機能した

$('#fadeBase img.image-parts').each(function(i){
	//
});

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

より正確にしたい場合は

$('#fadeBase').find('img').each(function(i){
	//
});

作成した模擬デモ「TOPページ」を表示します。リンクなどは機能しません。ブラウザの「戻る」ボタンで戻ってください。

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

レスポンシブWebデザインの表示確認ツールで見た場合 : 確認ツールで見た場合の表示


クロスフェードを含む「Transitionもどき」エフェクト処理です。画像はリストで記載します。最後の層がエフェクトに成ります。


<div id="fadeBox">
 <div id="fadeBase">
  <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 class="image-parts" src="/main/baserhtml/images/mainImage-01.jpg" />
 </div>
</div>

---------------------------------------------
imgを入れないとタブレット系が認識しない
CSS
#fadeBase img.image-parts{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}

JSも次のimg様にを入れた
JS
var img_elm=$('#fadeBase img.image-parts');

サンプルJS CSS


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

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

/* 構造 */
/* div borderダメ IE7のみ横スクロール*/
#fadeBase{
position:relative;/*IE7対応*/
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;/*MASK*/
}
/* image */
#fadeBase img.image-parts{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}


//pops-fade-box2.js
//簡易構造画像エフェクト
//IE7のみ横スクロールでる

(function($){

  $(function(){

    function init(){

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

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

	//オブジェクト
	var box_elm_wrap=$('#fadeBox');
	var box_elm=$('#fadeBase');
	var img_elm=$('#fadeBase img.image-parts');

	//変数
	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 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,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];

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

	//一旦全てを消す/URL取得
	$('#fadeBase img.image-parts').each(function(i){
		$(this).css({'z-index':i,'display':'none'});
		image_urls[i]=$(this).attr('src');
	});

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

	//display
	img_elm.eq(0).css({'display':'block'});
	//TOP-ITEM
	var top_item=img_elm.eq(img_len-1);
	//次の番号
	image_no=1;

	//スタート遅延
	setTimeout(function() {
		effectImage();
	},start_time);

	//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(){

				//階層処理
				img_elm.eq(image_no).css({'display':'block'});
				top_item.css({'display':'none'});
				img_elm.eq(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'});

			//下層表示
			img_elm.eq(image_no).css({'display':'block'});
			img_elm.eq(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 hiritu=window_width/image_w;
			var h=image_h*hiritu;

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

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

		}else{

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

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

		}

	}

    }//init end

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

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

  });

})(jQuery);


 

max-widthを利用しない画像エフェクト

通常処理のものをレスポンシブ対応するなら、影響する構成要素の大きさをJSで「画像比率」で常に修正すれば良いだけです。構造が単純であれば処理の負荷は余り感じられません。
構造にもよりますが今までのJS資産を簡単な修正で利用できるかも知れません。


demo-zu

 

通常のmax-widthを利用しない画像は横縦とも大きく出来る。
max-width処理の場合はその影響で横は固定されてしまいます。作り方次第ですが、エフェクトに違和感が出る場合があります。(通常の拡大が主と思う)

画像はベクターではないので拡大すれば粗くなるだけです。表示品質はブラウザ、解像度に影響を受けます。


zu

 

模擬デモ18、簡略画像通常エフェクト付きTOPページ

非max-width形式、Div、IEでは問題が起きるので注意のこと、修正OK
書き方に注意、直接imgをかくのは問題がありそうで、余り簡略化したくは無いところではあるが、これでは次のeach文を認識しているので、ブラウザの気分か、OSが古いのか判らん....



認識しています
$('#fadeBase .image-parts').each(function(i){
	//
});

------------------------------------------------
問題があれば次の様に

$('#fadeBase img.image-parts').each(function(i){
	//
});

初期時、画像は通常のPC表示の大きさで大型です。スマートフォンは小型ですが大きな画像を表示されJSで修正される経過をたどります。つまり画像表示画面が動き易く見苦しい。


1. max-width形式でないため、JSで修正される前に大型画像が表示される。
2. 次に、JSで修正され適正な大きさに表示される。つまり動き易いので見苦しい。
3. その防止策として、CSS初期時の画像高さを100pxにした。少し動きが止まり多少は効果がある。
4. 問題があれば自己解決ください。(護摩まかしの工夫です)
5. 気になる、気にならないは個人の感性の問題です。
6. 下記の「確認ツール」で見た場合、複数デバイスを表示していますので動作は遅くなります、実際アクセスにはデバイスは1つですから当然処理は早くなります。このことも考慮します。


作成した模擬デモ「TOPページ」を表示します。リンクなどは機能しません。ブラウザの「戻る」ボタンで戻ってください。

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

レスポンシブWebデザインの表示確認ツールで見た場合 : 確認ツールで見た場合の表示


クロスフェードを含む「Transitionもどき」エフェクト処理です。画像のみ下記の様に記載します。最後の層がエフェクトに成ります。
IN、OUTの処理をしていますが、クロスフェードは変わり有りません。



<div id="fadeBox">
 <div id="fadeBase">
  <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 class="image-parts" src="/main/baserhtml/images/mainImage-01.jpg" />
 </div>
</div>

 

サンプルJS CSS


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

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

/* 構造 非max-width形式*/
/* div borderダメ IE7のみ横スクロール*/
#fadeBase{
position:relative;/*IE7対応*/
width:880px;
height:100px;/*暫定*/
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden;/*MASK*/
}

/* image */
#fadeBase .image-parts{
position:absolute;
top:0;left:0;
width:880px;
height:380px;
margin:0;
padding:0;
}


//pops-slider.js
//簡易構造画像エフェクト、通常処理
//IE7のみ横スクロールでる

(function($){

  $(function(){

    function init(){

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

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

	//オブジェクト
	var box_elm_wrap=$('#fadeBox');
	var box_elm=$('#fadeBase');
	var img_elm=$('#fadeBase .image-parts');

	//変数
	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 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取得
	$('#fadeBase .image-parts').each(function(i){
		$(this).css({'z-index':i,'display':'none'});
		image_urls[i]=$(this).attr('src');
	});

	//初期化、寸法きめ
	resizeFunc();
	//display
	img_elm.eq(0).css({'display':'block'});
	//TOP-ITEM
	var top_item=img_elm.eq(img_len-1);
	//次の番号
	image_no=1;

	//スタート遅延
	setTimeout(function() {
		effectImage();
	},start_time);

	//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'){

			//事前処理children("img")
			cross_url=image_urls[image_no];
			//cross_url画像切り替え
			top_item.attr({'src':cross_url});
			top_item.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(){

				//階層処理
				img_elm.eq(image_no).css({'display':'block'});
				top_item.css({'display':'none'});
				img_elm.eq(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});
			top_item.css({'left':0,'top':0,'width':width_v,'height':height_v,'opacity':1});
			//上層表示
			top_item.css({'display':'block'});

			//下層表示
			img_elm.eq(image_no).css({'display':'block'});
			img_elm.eq(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();

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

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

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

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

		}else{

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

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

		}

	}

    }//init end

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

    //遅延なし実行
    init();

  });

})(jQuery);


使用画像

原則、使用者が用意します。: サンプルでの使用画像


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


 

上記サンプルなどは当方独自のもので無理やりレスポンシブにしている感じです。
簡単ですが、以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]