Background

背景にランダムに雪を降らせるjsアニメーション 3パターン

雪を降らせるjsアニメーション
Loa

あなたのサイトで雪を降らせてみませんか?

キャンペーンや広告サイトで、背景に工夫を凝らしたものをよく見かけるようになりました。

季節ごとで、そのイメージに合ったものを使うことでより記憶に残りやすくなり、宣伝効果はさらに高まります。

今回は背景にランダムに雪を降らせるjsアニメーションを3パターンご紹介したいと思います。

冬は特にイベントが多いので、雪の背景はだれでも使ったことがあるくらい使います。

サイトに少し派手さが欲しいときや、動きをつけたいときに簡単に実装出来ておすすめです。

雪の量やスピードを自由に変えることもできるので、参考にしてみてください♪

小さい雪が降る背景示

小さめの雪がランダムに降ってくるような背景のアニメーションです。

粉雪のような粒の大きさなので、あまり主張しすぎずどんなサイトでも使いやすいと思います。

背景の色を薄めの色に変更すると、さらに雪をひっそりと降らせることもできます。

See the Pen
Untitled
by loa (@hana4525)
on CodePen.

サイズ違いの雪が降る背景

いろんな大きさの雪がランダムに降ってくるような背景のアニメーションです。

冬をしっかり表現したいときにはこちらがおすすめです。

雪の大きさがさらにランダムなので、背景に奥行きを加えることができます。

See the Pen
Untitled
by loa (@hana4525)
on CodePen.

サイズ違いの雪がたくさん降る背景

いろんな大きさの雪がたくさん降るような背景のアニメーションです。

js内の「var COUNT = 500;」に変更して雪の量を調整して使用できます。

これはほとんど使うことはないですが、自由にアレンジして使う例としてご紹介しました。

See the Pen
Untitled
by loa (@hana4525)
on CodePen.

まとめ

今回は背景に雪を降らせるjsアニメーションをご紹介しました。

デザイナーは冬になると雪が降るアニメーションをつい使いたくなります。

期間限定で背景に使ってみると、季節感も出てとってもおすすめです。

背景のアニメーションはまだまだ使っているサイトが少ないので、積極的に使っていきたいですね。

今後も背景アニメーションはご紹介していきますので、チェックしてみてください♪

Loa

最後までご覧いただきありがとうございました☆彡