POPSブログ

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

400

  Category:  basercms2017/01/06 pops 

baserCMS4.0系をローカル環境にインストールしたレスポンシブデザインでテーマの「TOP画像のエフェクト」(アニメ)処理をレスポンシブ対応にしてみました。結構構造がメンドウですが、一応動作します。

 

responsive

 

baserCMS4.0系 TOP画像のFadeおよびSlide処理のテスト

画像のレスポンシブ表示の知識をえて、次はエフェクト(アニメ)処理を行ってみます。構成などは前ページの技法を踏襲します。
実際に色々作り、その差異を調べてみます。DEMOはローカル動作で生成したHTMLを表示しています。
注意、動作確認の模擬ページですので、リンクなどは機能しません。

 

max-widthを使用した形

ここより本題に入ります。下記に構造を示します。

ppap

 

1. max-widthに最大の幅を設定します。(通常はpx値で指定します)
2. 画像を position:absolute で配置します。(フロートしている状態)
3. 問題はラップ層の高さ調整をJSでしなければならない事です。(自動的に成る構造はあるのか不明...)
4. 画像の大きさからラップ層の高さ算出して補正します。
5. 一言で言えば、jQueryでモダンブラウザ以外にも対応しているので問題が起きている。
また、ブラウザ対応の不具合もあろうかとも思います。


エフェクト処理のための基本構造

HTML5 CSS3 処理のため、本来はCSS3でのエフェクトを行いたいのですが、まだブラウザなど対処していませんので、通常のjQueryで処理します。基本的にはIE10以上、または各種のモダンブラウザ対応になります。
IE7 8 9 10でも表示動作するが、本来は対処したく無いのが本音。


画像の配置

使用者が簡単に画像配置できる様「リスト」形式に構成する例が多い。

リストの最後に最初の画像をまた配置する(JSで動的に作る場合もある)。最後がエフェクト(animate())の対象になる。その他は「表示」「非表示」の切り替えをしている。


● 「li」リスト構造だとCSS等がメンドウ。「div」のみで構成しても結果は同じでした。(リスト構造には違いない)

IE10 9 8 7 でも上手く表示出来ます。但しIE7でマスク出来ないなどの不具合がある。
もはや、IE9 8 7 に対応したいとは思っていませんが....
但し「li」と「img」を動かせるので複雑なエフェクトを作り易い利点がある。



<div>
 <ul>
  <li><img /></li>
  <li><img /></li>
  .....
 </ul>
</div>

● 画像のみ並べたほうがCSS等が簡単な傾向にあるが、振る舞いは同じである。

IE7は画像を表示出来ない場合もある。(本来、IE10 9 8 7は排除すべき時代である...、IE11でもまともではない...)

最後に最初の画像をまた配置する。上の例と同じにします。


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

中央表示の不具合修正

margin:0 autoで中央表示を行った場合、下図中央の様に、構造によってはスクロールバーなどが出て、右側に少し余白が出て横幅が広がる場合があります。また、position:absoluteで配置した場合も同様です。
処理的には余白など求めていない、バグである。
下記の様にすれば修正可能です。


<div id="Page">と中央表示


TOP画像のエフェクト処理の構造を中央に配置するに「position修正」で上手く行かないので、margin:autoで処理している。
これも問題があるが、一番外側のDIV要素に overflow:hidden でスクロールを除去できる。
(スマートフォンでも同じ症状がでるので、必要な処理です)


page

 

各ページのHTML構成は、下記の様に、ID「Page」のDIV要素でラップなっています。
(baserCMS構成の場合は「Page」でラップする癖が今回役に立つ結果となる)


<body>
 <div id="Page">

   ページのHTML構造

 </div>
</body>

----------------------------------------------
bodyはダメです、縦にスクロールできなくなる

#Page{
overflow:hidden;
}

エフェクト処理部分を大きくラップして、overflow:hidden しても除去出来ません。

HTML5ですから、全て、CSS3での処理を行えば良いが、色々混在しているので起きる現象と思います。画像処理のレーヤーが伸びているのでしょう。ブラウザの進化に伴い直るかは不明です....。


追記 /2017/01/14/

通常Body直下にwrapperがあることが多いので、そこにhidden処理するようです。このデモHTMLではwrapperがエフェクト処理部分以下に有りますので、#Pageにしました。
#Pageなど無い場合はjQueryで処理しても良い。(ID名は自由です)



//#Pageが無い場合Body直下をラップする
$("body").wrapInner('<div id="xxxxx"></div>');
//hidden
$('#xxxxx').css({'overflow':'hidden'});

