SOFTELメモ

</> 技術者募集

【jQuery】拡大・縮小のアニメーションをする例

問題

jQueryプラグインとか無しで、拡大・縮小できる?

resize

答え

拡大・縮小します。jQueryプラグイン無しで、拡大・縮小します!

kappenguin

jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。

それならば、ほぼ表示に影響しないプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して拡大・縮小などのプロパティの指定に使ってはどうかというアイデアで作ってみました。

前回、回転でz-indexを使いました。違う例をやってみたいので、今回は、拡大・縮小時ならほぼ気づかれない、paddding-rightを利用してみます(もちろんz-indexでもよいです)。

//ここでは表示上ほぼ気づかれないpadding-rightをアニメーションさせます
$('#sample20130315').animate({paddingRight:1},{
	//1秒かけてアニメーション
	duration:1000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//nowに現在のpadding-rightの値が渡してもらえる
		//0から1に向かって変化していくnowを利用してscaleさせてみる
		$(this).css({transform:'scale(' + now  + ')'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130315').css('paddingRight', 0);
	}
})

ちょっと拡大・縮小してみたいだけのときに使えると思います。

おまけ

scaleで、0から1.0に向かって変化する値をそのまま利用すると、単純に小さいのが大きくなるだけですが、

0から1.0に向かって変化する値を、何らかの加工をしてから使えば、もっと楽しい拡大・縮小が可能です。

kappenguin kappenguin kappenguin

$('#sample20130315a').animate({paddingRight:1},{
	//2秒かけてアニメーション
	duration:2000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//0から1に向かって変化していくnowを利用してscaleさせてみる
		$(this).css({transform:'scale(' + (1 + Math.sin(now * 4 * Math.PI) / 2)  + ')'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130315a').css('paddingRight', 0);
	}
})

ちなみに、1 + Math.sin(now * 4 * Math.PI) / 2 とは、以下のような変化です。

1(原寸大)を中心に、増減(拡大、縮小)する変化です。

scale-sin

関連するメモ

コメント(4)

bob 2015年4月8日 21:49

はじめまして。
一つ質問なのですが、「拡大・縮小させる」ボタンをクリックせずに拡大・縮小することは可能でしょうか?
よろしくお願いします。

yoshimura 2015年4月14日 16:13

何をトリガーとするかの問題でしょうか。
$(‘.hoge’).on(‘click’, function(){}); ではなくて、
画面のonloadなど他のイベントをトリガーにしたらよいと思います。

jon 2015年4月14日 19:14

はじめまして。
こちらのソースをie7やie8でも問題なく動作させる方法、又は代替の方法はありますでしょうか?

yoshimura 2015年4月17日 11:17

CSS3のtransformに対応していないブラウザでは、JavaScriptとしては問題なく動作しているものの、見た目には何も起きていないように見えるかもしれません。
ie7,ie8が対応している拡大・縮小の方法を使って作ることになるかと思います。