背景にランダムに雪を降らせるjsアニメーション 3パターン
あなたのサイトで雪を降らせてみませんか？
キャンペーンや広告サイトで、背景に工夫を凝らしたものをよく見かけるようになりました。
季節ごとで、そのイメージに合ったものを使うことでより記憶に残りやすくなり、宣伝効果はさらに高まります。
今回は背景にランダムに雪を降らせる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アニメーションをご紹介しました。
デザイナーは冬になると雪が降るアニメーションをつい使いたくなります。
期間限定で背景に使ってみると、季節感も出てとってもおすすめです。
背景のアニメーションはまだまだ使っているサイトが少ないので、積極的に使っていきたいですね。
今後も背景アニメーションはご紹介していきますので、チェックしてみてください♪
最後までご覧いただきありがとうございました☆彡