横方向に雲(じゃなくてもいいけど)がぶっ飛んでいくアニメーション

本日8月2日は何回目か分かりませんがみんな大好きラピュタの放送日なので、そういう感じを目指して。

DEMO

スクリプト自体は別にラピュタ関係ないけどね・・・・(´・ω・`)

AD

HTML

まず、雲の画像を用意してul>liで配置します。
透過PNGを使ったり移動ぼかしをかけたりすると雰囲気が出るかもしれません。

CSS

CSSは親要素であるul(ここでは#cloud)にウインドウ(かbody)と同サイズのwidth,heightを設定して最背面に設置するのですが、widht,heightはJSで動的に取得しますので、ここではabsoluteとz-indexのみ指定しておきます。
なお、overflow:hiddenを設定しないと横スクロールが表示されてしまいますので、忘れず設定してください。

Javascript

JS側で行う処理は、ウインドウ右端まで移動したらウインドウ左端に戻す、という処理を繰り返しているだけです。
Math.random()を使いスピードや縦方向の位置をランダムにすることにより、流れる雲っぽさを出しています。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。