POPSブログ

jQuery CSS3 transit.js使用のテキスト分割アニメーション z-indexの操作

366

  Category:  jquery2015/09/05 pops 

jQueryプラグイン、jquery.transit.js、テキスト分割アニメーション時に綺麗になるように、個々のアニメーション処理で、delay直後にz-indexの操作で1番上に来るようにします。その他細やかな操作も可能です。
「前ページ」テキスト分割アニメーションでの欠点問題点を解決したものです。

 

ご注意、IE10以上のモダンブラウザでご覧ください(Chrome推奨)。IE9およびそれ以前のブラウザではご覧になれません。但し、Android系の動作は不明です。


jQuery CSS3 transit.js使用のテキスト分割アニメーション テスト5

IN OUT 2種類のアニメーション テストです。「前ページ」とは別の形式で「z-index」を変更しています。
こちらの処理のほうが、綺麗で効率的と思います。text-transition-sum5.js


下の「アニメ実行ボタン」を押してください。ランダムに別アニメで実行します(数十種あり)。複数回実行してください

尚、お手元にジュース、デザート、スイーツ、枝豆などご用意戴けるなら、楽しく観賞できます。

 

MESS

 

● 右のボタンを押してください。テキストアニメーションを実行します。/ アニメ実行 (アニメ中は機能しません)

背景色、背景画像の変更が可能です。

背景色切替 :                      

背景画像切替 : 姉チャン1 姉チャン2 姉チャン3 見返り美人 五輪ピック

時節柄、無断流用引用パクリ画像により構成されています。


 

 

text-transition-sum5.js、JS名は任意に変更できます。

HTML JS CSS

上の、「テキストアニメーションのテスト5」の HTML JS CSS です。



<p id="text-mass" class="red">MESS</p>
<div id="textchip-wrap">
<p id="anime-text" class="anime-block"></p>
</div>
<p>テキストアニメーションを実行します。/ <span id="hit-btn" class="my-btn">アニメ実行</span></p>


//text-transition-sum5.js

