2015.1.19

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

aaa

 

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

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

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

ではどうぞ!

 

回り続けるウサギ

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

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

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を使った簡単にウサギちゃんを動かす方法でした!

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

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

 

参考サイト

http://uzmk.jp/blog/tips/entry-229.html
http://jquery.kachibito.net/others/jrumble.html

 

この記事を書いた人

赤崎 大樹

デザイナー

赤崎 大樹