//幅設定が必要ならば
$('#xxxxx').css({'width':'100%','overflow':'hidden'});

以上の観点から実際に構造を作ってみる。10種位作ってみて1番効率の良い形式を記載します。


実際のエフェクト処理サンプル3種

 

1. 画像は3-5枚位。(スマートフォンでの負荷が大きいので考慮しましょう)
2. CSS、JSの画像サイズ部分を書き換える。
3. 画像のパスは使用者の環境に合わせます。(下記例は当方の場合の例です)
4. 速度などを変更できます。
5. animate()、事前処理の変更は可能です。
6. モダンブラウザ以外で「画像読み込み済み」で無ければ処理しない面があるので1秒遅延した。
7. マスクする場合はCSSで大きさを設定する必要があります。(overflow:hidden)
8. より良い方法があれば、書き換える可能性があります。誰か考えてください。
(初めて作るが、CSS、JS共に参考にしたものは無い、全くの自作です、メンドウですね)
9. 世間一般では「プラグイン」使用が多いようです。
10. 本来ならば全てCSS3処理とは思いますが、まだ対応ブラウザが限定されます。
11. jQueryは「baserCMS.4.0.1」に収容の、jquery-1.11.3.min.js を使用しています。
12. IE10 9 8 7は「開発者ツール」で確認。(余りアテにならないかも...)


透明度とsrc

JS処理では、img要素のsrcに画像を入れる場合、透明度が 0 でも画像を入れれば 1 に成ります(初期化される)。
CSS3での透明度処理は以外と軽く(早く)なりましたが、必要な場合この辺を考慮して処理下さい。

下記は「模擬デモ10」のアニメ処理部分ですが、画像切り替えの場合に、エフェクトの種類などによっては多少の工夫が必要となる事もあります。考慮しなくとも良い場合もある。(処理の遅い環境も考慮して事前処理をする)


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

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

 

模擬デモ10、画像スライド付きTOPページ

「ul」「li」構造、最終テスト品。最もレスポンシブ的で多様性がある。

demo10

 

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

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

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。



<div id="imageBox-wrap">
<div id="imageBox">
 <ul id="imagebox-inner">
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-02.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-03.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-04.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-05.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
 </ul>
</div>
</div>

サンプルJS CSS


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

/* maxWidthBox */
#imageBox-wrap{
width:100%;
height:auto;
padding:2px 0px;
text-align:center;
background-color:#f5f5f5;
}
#imageBox{
max-width:880px;
height:380px;
margin:0 auto;
padding:1px;
border:1px solid #d5d5d5;
overflow:hidden; /* 高さなしはNGの場合有り IE7は機能しない */
}
#imageBox #imagebox-inner{
position:relative;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap img{
width:100%;
height:auto;
}


//pops-effectbox.js
//画像エフェクト1

(function($){

  $(function(){

    function init(){

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

	//スライド反転係数/1=右から -1=左から
	var reversal=1;
	//画像修正係数0.95-1.0
	img_rate=0.95;

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

	//オブジェクト
	var box_elm_wrap=$('#imageBox');
	var box_elm=$('#imagebox-inner');
	var img_elm=$('#imagebox-inner .parts-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;

	//幅取得
	var window_width=0;
	window_width=$(window).width();
	var pos_x=0;
	if(window_width<image_w){
		pos_x=window_width;
	}else{
		pos_x=image_w;
	};

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

	//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({'left':pos_x*reversal,'top':0,'display':'none'}).css({'opacity':0});//移動
		top_item.children("img").attr({'src':image_urls[image_no]});//画像切り替え
		top_item.css({'display':'block'});

		//エフェクト
		top_item.animate({'left':0,'top':0,'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*img_rate;
			var hiritu=window_width/image_w*img_rate;
			var h=image_h*hiritu;

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

		}else{
			//box_elm_wrap.css({'width':image_w,'height':image_h});
			box_elm_wrap.css({'height':image_h});
		}

	}

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


    }//init end

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

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

  });

})(jQuery);

模擬デモ11、画像スライド付きTOPページ

「div」構造、最終テスト品。「模擬デモ10」を簡素化したものです。上記より多様性には欠ける。
形は変わってもリスト構造には違いない。

 

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

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

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。



<div id="imageBox-wrap">
<div id="imageBox">
 <div id="imagebox-inner">
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-01.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-02.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-03.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-04.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-05.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-01.jpg" />
 </div>
</div>
</div>

サンプルJS CSS


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

/* maxWidthBox */
#imageBox-wrap{
width:100%;
height:auto;
padding:2px 0px;
background-color:#f5f5f5;
}
#imageBox{
max-width:880px;
height:380px;
margin:0 auto;
padding:1px;
border:1px solid #d5d5d5;
overflow:hidden; /* 高さなしはNGの場合有り IE7は機能しない */
}
#imageBox #imagebox-inner{
position:relative;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
}