//TEXT-ANIME5
(function($){

	$(function () {

		var btnflag=true;

		//TEXT
		var mainstring="CSS3. transition アニメーション";

		var tx_speed=1200;
		var tx_delay_time=250;
		var fontcolor="#20B2AA";
		var rainbow=true;
		//text-indentはマージンで設定
		var indent=-8;
		//中央からの絶対距離1
		var distance=320;
		//相対距離2
		var distance2=500;
		//中央からの指定ポイント距離/右上隅
		var rang_X=320;
		var rang_Y=-100;

		var inType=true;
		var textlen;
		var textChip=[];

		//オブジェクト
		var anime_text=$("#anime-text");

$('#text-mass').text("ボタンを押してください");

		//クリックアクション
		$('#hit-btn').click(function(){

			if(btnflag){
				//テキストを作る
				create_text();
				//アニメする
				text_transition();
			}else{
				return false;
			}

		});

		//クリエートテキスト
		function create_text(){

			textlen=mainstring.length;
			var text_html="";
			//spanで造成
			for (var i=0; i < textlen; i++) {

				var tx=mainstring.charAt(i);//1文字取り出す
				if(tx == ' ') {tx='&nbsp;'}//Firefox
				//HTML連結/Fontクラス記載
				text_html=text_html + '<span id="'+ 'slice-text'+ i + '" class="slice_text">'+ tx +'</span>';

			}
			//apend
			anime_text.html(text_html);
			//オブジェクト保存
			for (var i=0; i < textlen; i++) {

				textChip[i]=$("#slice-text"+i);//オブジェクト保存
				textChip[i].attr('no',i);//スパン番号取得用

				//TEXT-COLOR
				if(rainbow){
					//虹色に染める
					var angle=i/textlen;//0-1
					var rgb=hslToRgb(angle,1,0.5);//RGB
					var color=getHexString(rgb[0],rgb[1],rgb[2])//#FFFFFF形式
					textChip[i].css({'color':color});
				}else{
					//指定色
					textChip[i].css({'color':fontcolor});
				}

				//indentはマージンで設定/最初を除く
				if(indent){
					if(i > 0){textChip[i].css({'marginLeft':indent});}//0以上
				}

				//陰影はtextShadow
				textChip[i].css({textShadow:'0 0 5px #000000'});

			}

			//全体を回転
			//anime_text.css({rotate:15});//OK
		}

		//アニメ
		function text_transition(){

			//IN OUT
			inType=true;
			var indexchg_v=Math.floor(Math.random()*2);
			if(!indexchg_v) {inType=false;}

btnflag=false;
//mass-text
var mass="IN";
if(!inType){mass="OUT"}
$('#text-mass').text(" "+mass);

			var tx_sliceflag=0;
			var point_v=-1;//交互にマイナス値
			var tx_scales=[0,0.5,1,2,3,5,8];
			var tx_rotate_no=[0,0,1,2,3,4,4];

			//逆転フラグ
			var chg_v=Math.floor(Math.random()*2);
			if (chg_v < 1) {chg_v=-1;}
			//delay番号
			var delay_no=Math.floor(Math.random()*5);//4
			//動きのタイプ
			var tx_moveType=Math.floor(Math.random()*6);//6

			//flag
			var chgflag=Math.floor(Math.random()*5);
			var chgflag2=Math.floor(Math.random()*4);//4
			var posflag=Math.floor(Math.random()*4);//4
			var scaleflag=Math.floor(Math.random()*tx_scales.length);
			var rotateflag=Math.floor(Math.random()*tx_rotate_no.length);//7

			var tx_pos_X=0;
			var tx_pos_Y=0;
			var tx_scale_X=tx_scales[scaleflag];
			var tx_scale_Y=tx_scales[scaleflag];
			var tx_alpha_no=0;
			var rotate_v=tx_rotate_no[rotateflag]*90*chg_v;

			var tx_delay_st=[];
			var offset_left=[];
			var chip_W=[];
			var k_pos_X=[];//out用
			var k_pos_Y=[];
			var allwidth=0;

			//base-offsetベースのoffset
			var offset_base=anime_text.offset();
			var sh=textlen-1;

			//位置大きさ計算
			for (var i=0; i < textlen; i++) {

				//offset
				var offset=textChip[i].offset();
				offset_left[i]=offset.left-offset_base.left;//中の距離

				//個別文字の大きさ
				chip_W[i]=textChip[i].width();

			}

			//Pで取得
			allwidth=anime_text.width();

			//移動遅延CSS処理
			for (var i=0; i < textlen; i++) {

				//中央Xポジション/chip_W訂正して正確に
				var center_pos=(allwidth/2)-offset_left[i]-chip_W[i]/2;

				var p_v=1;

				//POSX移動値処理
				//その場
				if(tx_moveType == 0){
					tx_pos_X=0;
					tx_pos_Y=0;
					p_v=1;
					tx_scale_X=0;
					tx_scale_Y=0;
				}
				//左右相対位置/distance2
				if(tx_moveType == 1){
					tx_pos_X=distance2;
					tx_pos_Y=0;
					if(posflag == 0){p_v=1;}//右
					if(posflag == 1){p_v=-1;}//左
					if(posflag > 1){p_v=point_v;}//左右
				}
				//左右絶対位置
				if(tx_moveType == 2){
					tx_pos_X=0;
					tx_pos_Y=0;
					tx_alpha_no=0;

					//中央位置
					if(posflag == 0){
						tx_pos_X=center_pos;
						p_v=1;
					}
					//右または左/distance距離
					if(posflag == 1){
						tx_pos_X=center_pos+distance*chg_v;
						p_v=1;
					}
					//左右/P文字の両端位置
					if(posflag == 2){
						tx_pos_X=center_pos+allwidth/2*point_v;
						p_v=1;
					}
					//中央からの指定ポイント
					if(posflag == 3){
						tx_scale_X=0;
						tx_scale_Y=0;
						tx_pos_X=center_pos+rang_X;
						tx_pos_Y=rang_Y;
						tx_alpha_no=1;
						p_v=1;
					}
				}
				//上下250固定
				if(tx_moveType == 3){
					tx_pos_X=0;
					tx_pos_Y=250;
					if(posflag == 0){p_v=1;}//下
					if(posflag == 1){p_v=-1;}//上
					if(posflag > 1){p_v=point_v;}//上下
				}
				//ランダム位置範囲は固定
				if(tx_moveType > 3){
					tx_pos_X=Math.floor(Math.random()*500)-250;
					tx_pos_Y=Math.floor(Math.random()*500)-250;

					//ランダム位置2/スケールマイナス/回転は区別がわからない
					if(tx_moveType == 4){
						tx_scale_X=-2;tx_scale_Y=2;
					}
					if(tx_moveType == 5){
						tx_scale_X=2;tx_scale_Y=-2;
					}
					p_v=1;
				}

				//方向値設定
				k_pos_X[i]=tx_pos_X*p_v;
				k_pos_Y[i]=tx_pos_Y*p_v;

				//alpha修正追加
				if(tx_scale_X == 0){tx_alpha_no=1;}

				//CSS設定
				if(inType){
					//CSS移動時間がかかる
					textChip[i].css({translate:[k_pos_X[i],k_pos_Y[i]],rotate:rotate_v,scale:[tx_scale_X,tx_scale_Y],'opacity':tx_alpha_no});//左右OK
				}
				if(!inType){
					//CSS移動しない
					textChip[i].css({translate:[0,0],rotate:0,scale:[1,1],'opacity':1});
				}

				//delay
				tx_delay_st[i]=i*tx_delay_time;
				if (delay_no == 0) {tx_delay_st[i]=tx_delay_time*(sh-i);}//逆順
				if (delay_no == 1) {tx_delay_st[i]=Math.abs(i-sh/2)*tx_delay_time;}//中から
				if (delay_no == 2) {tx_delay_st[i]=Math.abs(Math.abs(i-sh/2)-textlen/2)*tx_delay_time;}//外から
				if (delay_no == 3) {tx_delay_st[i]=i*10;}//ほぼ同時

				//遅延
				if(chgflag2 == 1){
					if(point_v > 0){tx_delay_st[i] +=1500;}
				}

				point_v *=-1;
			}

			//delay反転/現在必要では無い
			if (chgflag > 2) {
				tx_delay_st.reverse();
			}

			//OUT用並び順に重なりをそろえる
			for (var i=0; i < textlen; i++) {
				textChip[i].css({'zIndex':0});
			}

			//遅延はあったほうがよい
			setTimeout(function() {

				//IN
				if(inType){
					for (var i=0; i < textlen; i++) {
						//transition
						textChip[i].transition({delay:tx_delay_st[i]},1,function(){

							//出現順に上にする
							$(this).css({'zIndex':textlen+tx_sliceflag});

							$(this).transition({translate:[0,0],rotate:0,scale:[1,1],'opacity':1},tx_speed,"cubic-bezier(.855,.18,.725,1.65)",function(){

								var no=$(this).attr('no');//番号
								//並び順に修正これでもよいが
								//$(this).css({'zIndex':no});
								$(this).css({'zIndex':0});//こちら使用

								tx_sliceflag ++;
								//終了
								if(tx_sliceflag == textlen) {finsh_textAll();}
							});
						});
					}
				}
				//OUT
				if(!inType){
					for (var i=0; i < textlen; i++) {
						//transition
						textChip[i].transition({delay:tx_delay_st[i]},1,function(){

							var no=$(this).attr('no');//番号
							//出現順に上にする
							$(this).css({'zIndex':textlen+tx_sliceflag});

							$(this).transition({translate:[k_pos_X[no],k_pos_Y[no]],rotate:rotate_v,scale:[tx_scale_X,tx_scale_Y],'opacity':tx_alpha_no},tx_speed,"cubic-bezier(.3,-.585,.22,.865)",function(){

								var no=$(this).attr('no');//番号
								//並び順に修正これでもよいが
								//$(this).css({'zIndex':no});
								$(this).css({'zIndex':0});//こちら使用

								tx_sliceflag ++;
								//終了
								if(tx_sliceflag == textlen) {finsh_textAll();}
							});
						});
					}
				}

			},500);
		}

		//finsh
		function finsh_textAll(){

			//負荷軽減重要
			if(!inType){
				for (var i=0; i < textlen; i++) {
					textChip[i].css({translate:[0,0],scale:[0,0],rotate:0,'opacity':1});
				}
			}

			//遅延は重要
			setTimeout(function() {
				//ボタン
				$('#text-mass').text("ボタンを押してください");
				btnflag=true;
			},500);
		}

		//------------------------------------------------
		//HSL変換
		function hslToRgb(h,s,l){

			var r,g,b;
			if(s == 0){
				r=g=b=l;//achromatic
			}else{

				function hue2rgb(p, q, t){
					if(t<0) t +=1;
					if(t>1) t -=1;
					if(t<1/6) return p+(q-p)*6*t;
					if(t<1/2) return q;
					if(t<2/3) return p+(q-p)*(2/3-t)*6;
					return p;
				}

				var q=l < 0.5 ? l *(1+s):l+s-l*s;
				var p=2*l-q;
				r=hue2rgb(p,q,h+1/3);
				g=hue2rgb(p,q,h);
				b=hue2rgb(p,q,h-1/3);
			}

			return [Math.round(r*255),Math.round(g*255),Math.round(b*255)];
		}
		//------------------------------------------------
		//RGB数値を#000000形式に変換
		function getHexString(r,g,b) {
			var color="#"+("0"+parseInt(r).toString(16)).slice(-2)+("0"+parseInt(g).toString(16)).slice(-2)+("0"+parseInt(b).toString(16)).slice(-2);
			return color;
		}
		//------------------------------------------------

	});

})(jQuery);


