【JavaScript】バルーンアニメーション(画面中央から外に向かって風船が広がるアニメーション)

2023年8月27日

この記事では、JavaScriptで風船を画面中央から外側に広がるアニメーションを実装するプログラミングコードを解説していきます。

完成形

最初に完成形を見ていきます。

画面の中央で風船を作り、ランダム関数を使ってアニメーションしていきます。

See the Pen js-05 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

まずは、HTMLのコーディングをしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

<div class="container"></div>

<script src="main.js"></script>
</body>
</html>

<!DOCTYPE html>:
- HTML5 のドキュメントタイプを指定します。
<html lang="ja">:
- HTML 要素の開始を示し、ページの言語が日本語 (ja) であることを指定しています。
<head>:
- ページのヘッダーセクションを定義します。ここにはメタ情報や外部リソースのリンクなどが含まれます。
<meta charset="UTF-8">:
- ページの文字エンコーディングを UTF-8 に設定します。これにより、日本語文字などの多言語文字が正しく表示されます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
- ページの表示方法を指定するためのメタビューポートタグです。デバイス幅に合わせてページを表示し、初期倍率を 1.0 に設定します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">:
- Bootstrap Icons の CSS ファイルへのリンクです。これにより、アイコンフォントが使用可能になります。
<link rel="stylesheet" href="style.css">:
- ページに適用するカスタム CSS ファイルへのリンクです。このファイル内でページのスタイリングが行われます。
<title>Document</title>:
- ページのタイトルを指定します。この例では “Document” となっていますが、必要に応じて適切なタイトルに変更してください。
<body>:
- ページのコンテンツを定義する本体セクションです。
<div class="container"></div>:
- バルーンのアニメーションが表示されるためのコンテナ要素です。この要素にアニメーション要素が追加されます。
<script src="main.js"></script>:
- main.js ファイルへのリンクです。

CSSコーディング

次にCSSのコーディングをしていきます。

@charset 'utf-8';

body {
    background-color: #95c0ec;
    overflow: hidden;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.blue {
    position: absolute;
    color: blue;
}
.red {
    position: absolute;
    color: red;
}
.green {
    position: absolute;
    color: green;
}
.yellow {
    position: absolute;
    color: yellow;
}
.pink {
    position: absolute;
    color: pink;
}

@charset 'utf-8';
- 文字エンコーディングを UTF-8 に設定しています。
body:
- ページ全体のスタイルを指定しています。
- background-color プロパティはページの背景色を設定します。
- overflow: hidden; はページコンテンツが画面外にはみ出さないようにするための設定です。
.container:
- バルーンアニメーションのコンテナ要素のスタイルを指定しています。
- position: absolute; で絶対位置配置を行います。
- top: 50%; left: 50%; でコンテナを画面中央に配置します。
- transform: translate(-50%, -50%); でコンテナを中央に正確に配置します。
.blue, .red, .green, .yellow, .pink:
- バルーンのアイコンのスタイルを指定しています。
- position: absolute; で絶対位置配置を行います。
- color プロパティでアイコンの色を指定します。それぞれのクラスに応じた色を設定します。

JavaScriptコーディング

最後にJavaScriptのコーディングをして完成です。

const container = document.querySelector('.container');
        
function createBalloon(className) {
    for (let i = 1; i <= 100; i++) {
        const icon = document.createElement('i');
        icon.classList.add(className);
        icon.classList.add('bi');
        icon.classList.add('bi-balloon-fill');
        container.append(icon);
    }
}
createBalloon('blue');
createBalloon('red');
createBalloon('green');
createBalloon('yellow');
createBalloon('pink');

function animateBalloons(className) {
    const balloons = document.querySelectorAll(`.${className}`);

    balloons.forEach(balloon => {
        const randomDuration = 15000;
        const randomDelay = Math.random() * 10000;
        const randomX = Math.random() * 1600 - 800;
        const randomY = Math.random() * 1000 - 500;
        const randomScale = Math.random() * 4 + 1;

        balloon.style.transform = `translate(0, 0) scale(1)`;

        setTimeout(() => {
            requestAnimationFrame(() => {
                balloon.style.transition = `transform ${randomDuration}ms ease-in-out`;
                balloon.style.transform = `translate(${randomX}px, ${randomY}px) scale(${randomScale})`;
            });
        }, randomDelay);
    });
}

animateBalloons('blue');
animateBalloons('red');
animateBalloons('green');
animateBalloons('yellow');
animateBalloons('pink');

const container = document.querySelector('.container');
- バルーンアニメーションのアイコン要素を配置するコンテナ要素を取得します。
function createBalloon(className) { ... }:
- バルーンアイコンを生成する関数です。
- 指定されたクラス名に対応するアイコンをコンテナに追加します。
- for ループを使用して複数のアイコンを生成します。
createBalloon('blue'); createBalloon('red'); ...:
- 各色のバルーンアイコンを生成します。
function animateBalloons(className) { ... }:
- バルーンアイコンをアニメーションさせる関数です。
- 指定されたクラス名に対応するアイコンを取得し、それぞれにアニメーションを適用します。
- 各アイコンにランダムなアニメーション効果を設定します。アニメーションの詳細は以下の通りです：
  - randomDuration と randomDelay はアニメーションの持続時間と遅延をランダムに設定します。
  - randomX と randomY はアイコンの移動先位置をランダムに設定します。
  - randomScale はアイコンのスケールをランダムに設定します。
  - balloon.style.transform でアニメーション前の初期位置とスケールを設定します。
  - setTimeout と requestAnimationFrame を使用してランダムな遅延と持続時間でアニメーションを開始します。
animateBalloons('blue'); animateBalloons('red'); ...:
- 各色のバルーンアイコンにアニメーションを適用します。