動く背景２１-１　マウスで動く背景画像 body　

画面上ならどこでもいいので、マウスを動かして下さい。
マウスの動きに合わせて、body全体の背景画像が動きます。
こちらのサイトの原本を改造して、HTML5対応、ブラウザFirefox対応に改造しました。

これとは逆に、小さなboxの方をマウスで動く背景にしたJavaScriptは、こちら。
どちらでも、お好みでどうぞ。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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>動く背景２１-１　マウスで動く背景画像 body　</title>


<!--★ここからコピー-->
<style type="text/css">
<!--
/*★今回はbodyに動く背景画像指定必須。画像実寸横640px縦1167px*/
body{background:url("kensa2.jpg") #97afc6;}

/*★box指定。不要なら削除*/
#mini{
background:url("kensa2s.jpg");/*★背景画像指定。画像実寸横247px縦450px。お好みで*/
width:247px;/*★boxサイズ指定。画像サイズと同じ*/
height:450px;
position:fixed;/*★動く背景のboxの位置を固定位置指定してますが、不要なら以下3行は削除*/
bottom:20px;
left:20px;
border-radius:20px;/*★角丸指定*/
box-shadow: 5px 5px 10px #333333 inset;/*★内側影指定*/
border: 1px solid #ffffff;
}
-->
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>


<!--★↓box指定。不要なら削除-->
<div id="mini"></div>

<p style="margin-top:500px;margin-left:500px;width:50%; padding:30px;background-color: rgba(255,255,255,0.8);border-radius:20px;">
画面上ならどこでもいいので、マウスを動かして下さい。<br>
マウスの動きに合わせて、body全体の背景画像が動きます。<br>
<a href="http://www.openspc2.org/reibun/JS_TipsAndTricks/mouse/008/index.html" target="_new" title="OpenSpace">こちらのサイト</a>の原本を改造して、HTML5対応、ブラウザFirefox対応に改造しました。<br>
<br>
これとは逆に、小さなboxの方をマウスで動く背景にしたJavaScriptは、<a href="bg21.html" >こちら</a>。<br>
どちらでも、お好みでどうぞ。</p>


<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*==================================================================================
JavaScriptマウスで動く背景画像　By　http://www.openspc2.org/reibun/JS_TipsAndTricks/mouse/008/index.html 
===========================================================================
★HTML5とブラウザのファイヤーフォックスでも動作可能へ改造。 2014/09/12
改造参考サイト　オリジナルJavaScript  http://jun88.6.ql.bz/
　　　　　　　　JavaScriptっぽい。http://www5e.biglobe.ne.jp/~purest/javascript/index.html
====================================================================================*/
document.onmousemove=function(e){
         L=e.pageX+"px";
         T=e.pageY+"px";
	 document.body.style.backgroundPosition =L+" "+T;
}
// -->
</script>
<!--★ここまでコピー-->

<br><br><br><br><br><br>
</body>
</html>

動く背景２１-１■全体■ マウスで動く背景画像 body UP日時 : 2014/09/12

　動く背景２１-１■全体■　マウスで動く背景画像 body　　　　　UP日時 : 2014/09/12