jQuery-2.x系、および次期jQuery-2.x系、の場合はspan要素 slice_textクラスに position:relative を記載ください。
z-indexの変更が可能です。(position:relative の記載なしは反応しません)


/*text-anime*/
#textchip-wrap{
display:block;
width:640px;
height:200px;
margin:0;
padding:0;
text-align:center;
border:#CCCCCC 1px solid;
background-color:#FFFFFF;
overflow:hidden;
}

#anime-text{
position:relative;
top:90px;left:0px;
z-index:1;
}
.anime-block{
position:relative;
display:inline-block;
width:auto;
height:auto;
margin:0;
padding:0;
line-height:100%;
}
.slice_text{
position:relative;
display:inline-block;/*重要Firefox*/
font-size:50px;
font-weight:bold;
width:auto;
height:auto;
margin:0;
padding:0;
}

/*btn*/
.my-btn{
display:inline-block;
width:auto;
height:auto;
padding:5px 2px;
line-height:100%;
text-align:center;
font-weight:bold;
color:#FF0000;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
cursor:pointer;
}


 

簡単な説明


動作には、jquery.transit.jsが必要です。配布元は下記サイトです。

【参照 DL】ricostacruz.com : jQuery Transit


テキストアニメーションz-index処理の変更

テキストを重ねなければ余り気にかかることでは有りませんが.....
上記テストの如く、下図の様にテキストをつめて重ねた場合に、テキスト出現をdelayで処理しているために、重ね順がマチマチになり易いため、少々処理を変更してみます。delay直後にテキストのz-indexを一番上にします。


