株式会社コプロシステム

お問い合わせ

2015年6月 9日

【jQueryアニメーション】イラストの卵を一定間隔でゆらゆら揺らしてクリックでひよこ登場！！

  • このエントリーをはてなブックマークに追加

こんにちは、UXデザインの松山です。梅雨入りでジメジメしてキノコが生えそうですね。
ちなみに、キノコの中では「なめこ」が一番好きです。

jQueryのプラグイン「jQueryRotate」を使って卵をゆらゆらアニメーションさせる方法を説明します。
WEBサイトで卵を揺らすという機会はほとんどないと思いますが、覚えておけば何かの役に立つ時が来るはずです。
現在、WEBで簡単なアニメーションというとCSS3が主流だと思いますが、今回はjQueryでの実装方法をご説明します。

今回作成したサンプルはこちら

今回の内容

  1. 一定間隔で複数の卵を別々にアニメーション
  2. クリックすると卵が割れてひよこ登場
  3. 卵が割れるときにバリっ！と効果音を再生

準備するもの

  1. アニメーションさせる卵の画像
  2. クリックした後の卵が割れた画像
  3. 卵が割れた時の効果音mp3形式とwav形式

割れた卵の中身に使用しているイラストは下記サイトからダウンロードしました。すごくかわいいイラストです。
無料イラスト かわいいフリー素材集 | いらすとや

卵の割れる効果音は下記サイトの素材を使用しました。
soundoffice.com

素晴らしい素材のご提供ありがとうございます。

jQueryで卵をゆらゆらアニメーションさせるコードを実装してみよう

1.まずはJQueryRotateをダウンロードしよう

下記のサイトからプラグインをダウンロードします。
http://beneposto.pl/jqueryrotate/
ダウンロードしたらjsフォルダなどに保存してjQueryと一緒に読み込みます。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>

本来JQueryRotateは、画像をくるくるアニメーションさせるためのプラグインですが、左右の方向に傾ける動きを繰り返すことによりゆらゆらと揺れを表現しています。

2.HTMLについて

audioタグは卵をクリックした時に、効果音を再生するために読み込むタグです。jQueryでクリック時に再生します。mp3とwavの2種類のファイルを読み込んでいる理由は、IEはwav形式を再生できないからです。

div class="clicking" のrel属性にクリックURLを書いていますが、これはクリック後に画像を書き換えるための記述です。jQueryで画像のsrcを直接書き換える方法もあるので、やりやすい方法で調整して下さい。


<audio id="sound-file" preload="auto">
<source src="se-060.mp3" type="audio/mp3"><!--IE用の効果音ファイル-->
<source src="se-060.wav" type="audio/wav">
</audio>

<ul id="egg" class="clearfix">
<li><div class="clicking" rel="img_egg00_ov.png"><span class="swing1"><img src="img_egg00.png" width="396" height="325" alt=""></span></div></li>
<li><div class="clicking" rel="img_egg01_ov.png"><span class="swing2"><img src="img_egg00.png" width="396" height="325" alt=""></span></div></li>
</ul>

3.CSSについて

:before, :after擬似要素を使い、吹き出しの画像や卵の影を設定しています。
影があると奥行きが出てそれっぽくなります。

:before, :after擬似要素については下記のサイトが参考になります。
かなり便利ですので覚えて損はありません。
[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

また、CSSのtransform-originで卵の回転する軸を下部に調整します。
この調整をしないと画像の中心を軸に揺れるので、卵が違和感のある揺れになってしまいます。


body{
    background-color:#1ebaba;
    background:url(bg.png);
}
#egg{
    width: 792px;
    text-align: center;
    margin: 0 auto;
    margin-top: 15%;
    display:block;
}
#egg li{
    display: block;
    float:left;
}
#egg li span{
    cursor:pointer;
    display:block;
    -moz-transform-origin: 50% 80% !important;
    -webkit-transform-origin: 50% 80% !important;
    -ms-transform-origin: 50% 80% !important;
    -o-transform-origin:50% 80% !important;
    transform-origin: 50% 80% !important;
}
#egg li div.clicked span{
    cursor: default;
}
#egg li div:before{
    content: url(img_click.png);
    position: relative;
    bottom: 20px;
    left: 0px;
    opacity:0.9;
}
#egg li div.clicked:before{
    content: url(img_clicked.png);
}
#egg li:after{
    content: url(bg_egg_shadow.png);
    position: relative;
    bottom: 65px;
    left: 0px;
    z-index: -1;
}

4.jQueryRotateのコードを設定

まずはゆらゆらアニメーションさせるコードをご覧ください。
コメントを入れてあるので分かりやすいとは思いますが、後ほど解説します。


