POPSブログ

簡易TRANSITION-PHOTO/1

46

  Category:  jquery2012/03/06 pops 

簡易TRANSITION-PHOTO-1、画像に色々な、エフェクトをくわえます。


簡易TRANSITION-PHOTO-1

pops-transitionphoto01.js

トランジッション、サンプル表示



HTML構造を直接書きますが、残り画像はJS側スクリプトに記述します。

  • 簡易記述方式のJSです。読み込めば直ぐ実行します。
  • サイクルタイムは、JSで2種設定できます。書き換えてください。
    (スタートまでの時間、サイクル、スライドの時間など、画像の大きさ状況にあわせる)
  • JSで必要な設定をして上書き保存する。
  • 画像は個人で、5-10枚用意ください。
  • 画像名、画像までのパスはJSに記載します、随時ロード形式です。
    (その都度、画像をロードしますので、画像転送量を少し抑えることができます)
  • 画像の大きさで、CSSをも変更ください。
  • TOPページ用途です。複数の設置は原則できません。
  • IE8 はキレイに動作しません。Google Chrome を利用ください。

簡単な動作の説明


名前はトランジッションですが、たいそうなものではありません、少し多くエフェクトが在るだけです。但しFLASH等と違い、見た目の同じ様なものばかりです。JSでは変化の種類が限定されますから、、
つまり「トランジッションのまがい物」です。


簡単なスクリプト説明


途中略す