zu

 

1. 大きな文字の使用が多い。(重ねないと横幅が足りなく成り易い、FONTによっては字間を調整したい場合は多々あります)
2. 陰影処理、多色にすればバラバラな重ねが気にかかる。(delay処理の影響を旨く修正したい)
3. delay直後にテキストのz-indexを一番上にしたい。(アタマひねって方法を考えた)
4. 重ねていても綺麗なアニメーションにしたい。(色々な方法で試した結果は...)
5. このテストでは外側のDIVでマスク(overflow:hidden)しています。
(はみ出さないほうが軽くなる、時には「わざと」はみ出させる事もあるでしょう...)


 

delay直後に関数を実行したい

アニメーションで重なり順を綺麗にするには、delay直後にz-indexを一番上にしたいのだが、as3、CreateJS、では階層管理されているので簡単に変更できるが、javascriptでは自分で変えなければならない。

通常はdelay直後に関数を実行したいと思っても出来ない。コールバックはanimateの最後に実行するため利用できない。
但し、下記の様に、意味のないダミーのanimateを実行してdelay直後にコールバック出来ます。


1. 分割アニメは動く要素のz-indexを一番上にすると綺麗です。
(delayで出現タイミングが違うので通常のz-index操作では出来ないので少し工夫した)
2. delay直後のz-index変更が難しい。ダミーのanimate(又はtransition)を実行して解決。


