【Vanilla JS、CSSアニメーション】対象エリアにランダムに雪を降らせる（Intersection observer API使用）
[ ID : 11086 ]
実装目安
3分
概要
JavaScriptで生成した雪を対象エリアにランダムに降らせる処理を実装する。用途・要件
- 対象エリアにランダムに雪を降らせる。
- Intersection observer APIを使用して画面内に入ったタイミングで、一定間隔で雪を生成する。(setInterval使用)
- CSSアニメーションを使用して、対象エリアの上部から下部に雪を移動させる。
- 生成した雪の要素は、CSSアニメーション終了後(対象エリア下部まで降りてきた時)に削除される。
- 雪の最大・最小サイズ、雪の生成速度、雪の降る速度を調整可能。
- ページが非表示の場合は、雪を生成しない。
- 同一ページへの複数設置可能。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
