Web制作
上から雪が降ってくる、GSAPサンプル

上から雪が降ってくる、GSAPサンプル

2023.12.21

GSAPを使って、画面の上から雪を降らせるサンプルです。アニメーション自体は、上から下へ移動するだけの単純なものですが、動くタイミングやスタート地点を、ランダムに変更させている部分があります。そういった機能を実装する際に、通常のJavaScriptでもできますが、やはりGSAPを使った方が楽でした。

サンプルページ

まず、こちらが、今回のサンプルページです。

上から雪が降ってくる、GSAPサンプル

雪の作成

最初に、上から降ってくる雪を作成します。最初に、divタグを使って雪の基になるブロックを作成するのですが、ある程度数が多い方が見栄えがいいので、サンプルページでは、20個のdivタグを用意しています。

ただ、20個すべて手入力で用意してもいいのですが、数が増えたり減ったりする場合もありますし、何より、人への負担が大きくなってしまいます。ですので、今回はJavaScriptを使って、divタグを設定します。

let snow;

// 雪を作成。手作業は大変なので、JSを使って挿入。
for (let i = 0; i < 20; i++) {
	snow = document.createElement("div");
	snow.classList.add('snow-flake');
	document.querySelector("body").appendChild(snow);
}

この設定に関しては、こちらのページを参考にいたしました。
GSAP入門（後編）- タイムライン制御やスクロール演出などの魅力的なJSライブラリ
ページをスクロールしてもらうと、パーティクルを使ったサンプルがあります。その部分のJSを参考にさせてもらいました。

次に雪としての体裁を整える作業ですが、今回はCSSを使っています。

.snow-flake {
	width: 16px;
	height: 16px;
	border-radius: 9999px;
	background-color: #fff;
	position: absolute;
	top: -10%;
}

CSSについては、特別難しいことはしていませんが、topを-10%にすることで、ブラウザの外（＝画面の外）に移動させ、最初は見えないようにしています。

GASPを使って、雪を動かす

次に、雪の動作に関してですが、今回はGSAPと通常のJavaScriptを使って動かしています。動き自体は特別難しいものではありませんが、タイミングをずらしたり、秒数を変えたいといった場合、通常のJavaScriptでは設定が難しくなります。そういった部分を、GSAPでカバーしています。

// 個々の雪に設定するタイムライン用に、配列を定義します。
let tl = [];

// 作業しやすいように、作成した雪を変数に代入します。
let snowFlakes = document.querySelectorAll(".snow-flake");

// ここから、個々の雪に対して、GSAPを設定します。

let i = 0;
for (let snowFlake of snowFlakes) {

	// 雪の初期設定です。
	// blurを使って、雪をばやけさせています。4pxから8pxの間でランダムに設定します。
	snowFlake.style.filter = "blur(" + (Math.random() * (8 - 4) + 4) + "px)";
	// leftの値もランダムにして、横方向に散らばるように設定します。
	snowFlake.style.left = (Math.random() * 90) + "%";

	// ループするように設定します。
	tl[i] = gsap.timeline({
		repeat: -1
	});
	// タイムラインの設定です。
	tl[i].to(snowFlake, {
		// topを増やすことで、下の方へ移動させます。
		top: "110%",
		// アニメーションのスピードは、ゆったりめにしています。
		duration: 8,
		// 開始のタイミングをずらすことで、ばらばらに移動させます。
		delay: (Math.random() * 8),
		onComplete: () => {
			// アニメーションが完了したら、leftを設定しなおし、別の場所から降るように設定します。
			snowFlake.style.left = (Math.random() * 90) + "%";
		},
	}); // 水平方向に移動
	i++;
}

今回、個々の雪をぼんやりさせるため、CSSのblurを使ってぼかしています。以前は、ぼんやりさせたい場合はbox-shadowを使って表現していました。ですが、このやり方だとどうしても境界線がくっきりしてしまい、結局PNG画像で作っていたことが多かったと思います。ですが、blurの場合は、タグ全体が均一にぼやけてくれるので、違和感なく使うことができます。