INの処理例

簡単に言えば次の様に処理した。詳細は後に説明します。
見ての通り、delayのみ単独で実行直後にz-indexを変更して、次に通常のアニメーション(transition)を行う。
delayによっては重なりがバラバラですから、個々のアニメ終了で文字を整列しています。OUTも基本的に同じです。



//遅延はあったほうがよい
setTimeout(function() {

	//IN
	if(inType){
		for (var i=0; i < textlen; i++) {
			//transition
			textChip[i].transition({delay:tx_delay_st[i]},1,function(){

				//出現順に上にする
				$(this).css({'zIndex':textlen+tx_sliceflag});

				$(this).transition({translate:[0,0],rotate:0,scale:[1,1],'opacity':1},tx_speed,"イージング",function(){

					var no=$(this).attr('no');//番号
					//並び順に修正これでもよいが
					//$(this).css({'zIndex':no});
					$(this).css({'zIndex':0});//こちら使用

					tx_sliceflag ++;
					//終了
					if(tx_sliceflag == textlen) {finsh_textAll();}
				});
			});
		}
	}


},500);

ダミーのanimateを実行してdelay直後にz-index変更

● ダミーのanimateを実行してdelay直後にz-index変更をする。
つまり、変化の無いアニメを実行してコールバックを利用すれば出来る事になる。
(jqueryではアニメ時間は最低 1 のこと、0 ではエラーになる)



textChip[i]はテキストの入ったスパン要素オブジェクト

textChip[i].delay(時間).animate({'top':'+=0'},1,function(){
	$(this)..............
});

textChip[i].delay(時間).animate({'top':''},1,function(){
	$(this)..............
});

textChip[i].delay(時間).transition({},1,function(){
	$(this)..............
});

● queue()を騙して実行する方法もあるようです。2015/09/09 追記

【参考】github.comの記事: jQuery で5秒後とかに addClass したいとき

2種類の方法を、下記の様に実際に試してみましたが問題ないようです。



//1
textChip[i].delay(時間).queue(function(next){

	$(this).css({'zIndex':値});
	$(this).transition({....}..,function(){
		//
	});

	next();
});

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

//2
textChip[i].delay(時間).queue(function(){

	$(this).css({'zIndex':値});
	$(this).transition({....}..,function(){
		//
	});

	$(this).dequeue();
});

transit.jsではdelayのみ単独で実行出来る

transit.jsでは、下記の様に、delay のみ実行が可能で有る。実行直後コールバックを利用する。
(transit.jsではアニメ時間は 0 でもエラーになら無いが 1 にしておく)
無名関数内であり、$(this)で処理しなければならないので、スパン要素に番号をいれておく事にする。



textChip[i].transition({delay:時間},1,function(){
	$(this)..............
});

これは以前から判っていたが、z-index 操作が旨く行かなかったので「前ページ」のアニメ処理になった。


本来は下記の様に書くが、これではdelay直後の処理が出来ないからダメです。


