●2020/07/16：即時関数で囲んで、グローバル変数を消しました。
左端一列表示の木の枝の背景画像が、上下に往復運動をしているJavaScriptです。
背景画像サイズは横300px縦450pxで、
Seamew（シーミュー）で縦並び繋ぎ目無しのシームレス加工をしています。
涼しい風に吹かれて、木々が揺れているように見えれば成功。
原本は、
オリジナルJavaScriptから。
『動く背景』と『静止画像やGIFアニメ画像やCSSでアニメする画像』を組み合わせれば、簡単に立体的な空間を作ることができます。
そしてJavaScriptとは関係ないですが、画像指定について、ちょこっと説明。
鳥の画像は、スクロールしても不自然な位置にこないよう、固定指定がしてあります。
その時に画像サイズが、もう少し横幅が大きければいいのにとか、縦幅が小さければいいのに、と思う時。
ほんのちょっとの修正だったら、サイズ指定で調整できます。
実寸が横200px縦146pxで、横を150pxにしたい時。電算を持ち出して、縦サイズを計算する必要はありません。画像ファイル指定にwidht:150px;だけ記入。heightの数値は記述しなくても、自動でパソコンが縦横比率が同じになるように計算します。縦も同様で、heightの数値だけ記入すれば、widthは自動で計算します。
今回、鳥の画像は、１枚は実寸より縮小、１枚は実寸より拡大してあります。
簡単なので、試してみて下さい。
ただし、画像は大きいと重く、重いとパソコンの読み込みが遅くなります。実寸が大きい画像は、表示を小さくしても重さは小さくなりません。実寸より極端に小さく表示したい時は、ペイントソフト等で大きさを作り直すのがベストです。
これもJavaScriptとは無関係ですが、一番大きな鳥はCSSでゆっくりとした振り子運動指定がしてあります。
興味のある方は
iwb.jp の「意外と知られていないCSSの色々な回転アニメーションの作成方法」を参考に、いろいろ変更してみて下さい。
