BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQuery・CSSで作るランダム表示アニメーション
by ウラカワ ウラカワ

jQuery・CSSで作るランダム表示アニメーション

jQuery・CSSで作るランダム表示アニメーション

こんにちは、ウラカワです。

今回はタイトル通りjQuery・CSSを使って、ランダムで表示するアニメーションを作ってみました。

  • 背景に円をランダムで表示
  • マップにマーカーをランダムで表示

という簡単なものです。

まずは指定した範囲内でランダムに整数を返す関数を用意します。

これが要となっています。

マーカーのアニメーション

それではマップのマーカーからいきましょう。

まず、CSSでマーカーの位置とアニメーションを用意します。

飛び跳ねる感じにしたいため、transform-origin: 50% 100%; で軸を下に固定しています。

マーカーの数やアニメーションのバリエーションを同様に増やすことで賑やかな感じになります。

配置やアニメーションの調整が終わったら、ランダムで動くようにJavaScriptを用意します。

上記は各マーカーに対して「10%の確率で表示する」というアクションを1秒間隔で発生させ、表示された場合2秒後に消えるという設定です。

この部分がランダムで実行する部分になっています。

1~100をランダムで取得して10以下だったら(つまり10%で)非表示の場合に限り実行する、という内容です。

さらに下記のように別の設定を追加することでパターンを増やすことも出来ます。

円のアニメーション

まずはSVGで円を用意します。

CSSで円の拡大・フェードアニメーションを調整します。

transform-origin: 50% 50%; を指定しないと円が中心から広がらないので注意が必要です。

マーカー同様JavaScriptでランダムに表示させますが、マーカーが位置固定だったのに対して、円は位置もランダムで表示させます。

なので、まずは描画範囲を取得します。

ウィンドウリサイズ時に範囲を再取得する場合は下記を追加します。

あとはこの範囲内で表示させるだけですが、円の表示前後に複製・削除の処理を追加します。

  1. 表示前にSVGを複製
  2. CSSで位置を指定して表示
  3. 表示後に複製したSVGを削除

合わせると下記のようになります。

今回のデモは画面全体に表示させましたが、一部のブロックに表示させる場合は、paddingで円が上手く収まるように設定した方が綺麗に見えると思います。

まとめ

一部同じような繰り返しの部分を省略していますが、まとめると下記のようになります。

HTML

SCSS

JavaScript

今回のデモの内容でも、SVGの形やアニメーションを変えるだけで色々作れます。

さすがに複雑なアニメーションはJavaScriptの専用ライブラリ等に頼ることになると思いますが、ちょっとした動きを付ける程度でしたらCSSでアニメーションを付けるのがお手軽で良いですね。

ページの先頭に戻る