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

◆◆動くJavaScript◆◆

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

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

JavaScript使用の 左端移動 上へはこちら → 背景移動6■左端移動 上へ