textChip[i].transition({delay:時間,translate:[X配列[i],Y配列[i]],rotate:0,scale:[1,1],'opacity':1},tx_speed,"イージング",function(){
	//
});

● 事前にスパン番号を保存する。(必ず、オブジェクトを保存してから)



//オブジェクト保存
for (var i=0; i < textlen; i++) {

	textChip[i]=$("#slice-text"+i);//オブジェクト保存
	textChip[i].attr('no',i);//スパン番号取得用

	略す
}

それぞれのオブジェクトを配列に格納している事が多いので、スパン番号は必要である。
ループ処理なので、i 値を直接入れられないので、スパン番号で参照する事になる。


以下の様にスパンの番号を取得して利用する。(index番号を取得する方法もあるが、この方が簡単確実)


var no=$(this).attr('no');//番号

つまり、次の様になる。(いくらでもネスト出来る)

カスタムイージングを旨く利用すれば、効果的で処理も短く出来る。(transitionで細かく動かすにはコードが増えるだけ)



textChip[i].transition({delay:時間},1,function(){

	//delay直後のz-index処理
	$(this).css({'zIndex':値});

	//通常のtransition処理
	var no=$(this).attr('no');
	$(this).transition({translate:[X配列[no],Y配列[no]],rotate:0,scale:[1,1],'opacity':1},tx_speed,"イージング",function(){
		var no=$(this).attr('no');
		//次の処理
		$(this)......

	});
});

rotateX,rotateY,scaleX,scaleYでも配列なら手法は同じです。


indexを取得する方法 (参考)

利用していませんが.........
以下の様にすれば、取得できますが、面倒で有り時間もかかる。但し取得書式は沢山ある。(1.4以降)
指定セレクタの中で、現在のオブジェクトのindex番号を取得する。


var no=$('.slice_text').index(this);

//14番を白色にする
if(no == 14){
	$(this).css({'color':"#FFFFFF"});
}

セレクタを引数指定でindex番号を取得する。


同じ結果です
var no=$(this).index('.slice_text');


delay直後にz-indexを変更する処理の実際

z-indexを上にすれば文字の動きがわかり易いし綺麗で有る。
但し、出現順序が常に違うために、z-index値を加算しなければならない。
tx_sliceflagはループのカウント値で 0 1 2 3 ....と加算されるのでこれを利用した。(変数名は何でも良い)


1. 個々のdelay順に重なりz-indexを上にする。
2. 個々のアニメ終了時に元の重なり位置に戻す。
3. 必要があれば重なり順を規則正しく変える。


以下、私の処理例であり、より効率的な方法があるかは判らない。

複数のdelay値が同じ場合もあるので、若干見苦しい場合も発生するがほとんど判らない。一応実用に耐える。


delay直後、textlenに、0 1 2 3 ....と加算されるので、順次上に重なる。


//出現順に上にする
$(this).css({'zIndex':textlen+tx_sliceflag});

1 より textlen-1 まで z-index 空間がある。あとで利用できる。


全てのスパンが 0 なら下記でも良い。


事前処理
//並び順に重なりをそろえる、z-index 全て0
for (var i=0; i < textlen; i++) {
	textChip[i].css({'zIndex':0});
}

-------------------------------------------------
1 に、0 1 2 3 ....と加算

$(this).css({'zIndex':1+tx_sliceflag});

下記でも良いが、重なりが乱れる場合がある
$(this).css({'zIndex':tx_sliceflag});

全てのスパンが同じ z-index番号 ならば、スパンの構成順に重なる。


● 個々のアニメ(transition)が終了したら z-index を戻す。
2つの方法があるが、簡単な方法を取った。全てのスパン要素に 0 を設定すれば並べ順に成る。



面倒である

var no=$(this).attr('no');//番号
//並び順に修正これでもよいが
$(this).css({'zIndex':no});

-------------------------------------------------
こちら簡単

//こちら使用
$(this).css({'zIndex':0});