$(document).ready(function () {
var swing1 = ".swing1"; //アニメーションさせるクラス1つ目
var swing2 = ".swing2"; //アニメーションさせるクラス2つ目

    var anime1_00 = function (){ //1つ目
         $(swing1).rotate({
                duration:3000,  //速度 3秒
                animateTo: 0.1, //傾きの角度（0だと動かないので）
                callback: anime1_01   //次のアニメへ
         });
    }
    var anime1_01 = function (){$(swing1).rotate({duration:100,animateTo: 8,callback: anime1_02});}　 //0.1秒で右に8度傾ける
    var anime1_02 = function (){$(swing1).rotate({duration:100,animateTo: -8,callback: anime1_03});}　//0.1秒で左に8度傾ける
    var anime1_03 = function (){$(swing1).rotate({duration:100,animateTo: 8,callback: anime1_04});}　 //0.1秒で右に8度傾ける
    var anime1_04 = function (){$(swing1).rotate({duration:100,animateTo: -8,callback: anime1_05});}  //0.1秒で右に8度傾ける
    var anime1_05 = function (){$(swing1).rotate({duration:100,animateTo: 0,callback: anime1_00});}   //0.1秒で元の位置に戻す
    anime1_00();    //繰り返し
    
    var anime2_00 = function (){ //2つ目
         $(swing2).rotate({
                duration:5000,　//速度 5秒
                animateTo: 0.1, //傾きの角度（0だと動かないので）
                callback: anime2_01   //次のアニメへ
         });
    }
    var anime2_01 = function (){$(swing2).rotate({duration:150,animateTo: 10,callback: anime2_02});}  //0.15秒で右に10度傾ける
    var anime2_02 = function (){$(swing2).rotate({duration:150,animateTo: -10,callback: anime2_03});} //0.15秒で左に10度傾ける
    var anime2_03 = function (){$(swing2).rotate({duration:150,animateTo: 10,callback: anime2_04});}  //0.15秒で右に10度傾ける
    var anime2_04 = function (){$(swing2).rotate({duration:150,animateTo: -10,callback: anime2_05});} //0.15秒で左に10度傾ける
    var anime2_05 = function (){$(swing2).rotate({duration:150,animateTo: 0,callback: anime2_00});}   //0.15秒で元の位置に戻す
    anime2_00();    //繰り返し    
    
});

$('#egg li div.clicking').one({
    'click touchstart':function(){　//卵をクリック
          $("span",this).rotate({　 //動作中の傾きをリセット
                duration:0,
                animateTo:0,
      });
      $("#sound-file").get(0).play();　//効果音の再生
      $("span",this).removeClass();
   　 $(this).removeClass("clicking");　//クリック後のクラスの付け方
         $(this).addClass("clicked");
        var ImgSrc = $(this).attr("rel");　//割れた画像への差し替え
        $("img",this).attr({src:ImgSrc});
        $("img",this).stop().hide();
        $("img",this).stop().fadeIn(200);
        return false;   
    }
});

5.揺れるアニメーションの設定

揺らしたい要素につけるクラスを設定します。
次にアニメーションを順番に設定していきます。
1つ目の卵と2つ目の卵はそれぞれ傾き角度やスピードを調整して動きに変化をつけています。


var swing1 = ".swing1"; //アニメーションさせるクラス1つ目
var swing2 = ".swing2"; //アニメーションさせるクラス2つ目

    var anime1_00 = function (){ //1つ目
         $(swing1).rotate({
                duration:3000,  //速度 3秒
                animateTo: 0.1, //傾きの角度（0だと動かないので）
                callback: anime1_01   //次のアニメへ
         });
    }
    var anime1_01 = function (){$(swing1).rotate({duration:100,animateTo: 8,callback: anime1_02});}　 //0.1秒で右に8度傾ける
    var anime1_02 = function (){$(swing1).rotate({duration:100,animateTo: -8,callback: anime1_03});}　//0.1秒で左に8度傾ける
    var anime1_03 = function (){$(swing1).rotate({duration:100,animateTo: 8,callback: anime1_04});}　 //0.1秒で右に8度傾ける
    var anime1_04 = function (){$(swing1).rotate({duration:100,animateTo: -8,callback: anime1_05});}  //0.1秒で右に8度傾ける
    var anime1_05 = function (){$(swing1).rotate({duration:100,animateTo: 0,callback: anime1_00});}   //0.1秒で元の位置に戻す
    anime1_00();    //繰り返し

6.クリックで卵を割れた画像に差し替えて効果音を再生

クリックした時の設定です。
まず、卵が揺れている途中でクリックしても元の真っ直ぐな状態に戻すように設定。
次に効果音を再生します。
最後にフェードで画像を差し替えて割れた画像を表示します。


$('#egg li div.clicking').one({
    'click touchstart':function(){　//卵をクリック
    	  $("span",this).rotate({　 //動作中の傾きをリセット
				duration:0,
                animateTo:0,
      });
	  $("#sound-file").get(0).play();　//効果音の再生
	  $("span",this).removeClass();
   　 $(this).removeClass("clicking");　//クリック後のクラスの付け方
   	  $(this).addClass("clicked");
		var ImgSrc = $(this).attr("rel");　//割れた画像への差し替え
		$("img",this).attr({src:ImgSrc});
		$("img",this).stop().hide();
		$("img",this).stop().fadeIn(200);
		return false;   
    }
});

ゆらゆら揺らすアニメーションコードのポイント

  • ・画像の回転軸をCSSで調整する（important!をつける）
  • ・卵の割れる前と割れた後の画像は大きさを同じにする
  • ・効果音をつけるとリアルに表現できる

ゆらゆら揺らすアニメーションコードのまとめ

WEBで卵を揺らすなんて今までやった事がなかったのですが、意外と上手く揺れを表現できたかと思います。
CSS3を使えば結構簡単にできますが、IE9などの対応を要求された時には、この方法が便利です。
今回は卵でしたが、応用すればいろんなものをゆらゆら揺らせるので、ぜひ皆さんも挑戦してみて下さい。前回の「ストリートビューの道案内」の時よりコードも短く簡単に実装できると思います。

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか？

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050（代表）

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください！

株式会社コプロシステム
PAGE TOP