JavaScript を使用して降雪の効果を実現する_javascript スキル

JavaScript の Web 特殊効果の例集で、絵が浮かんでくる効果の例を読んで、学ぶ価値があると思いました。

写真を雪の結晶の写真に変更して、雪の結晶が降る効果を実現します。

また、内容がかなり古いものもございますので、変更させていただきます。

含まれるもの:

1. 左側と上部の操作は IE ブラウザのみをサポートします。これが機能するには、Chrome がサポートされている必要があります。
2. 画像の所在を制御するプロセスでは、要素を取得する必要があります。そうでない場合は、要素を配列ストレージに変更し、配列に格納されているオブジェクトを直接操作すると、起動が速くなりません。
3. JS コードを使用して要素オブジェクトを作成し、ドキュメントに要素を直接追加します。

実装のアイデア:

1. 絶対配置を使用する 10 個の div を初期化して生成します。各 div に雪の結晶の画像を配置し、幅と高さを設定して配列に保存します。これにより、後続の Snow 関数を直接操作できるようになります。
2. 各 div の横座標と縦座標を初期化します。常に雪の結晶の落下の開始位置を指定します。
3. 各雪片が異なる速度で落下し、揺れるように、垂直方向の落下ステップと水平方向のスイング ステップを持つように各雪片を初期化します。
4. 雪関数を作成し、10 秒ごとに関数を調整します。関数を調整するたびに、各雪の結晶がそれぞれのステップの長さで垂直に落ちるように制御されます。水平方向の揺れは、sine 関数を使用して正弦値によって計算され、乗算されます。振幅によって雪の結晶が正弦波形になるようにします。

オンラインで写真を見つけることができます。

次のコードは IE8 および Chrome と互換性があります。

コードをコピー コードは次のとおりです:

//絵の過程で、横軸の軌跡は一点を中心とした正弦曲線になります
//setTimeout 関数を使用してアニメーション関数を完了します
//画像
var Snowsrc="スノーフレーク.png"
//雪の結晶の数
変数番号 = 10; //変数を宣言します。xp は横座標を表し、yp は縦座標を表します>
var dx、xp、yp;
//変数を宣言、amは左右の振り幅、stxは横軸のオフセットステップ、styは縦軸のステップを表す>
var am、stx、sty; {
// 現在のウィンドウの幅を取得します
clientWidth = document.body.clientWidth;
// 現在のウィンドウの高さを取得します
clientHeight = document.body.clientHeight;
}
var dx = new Array();
var xp = 新しい配列();
var yp = new Array();
var am = new Array();
var stx = 新しい配列();
var sty = new Array();
var SnowFlakes = new Array();
for (i = 0; i dx[i] = 0; //i 番目の画像の横軸の初期値
xp[i] = Math.random()*(clientWidth-50);
yp[i] = Math.random()*clientHeight;//i 番目の画像の縦座標の初期値
am[i] = Math.random()*20; //i 番目の画像の左右の振幅
stx[i] = 0.02 Math.random()/10; //i 番目のピクチャの x 方向のステップ サイズ
sty[i] = 0.7 Math.random(); //i 番目のピクチャの y 方向のステップ サイズ
//雪の結晶画像を保持する div を生成し、その絶対座標を設定します
var SnowFlakeDiv = document.createElement('div');
SnowFlakeDiv.setAttribute('id', 'dot' i);
SnowFlakeDiv.style.position = 'absolute';
SnowFlakeDiv.style.top = 15;
SnowFlakeDiv.style.left = 15;
//雪の結晶画像オブジェクトを生成し、幅と高さを設定し、div
を追加します var SnowFlakeImg = document.createElement('img');
SnowFlakeImg.setAttribute('src', Snowsrc);
SnowFlakeImg.style.width = 30;
SnowFlakeImg.style.height = 30;
//スノーフレーク div をドキュメントに追加し、配列
を介して保存します。 SnowFlakeDiv.appendChild(snowFlakeImg);
Document.body.appendChild(snowFlakeDiv);
SnowFlakes[i] = SnowFlakeDiv;
}
関数 Snow() {
for (i = 0; i // i 番目の画像の垂直座標にステップ サイズを加えたもの
yp[i] = sty[i];
//新しい座標が画面の下端を超える場合は、横座標、縦座標、x 方向のステップ サイズ、y 方向のステップ サイズを含む画像情報をリセットします
If (yp[i] > clientHeight-50) {
//画像の横座標を再割り当てします
xp[i] = Math.random()*(clientWidth-am[i]-30);
//画像の垂直座標を再割り当てします
yp[i] = 0;
}
dx[i] = stx[i];// dx 変数にステップ サイズを追加します
// 配列内の対応するスノーフレーク div
を直接操作します var SnowFlakeDiv = SnowFlakes[i];
//画像の垂直座標を更新します
SnowFlakeDiv.style.top = yp[i];
//画像の横座標を更新します
SnowFlakeDiv.style.left = xp[i] am[i]*Math.sin(dx[i]);
}
//アニメーションを更新する期間を設定します
setTimeout("snow()", 10);
}
//snowIE() 関数を呼び出します
雪();

上記はすべてのコードです。効果は非常に優れています。具体的な説明についてはコメントを参照してください。ここにはこれ以上ナンセンスはありません。皆さんのお役に立てれば幸いです。