● 途中で文字を取り替える。
スパンに文字を入れてるだけの構造ですから、簡単に取り替え可能ですが、大きさが違うために文字列が左右に揺れて綺麗では有りませんのでお勧めは出来ません。(スパンは固定されていないので動く)
注意、文字の取り替えの場合は text() では無く、html() を使用して下さい。
但し文字色の変更は簡単です。空白つまり半角スペースは着色なりません。



分解文字を保存しておく
keepText[i]=tx;

文字を取り替える、画像でもOK
$(this).html('●');
$(this).html('<img src="/main/images/close32_alpha.png" />');

元の文字に戻す
var no=$(this).attr('no');//番号
$(this).html(keepText[$(this).attr('no')]);

一応画像は、 ボタン用の透過PNGですが...


● 文字色の変更、この辺が無難です。



$(this).css({'color':"#FFFFFF"});

まだカンバスの様に多彩なText処理は出来ない。現時点では、せいぜい色の変更か陰影を付けるだけである。


 

INの場合の例

INの場合の例で有るが、下記の様にしている
「並び順に重なりをそろえる」処理は必ずしも必要ではない。処理の状況による。



//OUT用並び順に重なりをそろえる
for (var i=0; i < textlen; i++) {
	textChip[i].css({'zIndex':0});
}

//遅延はあったほうがよい
setTimeout(function() {

	//IN
	if(inType){
		for (var i=0; i < textlen; i++) {
			//transition
			textChip[i].transition({delay:tx_delay_st[i]},1,function(){

				//出現順に上にする
				$(this).css({'zIndex':textlen+tx_sliceflag});

				$(this).transition({translate:[0,0],rotate:0,scale:[1,1],'opacity':1},tx_speed,"イージング",function(){

					var no=$(this).attr('no');//番号
					//並び順に修正これでもよいが
					//$(this).css({'zIndex':no});
					$(this).css({'zIndex':0});//こちら使用

					tx_sliceflag ++;
					//終了
					if(tx_sliceflag == textlen) {finsh_textAll();}
				});
			});
		}
	}


},500);

 

イージングの活用

transitionを変更して繋いでゆけば、色々なアニメーション(transition)が可能ですが、簡単にはカスタムイージングを使用すれば以外と効率的になる。複雑なイージングは出来ませんが、それなりの効果はあります。

● Easingの追加

「3次ベジェ曲線」で指定しますから簡単に追加はできますが、作る波形が限られます。
「3次ベジェ曲線」は下記のジェネレーターで作れます。カスタムも作れますのでこちらを利用したほうが良い。

【参考】ジェネレーター: CSS EASING ANIMATION TOOL


仮に下記の様な線形を得られたとすれば、カスタムEasingとして使用できます。

keaseing

out
cubic-bezier(.855,.18,.725,1.65)
in
cubic-bezier(.3,-.585,.22,.865)

直接使う
$('#XXXXXX').transition({...},800,"cubic-bezier(.855,.18,.725,1.65)",function(){
	//
});

その場で transition.js に追加して使う
$.cssEase.bounceOut='cubic-bezier(0.855,0.18,0.725,1.65)';
$('#XXXXXX').transition({...},800,"bounceOut",function(){
	//
});

● デモでは実際にEasingを追加して実行しています。


$(this).transition({....},時間,"cubic-bezier(.855,.18,.725,1.65)",function(){
	//
});

テキストの、左、中央、右、の配置

テキストの配置はベースDIVの text-align で行ってください。尚、マスクのために overflow:hidden になっています。
左配置の場合、P要素でテキスト位置を設定ください。

テキストの文字数が多いと、カラム落ちしますのでフォントサイズを小さくするなりの処置します。
(Firefoxは文字の大きさが若干大きく表示されますので注意)


left center rightで設定する

#textchip-wrap{
text-align:center;
overflow:hidden;
}

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

leftの値で位置をきめる、topは自由

#anime-text{
position:relative;
top:90px;left:0px;
}

 

INの場合のsetTimeout事前処理

