SQLの窓

2014年03月17日


jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )



jQuery の回転アニメーション ができるのですから、このような事は簡単にできます。

ただ、これをいかにコンテンツに応用するかが問題ですね。このようなエフェクトを使って、誰かが将来いろいろなパターンを作成してくれる事だと思います






<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	miscAnimate: function(deg, duration, easing){
		var target = this;
		$({kakudo: 0, kado: 0, shadow: 0}).animate(
			{kakudo: 360, kado: 30, shadow: 40},
			{
				duration: 3000,
				easing: "swing",
				step: function(now,tween) {
					if ( tween.prop == 'kakudo' ) {
						target.css({
							transform: 'skew(' + now + 'deg) rotate(' + now + 'deg)'
						})
					}
					if ( tween.prop == 'kado' ) {
						target.css({
							borderRadius: now + 'px'
						})
					}
					if ( tween.prop == 'shadow' ) {
						target.css({
							boxShadow: now + 'px '+ now +'px '+ now + 'px '+ now + 'px rgba(0, 0, 0, 0.5)'
						})
					}
				}
			}
		);
	}  
});

</script>

<input type="button" value="開始" onclick='$("#target").miscAnimate();'>
<br><br><br>

<div id="target" style='margin-left:100px;margin-top:100px;width:100px;height:100px;border:1px solid #000;'></div>

step の第二引数の tween は、こういう時に使うものだったのがやっと解りました。ちょっと仕様として不思議なのが、step 内の this は、tween と似たような元々のプロパティの増分がセットされているオブジェクトだったのですが、tween があるのだから、this は 元々のオブジェクトのほうがいいはずです。将来仕様変更あるかもしれませんね。

関連する記事


【プラグイン作成(jQuery)の最新記事】
posted by lightbox at 2014-03-17 17:22 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり