背景移動６-１■CSS 左端移動　上へ

●2016/06/18：CSSのみ使用なので、JavaScriptのグローバル変数はありません。
CSSだけを使用した body の左端縦並びの背景移動の、縦移動です。
動いているのは背景画像なので、上にタイトルや文章が書けます。そして画像も置けます。
トンボの画像はGIFアニメの背景透過画像です。
CSSの横移動、縦移動、斜め移動の書き方については、背景移動１-１■CSS box背景移動の説明から。
また「body{animation: bMove 9s linear infinite;～～～}」の「linear」を修正すると、速度変化を付けられます。
その修正方法は、Lopan.jp のanimationプロパティを参考にしてみて下さい。

速度と移動方向が違うだけで、CSS は■背景移動３-１■CSS 空の全面背景移動■と同じです。
ただ CSS での背景画像の指定が、「敷詰」ではなく「repeat-y（左端縦並び）」になっているだけです。

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>背景移動６-１■CSS 左端移動　上へ</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{
animation: bMove 6s linear infinite;/*★必須。移動の「bMove」の時間指定。1sは1秒。小さいほど速い*/
background: url(yas1sm.jpg) #f5f5d3 repeat-y;/*★背景画像、背景色薄茶色、縦の繰り返し指定。背景画像の実寸は横200px縦300px*/
}

/*★必須。移動の動きの指定。名前は「bMove」*/
@keyframes bMove {
0% {background-position: 0 0;}
100% {background-position: 0 -300px;}/*★縦移動の時は必ず使用する背景画像の縦幅を記述。マイナス指定で上向き*/
}

/*★タイトル文字指定。不要なら削除*/
.test1{
position:absolute;/*★位置指定お好みで*/
top:30px;/*★上からの位置。お好みで*/
left:100px;/*★左からの位置。お好みで*/
color: #fc0;/*★文字色　オレンジ色*/
font-size:32px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
opacity:0.9;/*★透過指定。文字色を薄くする。お好みで*/
text-shadow: 5px 5px 5px #888;/*★影指定。お好みで*/
}
--></style>
<!--★ここまでコピー-->

</head>
<body>

<p class="test1">◆◆動くJavaScript◆◆</p><!--★タイトル文字。見本のため削除-->
<img src="ea4.gif" style="position:absolute; top:150px; left:40px;width:70px;height:auto;"><!--★トンボ画像。見本のため削除-->
<img src="ea4.gif" style="position:absolute; top:300px; left:60px;width:100px;height:100px;"><!--★トンボ画像。見本のため削除-->

</body>
</html>

背景移動６-１■左端移動 上へ UP日時 : 2016/06/18

　背景移動６-１■左端移動　上へ　　　　　UP日時 : 2016/06/18