INの場合に事前にレーヤーに描画されます。拡大され透明度0で欄外に有る場合少々負荷がかかると同時に、描画に時間を要します。(INの場合アニメ事前のz-index変更はいりません)
よって、setTimeout()で遅延させています。DIVでマスクされている場合は描画されませんので負荷は減ります。


ループで複数の文字が一気にレーヤーに描画される。(デモでは、ほとんどが透明度0になっている)
デモでは8倍にも拡大している場合も有りレーヤー描画に時間がかかるので、setTimeout()で調整する理由。その時の状況で判断して適切に処理します。



//CSS設定
if(inType){
	//CSS移動時間がかかる
	textChip[i].css({translate:[k_pos_X[i],k_pos_Y[i]],rotate:rotate_v,scale:[tx_scale_X,tx_scale_Y],'opacity':tx_alpha_no});//左右OK
}

OUTの場合の事後処理

OUTの場合の事後処理をきちっとしないと重くなる。
ほとんどが、透明度0で欄外に移動しますので、レーヤー描画に負荷がかかりますので、見えないものはスケール0にして負荷を軽減する。(必要でないものは何らかの処理することが重要)

通常レーヤーは1番上に描画されるので、欄外に移動させれば他のリンクの邪魔をしたりしますので、状況に応じて対応します。



//finsh
function finsh_textAll(){

	//負荷軽減重要
	if(!inType){
		for (var i=0; i < textlen; i++) {
			textChip[i].css({translate:[0,0],scale:[0,0],rotate:0,'opacity':1});
		}
	}

	略す

}

● 再度使用しない場合は削除するのが懸命です。(デモでは再利用している)
全て削除するとスパンと文字がなくなりますので、再度利用する場合は全て作り直しに成ります。



anime_textはP要素の保存オブジェクトです

htmlで挿入しているので、次でクリアできる
anime_text.html("");

P要素の中を削除する
anime_text.empty();

 

個々のアニメ終了後に重なり順を変更

余り必要のないことですが、
アニメの直前に重なり順を変更しているので、見易いように戻さねばならない。
全て終了してからの変更もできるが、時間差があるので、その都度変更したほうが綺麗である。


単色の場合は余り重ね順がわかりませんが.....

zu

 

スパン要素の並び順、通常の重なりにするなら簡単で有る。


通常右が高い、z-index 全て0
$(this).css({'zIndex':0});

または、z-index 0 1 2 3....
var no=$(this).attr('no');//番号
$(this).css({'zIndex':no});

それ以外ならば、下記の様にすれば出来る。 計算値、sh は事前に計算している。sh=textlen-1 である。


最初の z-index ははなれている
$(this).css({'zIndex':textlen+tx_sliceflag});

反対並びに 逆に右が低い
var no=$(this).attr('no');//番号
$(this).css({'zIndex':textlen-no});
------------------------------------------------

中が低い
var sh=textlen-1;

var no=$(this).attr('no');//番号
var cno=Math.floor(Math.abs(no-sh/2));//中が低い
$(this).css({'zIndex':cno});

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

中が高い
var no=$(this).attr('no');//番号
var cno=Math.floor(textlen-Math.abs(no-sh/2));//中が高い
$(this).css({'zIndex':cno});

最後に
文字の重ねでマージン設定の場合、全文字幅(P要素)取得が正確でないために、1-2ピクセル狂う場所があります。見た目では判らないので気がつく人はいないでショウ。



 

transit.jsに付いては下記ページの記事を参照ください。

【参照】当方の記事: jQuery transit.jsの使用方法を調べてみました

アニメーション前に一括にz-indexを設定する方法のもの、このページのものより劣る。

【参照】当方の記事: jQuery CSS3 transit.js使用のテキスト分割アニメーション

キャンバス描画、CreateJSで作った「テキストアニメーション」です。(HTML5用)

【参照】当方の記事: CreateJS テキストアニメーション ランダム設定のテスト レインボー色(虹色)


 

ナントカナルモノダ、以上です。

 


[ この記事のURL ]


タグ:css3 , Transition , jquery

 

ブログ記事一覧



[1]