レベル★★☆☆☆
java script(ジャバスクリプト)を使って、ウェブページに雪を降らせます。
jQuery-Snowfall
https://rayhyde.github.io/fallingsnow
【サンプル】https://wwweb.jp/sample/snow/
HTMLの記述
HTMLを用意し、以下のコードを入力します。
動きのある演出を取り入れる場合、スクリプトを動かすためのライブラリー、及びプラグインなどが必要になります。今回は、jQuery-Snowfallというプラグインを使用するため「CDN」(コンテンツデリバリーネットワーク)を利用します。
【CDNとは】(AIによる解説)
CDNは、インターネットのデータを世界中に分けて置いておくしくみ。それによって、近い場所からデータをもらえるので、ウェブサイトや動画が早く表示される。みんなが快適にインターネットを使えるようにしてくれる「ひみつの裏方」です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js" integrity="sha512-2lnPnqNBAOffMBUQuPtK4BdPQ44edvBmuJK6fzj/EuAtX/VSW6xkuMrngwyuNkF36IQ+jkllOqLNlZu9PMXh0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></head>
<script src="https://cdn.jsdelivr.net/npm/snow@1.3.1/snow.min.js"></script>
<body>
<!---- </body>の直前に記述 ---------------------->
<script type="text/javascript">
$(document).ready(function () {
$("body").snowfall({
flakeCount: 45, // number
flakeColor: "#ffffff", // string
flakeIndex: 999999, // number
minSize: 1, // number
maxSize: 9, // number
minSpeed: 2, // number
maxSpeed: 3, // number
round: true, // bool
shadow: false, // bool
});
});
</script>
</body>
</html>CSSの記述
スタイルシートを用意し、以下を記述する。
body {
background-color: #000;
height: 100vh;
color:#fff;
}
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。