ホームページ > 記事 > ウェブフロントエンド > HTML+CSS+JSで雪の結晶の飛行を実現(コードシェアリング)
HTML CSS JS を使用して降雪効果を実現するにはどうすればよいですか?次の記事では、HTML CSS JS で雪の結晶を実装する方法の例を紹介します。
南部出身の友人の多くは、雪をあまり見たことがないか、見たことがないかもしれません。今日は、雪の景色をシミュレートする小さなデモをお届けします。まず、ランニング効果を見てみましょう
クリックすると、オンライン操作を確認できます: http://haiyong.site/xiaxue
#まず、プロジェクトの構造、雪の結晶の写真、 HTML ファイルと jquery-1.4.2.js で使用されているスノーフレーク画像をここに配置しました。または、画像アドレスを直接使用することもできます: https:// img.php .cn/upload/article/000/000/024/61dea8bfbe598211.png 冒頭に画像があり、内容はすべてJSベースです。 HTML コード以下は HTML の内容です。大したことはありませんnbsp;html> <meta> <title>海拥| 雪一片一片</title> <meta> <meta> <meta> <meta> <meta> <link> <style> body{ background-color: #000000; margin: 0;/* 去掉自带的外边距 */ } img{ position: absolute; } </style> <script></script>JS コード:まず、タイマーを開始して雪の結晶画像を追加します。
は、
setInterval(function(){ var img = $("<img src='images/snow.png' alt="HTML+CSS+JSで雪の結晶の飛行を実現(コードシェアリング)" >"); $("body").append(img);雪の結晶のサイズはここでは 10 ~ 20px に設定されており、次の式は (0 ~ 10 10) を意味します。 )px
var size = parseInt(Math.random()*11)+10; img.css("width",size+"px");画面幅を取得
var w = $(window).width();値の範囲は0-画面幅-スノーフレーク幅
var left =parseInt(Math.random()*(w-size));取得したランダムな1eftを画像に与えます
img.css("left",left+"px");雪の結晶の動きのアニメーションを追加し、雪の結晶の動きの距離 = 画面の高さ - 雪の結晶のサイズを取得します。
var top = $(window).height()-size;以下のコメント内のコードはキャッシュをクリアするために使用されます。追加するかどうかは自由です。
img.animate({"top":top+"px"},size*100) /* .fadeOut(1000,function(){ //当动画完成时执行此代码,清除缓存 img.remove(); //console.log($("img").length); }); */ },10)コメントを外すと、下の写真のように、降っている雪が消えていくのがわかります。 雪を見たい方は、コメントアウトしてプレビューしてください効果は次のとおりです #実現したい効果はここで完成です。実行時間が長すぎると、過剰なエラーが発生する可能性があります。コードの最後のコメントの内容をコメント解除して HTML を変更すると、下の雪が徐々にフェードアウトして削除されます。ただし、雪はかなり見栄えが良いと思うので、変更しません。次のように溶けないようにしてください: (学習ビデオ共有:
css ビデオ チュートリアル)
以上がHTML+CSS+JSで雪の結晶の飛行を実現(コードシェアリング)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。