マウスストーカー１３-１■画像■　+CSS のふわふわマウス

●2016/09/22：即時関数で囲んで、グローバル変数を消しました。

■画像１個のマウスストーカーのJavaScriptはこちら→　マウスストーカー１■画像■画像１個で１個

上記のマウスストーカーのJavaScriptを改造しました。
CSS の「animation」を追加することで、マウスに追随する画像がふわふわと揺れるマウスストーカーです。
CSSを使った指定方法は、mCPブログの「基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編」から。

■このふわふわだけを利用したJavaScriptはこちら→　ふわふわ４■CSSふわふわ天使

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>マウスストーカー１３-１■画像■　+CSS のふわふわマウス</title>

<!--★コピーここから-->
<style type="text/css"><!--
body{background:#bdf;}/*★背景色指定。水色。不要なら削除*/

/*★★必須。マウスストーカーのふわふわの動きの指定。名前はhuwa。お好みで変更可*/
@keyframes huwa {
    0%{transform: translate(0px, 0px);}
    25% {transform: translate(-10px, 5px);}
    50%{transform: translate(-20px, 0px);}
    75% {transform: translate(-5px, -5px);}
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================================
画像１個のふわふわマウスストーカー　参考サイト : http://www5e.biglobe.ne.jp/~purest/javascript/index.html
★古いブラウザ対応分削除し、CSSのanimation追加で、ふわふわに改造。　 2016/09/22
=============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var mga="gh6.png"; //★画像指定
var hx=10;         //★表示位置 x座標。マウスと画像の横位置。マイナスで左
var hy=30;         //★表示位置 y座標。マウスと画像の縦位置。マイナスで上
var Acss="animation: huwa 1.5s linear 0s infinite alternate;";/*★アニメーション指定。わからなければこのままで*/

//指定ここまで--------------------------------------------------------------
document.onmousemove=function (e){ var ob=document.getElementById("Mo").style; ob.left=e.pageX+hx+"px"; ob.top=e.pageY+hy+"px";}
document.write("<img src="+mga+" id='Mo' style='position:absolute;"+Acss+"'>");
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー１３-１■画像■ +CSS のふわふわマウス UP日時 : 2016/09/22

　マウスストーカー１３-１■画像■　+CSS のふわふわマウス　　　　UP日時 : 2016/09/22