//pops-effectbox2.js
//画像エフェクト2

(function($){

  $(function(){

    function init(){

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

	//スライド反転係数/1=右から -1=左から
	var reversal=1;
	//画像修正係数0.95-1.0
	img_rate=0.95;

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

	//オブジェクト
	var box_elm_wrap=$('#imageBox');
	var box_elm=$('#imagebox-inner');
	var img_elm=$('#imagebox-inner .parts-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;

	//幅取得
	var window_width=0;
	window_width=$(window).width();
	var pos_x=0;
	if(window_width<image_w){
		pos_x=window_width;
	}else{
		pos_x=image_w;
	};

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

	//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({'left':pos_x*reversal,'top':0,'opacity':0,'display':'none'});//移動
		top_item.attr({'src':image_urls[image_no]});//画像切り替え
		top_item.css({'display':'block'});

		//エフェクト
		top_item.animate({'left':0,'top':0,'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*img_rate;
			var hiritu=window_width/image_w*img_rate;
			var h=image_h*hiritu;

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

		}else{
			//box_elm_wrap.css({'width':image_w,'height':image_h});
			box_elm_wrap.css({'height':image_h});
		}

	}

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


    }//init end

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

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

  });

})(jQuery);

模擬デモ12、画像スライド付きTOPページ2

「li」構造、連結式スライド、「エンドレスタイプ」に仕上げました、スライド方向は一定です。
画像を横に並べて全体をスライドしています。スライドの時間が長いと負荷が大きいるで注意ください。
1番目の画像を最後にも配置して「エンドレスタイプ」に処理しています。

demo12

 

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

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

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。



<div id="imageBox-wrap">
<div id="imageBox">
 <ul id="imagebox-inner">
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-02.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-03.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-04.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-05.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
 </ul>
</div>
</div>

サンプルJS CSS


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

/* maxWidthBox */
#imageBox-wrap{
width:100%;
height:auto;
padding:2px 0px;
background-color:#f5f5f5;
}
#imageBox{
position:relative;
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
overflow:hidden; /* 高さなしはNGの場合有り IE7は機能しない */
}
#imagebox-inner{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap img{
width:100%;
height:auto;
}


//pops-effectbox3.js
//画像SLIDER、エンドレスタイプ

(function($){

  $(function(){

    function init(){

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

	//画像修正係数なし

	//時間
	var start_time=8000;
	var cycle_time=6000;
	var slide_time=800;//400-800

	//オブジェクト
	var box_elm_wrap=$('#imageBox');
	var box_elm=$('#imagebox-inner');
	var img_elm=$('#imagebox-inner .parts-wrap');

	var img_len=img_elm.length;
	var image_max=img_len;
	var timerID=null;
	var image_no=0;
	var keep_no=0;
	var image_urls=[];
	var item_w;
	var pos_x=0;

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

	//次の番号
	image_no=1;

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

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

		var pos_v=image_no*pos_x*-1;
		//エフェクト
		box_elm.animate({'left':pos_v,'top':0},slide_time,function(){

			//最後なら
			if(image_no == image_max-1){
				box_elm.css({'left':0,'top':0});
			}

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

		});

	}

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

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

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

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

	}

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

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

		window_width=$(window).width();

		if(window_width<image_w){
			pos_x=window_width;
		}else{
			pos_x=image_w;
		};

		//横に並べる
		$('#imagebox-inner .parts-wrap').each(function(i){
			$(this).css({'left':pos_x*i,'top':0});
		});
		//スライダー位置調整
		var pos_v=image_no*pos_x*-1;
		box_elm.css({'left':pos_v,'top':0});


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

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

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

		}else{

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

	}

    }//init end

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

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

  });

})(jQuery);

使用画像

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




【参照】当方の記事: baserCMS4.0系をローカルにインストールする

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作1

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作2

【参照】当方の記事: baserCMS4.0系 TOP画像のレスポンシブ表示


 

簡単ですが、以上です。

 


[ この記事のURL ]


タグ:basercms4 , html5

 

ブログ記事一覧



[1]