LABO IWASAKI

Javascript animate

Animation

やっぱりアニメーションしたい時がある。
toggleとかでも出来るけどアニメーションしたい。
単純に動かすだけとか、Memuに一味加えたいとか。

思ったより簡単にできます。(demoあり)
はじめてアニメーション出来た時は嬉しかった。
だんだん使わなくなるけどねー。

基本的な部分

Basic Writing

本当に簡単です。
でもJqueryの本体は読み込んでおく必要があります。

$(function() {
         $('.ClassName').animate({ 'left': '15%' },5000);
});

簡単に書くとこんな感じになります。
「ClassName」というクラス要素を「left」から「15%」の距離まで「5000ミリ秒」かけて移動
という内容になっています。
もちろんピクセルで指定もできます。

だんだん消えていく感じにするには「opacity」を指定すれば可能。

$(function() {
         $('.ClassName').animate({ 'opacity': '0' },2000);
});

応用する

Application

あとは応用するだけです。
連続でいくつかの動作をしたい場合は次のように書きます。

$('.ClassName').animate({ 'right': '15%', 'top': '15%' },1000)
               .animate({ 'right': '25%', 'top': '5%' },1000)
               .animate({ 'right': '15%', 'top': '15%' },600)

同時に動かしたい時は続けて書きます。
上下左右だけじゃなくて、斜めに動かしたい時ですね。

$('.ClassName') .animate({ 'width': '45%', 'right': '-15%', 'top': '-15%' },5000);

例えばこの場合、大きさが45%のサイズに変化しながら、右斜め上に動きます。

クリックして動かす

Click to Move

任意の要素をクリックした時に動かしたい時はこうします。
あとは組み合わせなので色々な書き方があると思いますが、簡単なものを書いておきます。
 下の月をクリックすると動きます。

$('.moon').click(function(){
      $('.moon').animate({'left': '80%', 'top':'0'},3000); 
      $('.moonback').animate({'opacity':'0'},2800)
                    .animate({'opacity':'1'},200); 
});
$('.moonback').click(function(){
      $('.moon').animate({'opacity':'0'},2000)
                .animate({'left': '10%', 'top':'250px','opacity':'0'})
                .animate({'left': '10%', 'top':'200px','opacity':'1'},1000); 
      $('.moonback').animate({'opacity':'0'},1000);
});
moon

元の位置へ

ページ遷移直後

Open Page

クリックじゃなくて、ページを開いた時に発動させるには…

window.onload = function() {
      ここに処理を書く
}

こっちでも同じくページ表示時に即発火

(function() {
	ここに処理
}());

使い方次第で色々リッチな事も出来そうですね。