JS を使用した簡単な雪効果の例の詳細な説明

序文

南の友達の多くは、雪をほとんど見たことがない、あるいは見たことがないかもしれません。今日は、雪景色をシミュレートする小さなデモを紹介します。まず、ランニングエフェクトを見てみましょう。

クリックするとオンラインで実行されているのを見ることができます http://haiyong.site/xiaxue

まず、プロジェクト構造、スノーフレーク画像、.htmlファイル、jquery-1.4.2.jsを見てみましょう。

使用した雪の結晶の画像をここに掲載しましたが、私のウェブサイトにアップロードした画像アドレスを直接使用することもできます：http://haiyong.site/wp-content/uploads/2021/12/snow.png。画像から始めて、コンテンツは完全に JS に依存します。

主な実装コード

HTMLコード

ここにHTMLのコンテンツがあります。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>海が抱擁する🌊 | 雪が一粒ずつ降る</title>
		<meta name="viewport" content="width=デバイス幅、ユーザースケーラブル=いいえ">
		<meta name="keywords" content="雪の結晶" />
		<meta name="description" content="ツール | 雪を一つずつ。100 個の小さなゲームを備えた Web サイトを作成することを決意。Haiyong によって作成、テクニカル サポート - Haiyong" /> 
		<meta name="author" content="海拥(http://haiyong.site/moyu)" />
		<meta name="copyright" content="海拥(http://haiyong.site/moyu)" />
		<link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" rel="external nofollow" sizes="192x192" />
		<スタイル タイプ="text/css">
			体{
				背景色: #000000;
				margin: 0;/* 組み込みのマージンを削除します*/
			}
			画像{
				位置: 絶対;
			}
		</スタイル>
	</head>
	<本文>
		<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>		
	</本文>
</html>

JSコード

まず、タイマーをオンにして、雪の結晶の画像を追加します。ここで、<img src='images/snow.png'>を<img src='http://haiyong.site/wp-content/uploads/2021/12/snow.png'>に変更できます。

setInterval(関数(){
var img = $("<img src='images/snow.png'>");
$("body").append(画像);

ここでは、雪片のサイズは10〜20pxに設定されています。次の式は、（0〜10 + 10）pxを表します。

var size = parseInt(Math.random()*11)+10;
img.css("幅",サイズ+"px");

画面の幅を取得する

var w = $(window).width();

値の範囲は0-画面幅-スノーフレーク幅です

var left =parseInt(Math.random()*(w-size));

得られたランダムな1eftを画像に与えます

img.css("左",左+"px");

雪片の動きのアニメーションを追加し、雪片の移動距離 = 画面の高さ - 雪片のサイズを取得します。

var top = $(window).height()-size;

以下のコメントのコードはキャッシュをクリアするために使用され、追加してもしなくてもかまいません。

img.animate({"top":top+"px"},size*100)
/* .fadeOut(1000,function(){
	//アニメーションが完了したらこのコードを実行してキャッシュをクリアします img.remove();
	//console.log($("img").length);
}); */
},10)

これをコメント解除すると、以下に示すように、降り積もる雪が消えます。

雪の積もりを見たい場合はコメントアウトすると、プレビュー効果は次のようになります。

この時点で、私たちが達成したい効果は完成しています。実行時間が長すぎると、メモリ使用量が過剰になり、遅延が発生する可能性があります。HTMLコードの最後のコメントの内容をコメント解除すると、下の雪が徐々に消えて消えていきます。ただし、雪もとても美しいと思うので、このように溶けないようにしました。

JS で実装されたシンプルな雪のエフェクトの例の詳細な説明に関するこの記事はこれで終わりです。より関連性の高い JS シンプルな雪のエフェクトのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: