jRumbleã¨ã„ã†jQueryプラグインを使用ã—ã¦ã€ç”»åƒã‚„æ–‡å—ãªã©ã‚’ガクガクブルブル震ãˆã‚‹å‹•ä½œã‚’è¡Œã†ã“ã¨ãŒã§ãã¾ã™ã€‚
è¨å®šæ–¹æ³•ã‚‚ã¨ã¦ã‚‚ç°¡å˜ã§ã™ãã«å‡ºæ¥ã‚‹ãŸã‚ã€èˆˆå‘³ãŒã‚ã‚Œã°è©¦ã—ã¦ã¿ã¦ãã ã•ã„。
仕組ã¿ã‚‚シンプルã§ã€JavaScriptã§ãƒ©ãƒ³ãƒ€ãƒ ãªä½ç½®æ•°ã‚’生æˆã—ã¦ã€ãれをCSSã®topã‚„leftã«é©ç”¨ã—ã¦ç§»å‹•ã•ã›ã‚‹ã¨ã„ã†å‡¦ç†ã‚’setIntervalを使ã£ã¦é€£ç¶šã§è¡Œã£ã¦ã„ã¾ã™ã€‚
jRumbleã®ã‚µã‚¤ãƒˆã®ã€ŒDownloadã€ã‚’クリックã—ã¦ãƒ•ã‚¡ã‚¤ãƒ«ã‚’å–å¾—ã—ã¾ã™ã€‚
解å‡ã™ã‚‹ã¨ã€ã€Œjquery.jrumble.1.3.jsã€ã¨ã€Œdemoã€ãŒã‚ã‚Šã¾ã™ã€‚
ç´°ã‹ã„è¨å®šã¯ã€demo内ã®index.htmlã‚’ã”覧ãã ã•ã„。
一通りè¨å®šå†…容ã«ã¤ã„ã¦è¨˜è¼‰ã•ã‚Œã¦ã„ã¾ã™ã€‚
上記ã®ã‚ˆã†ã«ã™ã‚‹ãŸã‚ã«ã¯ä»¥ä¸‹ã®ã‚ˆã†ã«è¨å®šã—ã¾ã™ã€‚
一番シンプルãªæ–¹æ³•ã‚’紹介ã—ã¦ã„ã¾ã™ã€‚
ã¾ãšã€jQueryã¨jquery.jrumble.1.3.jsã‚’èªè¾¼ã¿ã¾ã™ã€‚
<script type="text/javascript" src="js/https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>
以下ã®ã‚ˆã†ã«JavaScriptを記述ã—ã¾ã™ã€‚
今回ã¯#demo1ã¨ã„ã†IDã«å¯¾ã—ã¦è¨å®šã—ã¾ã™ã€‚
$('#demo1').jrumble();
$('#demo1').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});
HTMLを記述ã—ã¾ã™ã€‚
<div id="demo1" style="padding:20px;background-color:#00FFFF;">ã“ã“ãŒéœ‡ãˆã¾ã™ã€‚</div>
ãŸã£ãŸã“ã‚Œã ã‘ãªã‚“ã§ã™!