POPSブログ

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

403

  Category:  basercms2017/01/20 pops 

baserCMS4.0系レスポンシブ対応の「TOP画像のエフェクト処理」の続きで、ブラウザ幅一杯に画像を表示するタイプで「Transitionもどき」で処理してみます。CSS3処理ではないので、余りブラウザを問いません。
実際画像は大きいがスマートフォンでは当然小さく表示するのが難点ノドアメです。

 

demo-zu

 

1. ブラウザ幅一杯に画像を表示するので、PC用として大きい画像を用意します。
(幾分小さめでも拡大しますが、当然ぼやけて表示品質は悪い)
2. スマートフォンでは縮小されますので、大きい画像は迷惑なだけです。
(現在のスマートフォン料金体制では、通信の環境にもよりますが、困る人が出てくるでしょう)
3. スマートフォン用に独自のページを作り小さな画像を読み込むことは「メンドウ」故、少ないでショウ。
4. よって、余りお勧めしません。(「ソンナノ関係ない」という方は別です)
5. デモではjQueryは、jquery-1.11.3.min.jsを使用しています。


 

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

横幅の拡大が出来ないため、少し違和感の有るエフェクトがあります。それほど気になるものではありません。
CSS3処理ならスケールで拡大できるが、ここではページがIE10以前にも対応させていますので、従来のjQueryでの処理です。
CSS3処理でない故「Transitionもどき」ですが、エフェクトの種類が多いので結構満足行きます。
キレイな「拡大縮小」させるには下段の「max-widthを利用しない画像エフェクト」を利用ください。


模擬デモ19、簡略全幅(100%)表示画像エフェクト付きTOPページ

margin auto方式、DIV構成で前ページの「模擬デモ17」を少し修正しただけです。詳しくは参照ください。


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

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

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


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



<div id="fadeBox">
 <div id="fadeBase">
  <img class="image-parts" src="/main/baserhtml/images/main_image_1.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_2.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_3.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_4.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_5.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_1.jpg" />
 </div>
</div>

サンプルJS CSS


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

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

/* 構造 */
/* div borderダメ IE7のみ横スクロール*/
#fadeBase{
position:relative;/*IE7対応*/
max-width:100%;
height:auto;
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-box3.js
//簡易構造画像エフェクト
//横幅100%処理

(function($){

  $(function(){

    function init(){

	//画像の大きさ
	var image_w=1260;
	var image_h=400;

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

	//MASKをここで実行する
	box_elm.css({'overflow':'hidden'});

	//変数
	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();

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

	}

    }//init end

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

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

  });

})(jQuery);


模擬デモ19B、簡略全幅(100%)表示画像クロスフェード付きTOPページ

模擬デモ19のJSをクロスフェード専用に変更簡略化したものです。ドロップシャドウをつけてみました。


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

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

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


クロスフェード専用です。スライドなどはできません。



<div id="fadeBox">
 <div id="fadeBase">
  <img class="image-parts" src="/main/baserhtml/images/main_image_1.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_2.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_3.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_4.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_5.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_1.jpg" />
 </div>
</div>

下側のみにborderまたは、shadowをつける場合は「#fadeBox」を利用します。下記はドロップシャドウの例です。(IE9まで有効)
スマートフォンでもOKのようです。「#fadeBase」または画像に処理すると、MASKされていれば切れて効果なしか見苦しくなります。「#fadeBox」が必要なければ省略可能です。


#fadeBox{
position:relative;
width:100%;
height:auto;
box-shadow:0px 9px 3px -3px rgba(0,0,0,0.5);
}
----------------------------------------------

全幅の場合
width:100%;

前ページの様に画像幅指定の場合
width:auto;

サンプルJS CSS


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

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

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


//pops-fade-box4.js
//簡易構造画像クロスフェード専用
//横幅100%処理/Maskなし

(function($){

  $(function(){

    function init(){

	//画像の大きさ
	var image_w=1260;
	var image_h=400;

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

	//一旦全てを消す/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);

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

		//事前処理
		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(){

			//階層処理
			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();

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

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

	}

    }//init end

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

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

  });

})(jQuery);


 

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

通常処理のものをレスポンシブ対応に改造したもので横幅の拡大が出来ますが、関連要素を常時修正しなければなりません。


模擬デモ20、簡略全幅(100%)表示画像通常エフェクト付きTOPページ

非max-width形式、DIV構成で前ページの「模擬デモ18」を少し修正しただけです。詳しくは参照ください。


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

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

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


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



<div id="fadeBox">
 <div id="fadeBase">
  <img class="image-parts" src="/main/baserhtml/images/main_image_1.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_2.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_3.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_4.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_5.jpg" />
  <img class="image-parts" src="/main/baserhtml/images/main_image_1.jpg" />
 </div>
</div>

サンプルJS CSS


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

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

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

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



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

(function($){

  $(function(){

    function init(){

	//画像の大きさ
	var image_w=1260;//画像の大きさ
	var image_h=400;

	//時間
	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();

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

	}

    }//init end

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

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

  });

})(jQuery);


使用画像

原則、使用者が用意します。使用しているのは、BaserCMS4.0.1に内包されている1260x400サイズの画像です。


最大表示が画像の大きさの場合は下記参照ください。

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

CSS3、Transition処理のサンプルは下記ページ参照、回転も可能です。

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


 

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

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]