CSS3 と JavaScript で手裏剣を作る

Category : CSS, JavaScript, jQuery

少し前に jsdo.it で手裏剣を作って遊んでたんですが、そのときのメモです。
最終的には全然違うものになってしまいましたが、色々と学べたので良しとしますw

とりあず最終的に出来上がったものをどうぞ。webkit ブラウザなら大丈夫だと思いますが、一応 Safari で見ることをお勧めします。

CSS3 と JavaScript で八方手裏剣

デモファイルをダウンロード

手裏剣はキャッチできますよ。

最初は要素を無限に回転させたかった

CSS3 の transformrotate() を使って止まることなく回転させようと思って作ったものです。
角度が360度以内なら角度を1度ずつ足し続けて、360度になったら角度を0に戻すという処理です。

これを作ったあとに @GeckoTang さんがフォークしてくれました。

そうでした、角度は360度以内じゃなきゃいけないなんてことはなかったんですw
他には JS 部分が with(){...} を使って、まとめられています。

せっかくなので手裏剣にしてみた

ここでは、回転させる要素を手裏剣にして、回転させる部分を関数化してみました。
対象要素・回転方向・スピードを指定することができます。
おまけで CSS アニメーションバージョンがついています。

手裏剣の作り方は CSS 部分を読んでもらえると分かるかと思います。

これは上記を更にフォークしてもらったもの。
CSS3 の transitionwebkitTransitionEnd イベントを使って無限に回転させるものが追加されています。
また、最後に 3D Transform を使って奥行きのある動きのものも追加されています。

以上を踏まえて作ったもの

出来上がったものはデモページをご覧ください。

CSS3 と JavaScript で八方手裏剣

簡単に説明すると、通常状態、セットされた状態、飛んでいる最中にクラス名を振って、それぞれに CSS で指定をしています。
1回クリックすると、セット状態のクラスを追加。
2回目で投げる(CSS アニメショーン)。
3回目で初期状態に(その前にちょろっとお遊びを入れてますがw)。

JavaScript 部分は以下のようになります。
CSS などはデモページで見るかダウンロードしてご確認ください。

var $elm = $('#shuriken');

/* クリックしたときにクラス名を変更していく */
$elm.toggle(
        function() {
            $(this).addClass('set');
        },
        function() {
            $(this).removeClass('set').addClass('throw');
        },
        function() {
            // クラス名 return がある場合にはキャッチしたと表示
            if($(this).hasClass('return')) {
                $(this).hide().removeClass('throw return');
                $('#catched').show().delay(2000).fadeOut(function() {
                    $elm.fadeIn('fast');
                });
            }
            // ない場合は奥に向かって飛んでいる状態なのでそのまま初期に戻す
            else {
                $(this).removeClass('throw');
            }
        })

    // アニメーションが始まったときの処理
    .bind('webkitAnimationStart', function() {
        // 1.5秒したら return というクラス名を付ける
        // 1.5秒は CSS アニメーションから算出 scale(0) になるタイミング
        // throw というクラス名がない場合は初期に戻されているので何もしない
        setTimeout(function() {
            if($elm.hasClass('throw')) {
                $elm.addClass('return');
            }
        }, 1500);
    })

    // アニメーションが終了したときの処理
    // 終了=キャッチされなかった なので、#killed を表示したあと、初期状態に
    .bind('webkitAnimationEnd', function() {
        $(this).hide().removeClass('throw return');
        $('#killed').show().delay(2000).fadeOut(function() {
            $elm.fadeIn('fast');
        });
    });

本当は jQuery なしで作ろうとしたんですが、だんだん面倒くさくなってきたので……。
JS 部分だけ見るとそんなに難しいことはしてません。
一番大変だったのは CSS アニメーションです。
特に 3D Transform は大変です。

練習のつもりで作ってみましたが、思いもかけず色々と勉強になりました。
フォークしたりされたりの楽しさを初めて実感したような気もします。

Leave a Reply