【Vanilla JS、CSSアニメーション】対象エリアにランダムに雪を降らせる(Intersection observer API使用)

[ ID : 11086 ]
シルバー
【Vanilla JS、CSSアニメーション】対象エリアにランダムに雪を降らせる(Intersection observer API使用)
実装目安
3分

概要

JavaScriptで生成した雪を対象エリアにランダムに降らせる処理を実装する。

用途・要件

  • 対象エリアにランダムに雪を降らせる。
  • Intersection observer APIを使用して画面内に入ったタイミングで、一定間隔で雪を生成する。(setInterval使用)
  • CSSアニメーションを使用して、対象エリアの上部から下部に雪を移動させる。
  • 生成した雪の要素は、CSSアニメーション終了後(対象エリア下部まで降りてきた時)に削除される。
  • 雪の最大・最小サイズ、雪の生成速度、雪の降る速度を調整可能。
  • ページが非表示の場合は、雪を生成しない。
  • 同一ページへの複数設置可能。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装

コンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録