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)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
