【jQuery】簡単に震える、回る、画像を作ってみる。

大阪・京都を中心に関西の大学生が集まる有給／長期インターン - 未来電子テクノロジー > スタッフブログ > クリエイティブ情報 > 【jQuery】簡単に震える、回る、画像を作ってみる。

2015.1.19

クリエイティブ情報,スタッフブログ

【jQuery】簡単に震える、回る、画像を作ってみる。

デザイナーインターン

赤崎大樹

aaa

こんにちはデザイナーのひろきちです！

今日はリッチな動きをjqueryを使って簡単に設置できる方法を紹介します！

そこで今回は海ちゃんブログによく出てくるウサギちゃんを勝手にモデルにしてみました。

ではどうぞ！

回り続けるウサギ

まずこちらでjQueryRotate.jsをダウンロード。

こちらは設置するだけで大丈夫です。

HTML
HTML
- 参考サイト

HTML

<!DOCTYPE html>
<html lang="ja">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript">
$(function(){
     //回し続ける
    var angle = 0;
    setInterval(function(){
                angle+=3;
             $("#usagi img").rotate(angle);
    },10);//
     
});
</script>

<head>
<meta charset="utf-8">
<title>DEMO</title>
<link href="style.css" rel="stylesheet" media="all">
<link href="default.css" rel="stylesheet" media="all">
</head>
 
<body>
 
  <div id="wrap">
 
    <div id="usagi">
      <img src="img/usagi.png" >
    </div>
 
 
  </div>
 
</body>
</html>

これでOK!

head内にあるスクリプト部分を書き換えてあげれば様々なバリエーションの動きもできます！

    //回して止めてを繰り返してみる
          var s03 = function (){
               $("#usagi02 img").rotate({
                      angle: 0, 
                      animateTo: 360, 
                      callback: s03
               });
          }
          s03();
      });
     

     //高速回転
    var angle = 0;
    setInterval(function(){
                angle+=10;
             $("#usagi03 img").rotate(angle);
    },10);//

回る可愛いウサギちゃんたち｜DEMO

マウスオーバーで震えるウサギ

こちらもまずこちらでjquery.jrumble.1.3.jsをダウンロード。

編集なしで設置でOK。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>
<script type="text/javascript">
$(function() {
    $('#usagi img').jrumble({
        x: 2,
        y: 2,
        rotation: 1
    });
    $('#usagi img').hover(function(){
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    });
});
</script>

<meta charset="utf-8">
<title>DEMO</title>
<link href="style.css" rel="stylesheet" media="all">
<link href="default.css" rel="stylesheet" media="all">
</head>
 
<body>
 
  <div id="wrap">
 
    <div id="usagi">
      <img src="img/usagi.png" >
    </div>

  </div>
 
</body>
</html>

こちらもhead内の数値を書き換えると、震える激しさを変更できます！

$(function() {
    $('#usagi02 img').jrumble({
        x: 15,
        y: 13,
        rotation: 4
    });
    $('#usagi02 img').hover(function(){
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    });


    $('#usagi03 img').jrumble({
        x: 100,
        y: 100,
        rotation: 4
    });
    $('#usagi03 img').hover(function(){
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    });
});

震える可愛いウサギちゃんたち｜DEMO

以上！jqueryを使った簡単にウサギちゃんを動かす方法でした！

又、機会があればウサギちゃんを使った何かをしていきます！！

海ちゃん勝手に使ってごめんね笑