動く背景２０　部分の背景画像の左右往復移動　

右下位置指定の、div空間(部分)の背景画像の左右移動です。
画像の実寸より、移動幅c(20)の２倍の数値だけ横サイズを小さくします。

背景画像実寸横700px縦650pxを横40px小さくして、横660px縦650pxのdiv空間です。
これで繋ぎ目の出ないゆらゆら背景になります。

そして画像の上に文字を表示させるため(bodyの背景画像のように扱うため)、z-index:-1;指定と、スクロールしても動かないよう位置固定指定もしてあります。この二つは、不要なら削除して下さい。

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

<!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>動く背景２０　部分の背景画像の左右往復移動　</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
/*★左右移動する背景画像指定。#akaを必ず記述*/
#aka{
width:660px;/*★横幅だけ、(画像実寸)マイナス(移動幅×2倍)=の数値*/
height:650px;
background-image:url(size1.jpg);/*★上下移動する背景画像名指定*/
position:fixed;/*★位置固定指定*/
bottom:0px;/*★下からの位置*/
right:0px;/*★右からの位置*/
z-index:-1;/*★重なり具合をマイナス指定することで、bodyの背景画像と同じ扱いが可能*/
}
-->
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body onload="haikei();">
<!--★↑bodyタグの中の  "haikei();"も記述して下さい。-->

<!--★↓が左右移動する画像の位置。id="aka"を必ず記述-->
<div id="aka"></div>


<div style="margin-top:200px; margin-left:200px;width:400px;border: dotted 5px #acdcf7;border-radius:20px;padding:20px;">
<p>
右下位置指定の、div空間(部分)の背景画像の左右移動です。<br>
画像の実寸より、移動幅c(20)の２倍の数値だけ横サイズを小さくします。<br>
<br>
背景画像実寸横700px縦650pxを横40px小さくして、横660px縦650pxのdiv空間です。<br>
これで繋ぎ目の出ないゆらゆら背景になります。<br>
<br>
そして画像の上に文字を表示させるため(bodyの背景画像のように扱うため)、z-index:-1;指定と、スクロールしても動かないよう位置固定指定もしてあります。
この二つは、不要なら削除して下さい。</p>
</div>


<!--★ここからコピー　位置は<body>の中です-->
<script type="text/javascript">
<!--
/*==================================================================================
JavaScript背景の移動　by オリジナルJavaScript  http://jun88.6.ql.bz/
★HTML5とブラウザのファイヤーフォックスでも動作可能へ。 2014/08/26
====================================================================================*/
var a=0;
var c=20;//★移動幅。原本50
function haikei(){
a=a+0.05;
a=a%6.28;
T=0+"px";L=-c+c*Math.sin(a)+"px";

document.getElementById("aka").style.backgroundPosition=L+" "+T;
setTimeout("haikei()",100);//★数値が小さいほど速い。原本100
}
// -->
</script>
<!--★ここまでコピー-->

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

動く背景２０■部分■ 部分の背景画像の左右往復移動 UP日時 : 2014/08/26

　動く背景２０■部分■　部分の背景画像の左右往復移動　　　　　UP日時 : 2014/08/26