var move_set = function () {
開始時、終了時の位置大きさなどを配列に保存しています

start_pos_x = [bs_W,-bs_W,0,0,..............

略

説明TEXTを表示したときの名前です
//TEXT用
move_name = ['Slide-R-IN','Slide-L-IN','Slide-T-IN',........

}

途中略す

アニメ処理の時に配列のデータを使用します、アウトの場合は反対になっています
アニメまでの処理が長くなっていますが、画像を入れた場合にスムーツに移行できるようにの
工夫ですので、書き換えないでください

//IN
if (in_type == 'in') {

	//上画像TOPelm
	top_elm.css({'top':start_pos_y[no],'left':start_pos_x[no],'width':start_W[no],'height':start_H[no],'display':'none'});
	top_elm.children("img").empty().attr({src:img_url});
	top_elm.css({'display':'block'});
	//
	top_elm.animate({'top':end_pos_y[no],'left':end_pos_x[no],'width':end_W[no],'height':end_H[no]},speed,function() {
		//下画像に新しいURLセット
		imgholder_elm.children("img").empty().attr({'src':img_url});
		//上画像非表示、ずらす
		top_elm.css({'left':bs_W,'top':0,'display':'none'});
		//終了処理に進む
		trans_image_parts();

	});
}

途中略す

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

HTML側に下画像URLを記載しないで使用する場合の変更
(マシン環境が悪くFirefox使用の場合有効、下画像切り替えで、最初にHTMLに記載した画像が一瞬見える場合がある)

<div id="t_imgholder"><img /></div>

JS側の変更

//init
var init = function () {
	途中略す

下の設定を有効にしてください、下画像にURLをおくります

	//下画像にURLをセット表示/未使用
	//imgholder_elm.children("img").empty().attr({'src':img_url});

	途中略す
}

但し最初の画像表示が遅くなります


設置方法

簡易JS記述、間違いの少ない、setTimeout の通常方式で記述しています。なお、設置するページが違えば、別画像ででも使用できま すが、画像の大きさが違えば別のCSS名で新たに作ってリンクしてください。


[ HTML構造を作る ]
以下のように構造を作ってください。ID は #pops_transition_photo です。


<div id="pops_transition_photo">
	<div id="transit_box">
		<div id="t_imgholder"><img src="/main/images/photo_tm1.jpg" /></div>
		<div id="top_base"><img /></div>
		<div id="t_loading"></div>
		<div id="view_text"></div>
	</div>
</div>

注意、原則、最初の画像を #t_imgholder に書き込んでください。また全画像はJSに登録します。画像伸縮のため幅高さを100%で使用しますので、大きさは記入しないでください。


[ 使用方法 ]、JSを読み込むだけで実行します。またHEAD部分に直接記述しても実行します。
注意、jquery1.42以降のバージョンで作動します。


読み出す場合
<link rel="stylesheet" type="text/css" href="/main/css/pops-transitionphoto01.css" />
<script type="text/javascript" src="/main/js/jquery.js"></script>
<script type="text/javascript" src="/main/js/pops-transitionphoto01.js"></script>

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

HEAD部分に直接JSを記述する場合
<script type="text/javascript">
	ここにJS部分を直接記述
</script>

JS、CSS、Loading画像

JS pops-transitionphoto01.js 通常方式

ActinScriptのTransitionとは意味がちがいます。中には使用していない変数もあります。


//pops-transitionphoto01.js
//setTimeout loading 通常方式
//POPS WEB KOUBOU

(function($){

	$(function(){

		var bs_W = 640;
		var bs_H = 200;

		var first_time = 12000;//スタートまでの時間、5000以上 
		var cycle_time = 8000;//サイクル 5000以上
		var speed = 1000;//拡大縮小時間 800-1200

		//TEXT表示
		var text_use="";//use

		//画像までのパス
		var path='/main/images/';
		//画像名を登録する
		var img_urls=['photo_tm1.jpg','photo_tm2.jpg','photo_tm3.jpg','photo_tm4.jpg','photo_tm5.jpg'];
		var list_len=img_urls.length;

		//jQueryObjectCache
		var imgholder_elm,trans_base_elm,mid_elm,top_elm;
		var img_url,keep_url,loading;
		var imgPreloader;//opela

		//chash
		trans_base_elm = $('#transit_box');
		imgholder_elm = $('#transit_box #t_imgholder');
		top_elm = $('#transit_box #top_base');
		loading = $('#transit_box #t_loading');

		var view_type = 'move';
		var random_nm = ['move','move','fade'];

		//position
		//move
		var start_pos_x = [],start_pos_y = [],end_pos_x = [],end_pos_y = [],start_W = [],start_H = [],end_W = [],end_H = [];
		var move_name = [],move_name2 = [];

		var count = 0;
		var no = 0;
		var move_type_name = ['in','out'];
		var in_type = "in";
		var fade_set = "";
		var anime_move = "";

		//opacity使用の判定
		var support_op=true;
		if (!jQuery.support.opacity) {support_op=false;}

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

		//init
		var init = function () {

			//loading-Set
			loading.css({'width':bs_W,'height':bs_H,'display':'none'});
			//Box右移動、非表示
			top_elm.children("img").css({'width':'100%','height':'100%'});
			top_elm.css({'left':bs_W,'top':0,'display':'none'});

			//位置情報取得
			move_set();

			//最初の画像をINNER画像BOX1にセット表示する
			img_url=path+img_urls[count];
			keep_url=path+img_urls[count];

			//下画像にURLをセット表示/未使用
			//imgholder_elm.children("img").empty().attr({'src':img_url});

			//次ぎの画像の番号セット
			count = 1;

			//START Main-timer-set
			window.setTimeout(nextImage,first_time);

		}

		//動作用の配列データのセット
		var move_set = function () {
//move-position
//---------------0----------------------------------------10---12------------------------16-------------20--------22-----23-----------25-----
start_pos_x = [bs_W,-bs_W,0,0,bs_W,bs_W,-bs_W,-bs_W,bs_W,0,0,0,bs_W,0,bs_W/2,bs_W/2,bs_W,bs_W,0,0,bs_W/2,0,bs_W/2,bs_W/4,bs_W/2,bs_W/4,0,0,0];
//-------------0------------------------------------------------12-----------------16------------20--------22-----23-------------25-------
start_pos_y = [0,0,-bs_H,bs_H,-bs_H,bs_H,-bs_H,bs_H,0,0,0,bs_H,bs_H/2,bs_H/2,0,bs_H,0,bs_H,0,bs_H,0,bs_H/2,bs_H/2,bs_H/4,bs_H/4,bs_H/2,0,0];
end_pos_x = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
end_pos_y = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
//WH
//-----------0---------------------------------------------------12-----16------20----------23------25-------
start_W = [bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,0,0,bs_W,bs_W,0,0,0,0,0,0,0,0,0,bs_W,0,bs_W/2,0,bs_W/2,bs_W,bs_W];
start_H = [bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,0,0,0,0,0,0,0,0,0,0,bs_H,0,0,bs_H/2,bs_H/2,0,bs_H,bs_H];

end_W = [bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W,bs_W];
end_H = [bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H,bs_H];

//TEXT用
move_name = ['Slide-R-IN','Slide-L-IN','Slide-T-IN','Slide-B-IN','Slide-TR-IN','Slide-BR-IN','Slide-TL-IN','Slide-BL-IN','Blind-R-IN','Blind-L-IN','Blind-T-IN','Blind-B-IN','Scale-R-IN','Scale-L-IN','Scale-T-IN','Scale-B-IN','Scale-TR-IN','Scale-BR-IN','Scale-TL-IN','Scale-BL-IN','H-Blind-IN','V-Blind-IN','C-Scale-IN','C-Scale-IN2','H-Scale-IN','V-Scale-IN','---','---'];
move_name2 = ['Slide-R-OUT','Slide-L-OUT','Slide-T-OUT','Slide-B-OUT','Slide-TR-OUT','Slide-BR-OUT','Slide-TL-OUT','Slide-BL-OUT','Blind-R-OUT','Blind-L-OUT','Blind-T-OUT','Blind-B-OUT','Scale-R-OUT','Scale-L-OUT','Scale-T-OUT','Scale-B-OUT','Scale-TR-OUT','Scale-BR-OUT','Scale-TL-OUT','Scale-BL-OUT','H-Blind-OUT','V-Blind-OUT','C-Scale-OUT','C-Scale-OUT2','H-Scale-OUT','V-Scale-OUT','---','---'];

		}

		//表示の種類により振り分け
		var set_view_images = function () {

			//timer-off
			view_type = random_nm[Math.floor(Math.random() * random_nm.length)];

			if(view_type == 'fade') {
				fade_image();
			}
			if(view_type == 'move') {
				move_image();
			}
		}

		//フエード処理表示
		function fade_image (){

			anime_move = 'move';
			fade_set = "fade";
			
			//IN OUTはなし
			in_type = "---";
			//TEXT用途
			set_text(" [FADE] " + fade_set + "");

			//上画像TOPelmに前の画像をセット
			top_elm.children("img").empty().attr({src:keep_url});
			top_elm.css({'top':0,'left':0,'width':bs_W,'height':bs_H,'display':'none'});
			//imgholder
			imgholder_elm.children("img").empty().attr({'src':img_url});
			top_elm.css({'display':'block'});

			top_elm.animate({'opacity':0},speed,function() {
				//下画像に新しいURLセット
				imgholder_elm.children("img").empty().attr({'src':img_url});
				//上画像非表示、ずらす
				top_elm.css({'left':bs_W,'top':0,'display':'none'});
				//終了処理に進む
				trans_image_parts();

			});

		};

		//トランジッション処理表示
		var move_image = function () {

			anime_move = 'move';
			fade_set = "";

			//IN OUTの決定
			in_type = move_type_name[Math.floor(Math.random() * move_type_name.length)];
			//ランダムにトランジッションの番号抽出
			no = Math.floor(Math.random() * 26);
			if (no > 25) {no = 0;}

			//TEXT用途
			var mvName = move_name[no];
			if (in_type == 'out') {mvName = move_name2[no];}
			set_text(" [ " + in_type + " ] MOVE " + no + " / " + mvName + "");

			//IN
			if (in_type == 'in') {

				//上画像TOPelm
				top_elm.css({'top':start_pos_y[no],'left':start_pos_x[no],'width':start_W[no],'height':start_H[no],'display':'none'});
				top_elm.children("img").empty().attr({src:img_url});
				top_elm.css({'display':'block'});
				//
				top_elm.animate({'top':end_pos_y[no],'left':end_pos_x[no],'width':end_W[no],'height':end_H[no]},speed,function() {
					//下画像に新しいURLセット
					imgholder_elm.children("img").empty().attr({'src':img_url});
					//上画像非表示、ずらす
					top_elm.css({'left':bs_W,'top':0,'display':'none'});
					//終了処理に進む
					trans_image_parts();

				});
			}
			//OUT
			if (in_type == 'out') {

				//上画像TOPelm/Firefoxここの処理が遅い
				top_elm.children("img").empty().attr({src:keep_url});
				top_elm.css({'top':end_pos_y[no],'left':end_pos_x[no],'width':end_W[no],'height':end_H[no],'display':'none'});
				top_elm.css({'display':'block'});
				//
				imgholder_elm.children("img").empty().attr({'src':img_url});
				//
				top_elm.animate({'top':start_pos_y[no],'left':start_pos_x[no],'width':start_W[no],'height':start_H[no]},speed,function() {
					//上画像非表示、ずらす
					top_elm.css({'left':bs_W,'top':0,'display':'none'});
					//終了処理に進む
					trans_image_parts();

				});

			}
		}

		//end-anime 終了処理
		function trans_image_parts() {

			anime_move = '';
			//fadeの場合opacity戻す
			if (fade_set=='fade') {
				top_elm.css({'opacity':1});
				//support.opacity判定/filterの除去
				if (!support_op) {top_elm.css({'filter':'none'});}
			}

			//Firefox対策/画像BOXの大きさを戻す
			top_elm.css({'width':bs_W,'height':bs_H});

			//keep-url
			keep_url=img_url;
			//cycle-time
			setTimeout(nextImage,cycle_time);

		};

		//NEXT
		function nextImage() {
			//カウントアップ
			count++;
			if (count > list_len-1) {count = 0;}
			//imgタグに入れる、URL取得
			img_url = path+img_urls[count];
			imgload ();
		}

		//imgPreloader
		var imgload = function() {
			//loading
			loading.css({'display':'block'});
			//set-imgPreloader
			imgPreloader = new Image();
			//onload
			imgPreloader.onload = function() {
				//loading
				loading.css({'display':'none'});
				//TRANSITION振り分に進む
				set_view_images ();
			}
			//url
			imgPreloader.src = img_url;
		}

		//set-text
		function set_text(text) {
			if (text_use == 'use') {
				$('#view_text').text(text);
			}
		}

		//init start
		init();

	});

})(jQuery);

Loading画像 31x31



CSS pops-transitionphoto01.css


/* pops-transitionphoto01.css 日本語*/

#pops_transition_photo {
	display:block;
	position:relative;
	width:640px;
	height:200px;
	background-color:#000000;
}
#pops_transition_photo #transit_box {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	background-color:#000000;
	overflow:hidden;
}

#transit_box #t_imgholder {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	padding:0;
	margin:0;
	border-style:none;
	background-color:#000000;
}
#transit_box #t_imgholder img {
	padding:0;
	margin:0;
	border-style:none;
	text-decoration:none;
}

#transit_box #top_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#transit_box #top_base img {
	width:100%;
	height:100%;
	border-style:none;
}

#transit_box #t_loading {
	display: block;
	position:absolute;
	top:0;left:0;
	border:0;
	background: url("/main/images/loading.gif") no-repeat center center;
	background-color: none;/*Safari*/
}
#transit_box #view_text {
	display:block;
	position:absolute;
	top:5px;left:5px;
	width:80%;
	height:20px;
	color:#FF0000;
}

以上です。



[ この記事のURL ]


タグ:series , photo , Transition , jquery

[ 簡易TRANSITION-PHOTO シリーズ記事 ]

簡易TRANSITION-PHOTO/42012.03.09
簡易TRANSITION-PHOTO/32012.03.08
簡易TRANSITION-PHOTO/22012.03.07
簡易TRANSITION-PHOTO/12012.03.06

 

ブログ記事一覧

年別アーカイブ一覧



[1]