【JavaScript】バルーンアニメーション(Anime.js)画面中央から風船が広がるアニメーション

2024年12月2日

この記事では、JavaScriptのライブラリ『Anime.js』を使って風船が中央から外側に向かってランダムに広がるアニメーションを実装するプログラミングコードを解説していきます。

完成形

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

画面の中央で作られた風船が外側に向かってランダムに広がっていきます。

See the Pen js-06 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>バルーンアニメーション</title>
</head>
<body>
    <div class="container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="main.js"></script>
</body>
</html>

<!DOCTYPE html>:
- HTML 文書の種類を定義しています。
<html lang="ja">:
- HTML 要素の開始です。lang 属性にはページの言語が指定されています。
<head>:
- ドキュメントのメタデータと外部リソース（スタイルシート、フォントなど）を含むヘッド要素です。
<meta charset="UTF-8">:
- 文字コードを 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">:
- Bootstrap Icons ライブラリのスタイルシートを外部リンクしています。
<link rel="stylesheet" href="style.css">:
- スタイルシートファイル style.css を外部リンクしています。
<title>バルーンアニメーション</title>:
- ページのタイトルを指定しています。
<body>:
- ドキュメントの本体部分を含む body 要素の開始です。
<div class="container"></div>:
- バルーンアニメーションが表示されるコンテナ用の空の div 要素です。ここにアニメーション要素が追加されます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>:
- Anime.js ライブラリのスクリプトを外部リンクしています。
<script src="main.js"></script>:
- JavaScript ファイル 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:
- ページ全体の背景色とスクロールバーの表示を制御しています。
.container:
- バルーンアニメーションのコンテナのスタイルを設定しています。
- position: absolute; によって位置が絶対位置で指定されます。
- top: 50%; および left: 50%; によって画面中央に配置されます。
- transform: translate(-50%,-50%); によって中央配置が微調整されます。
.blue, .red, .green, .yellow, .pink:
- 各色のバルーン要素のスタイルを設定しています。
- position: absolute; によって位置が絶対位置で指定されます。
- color プロパティによってテキストカラーが指定されます。

JavaScriptコーディング

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

今回は、Anime.jsを使っているのでAnime.jsの記入方法でコーディングしていきます。

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) {
    anime({
        targets: `.${className}`,
        duration: 20000,
        delay: anime.stagger(40),
        easing: 'easeOutCirc',
        translateX: function(){
            return anime.random(-800,800);
        },
        translateY: function(){
            return anime.random(-500,500);
        },
        scale: function(){
            return anime.random(1,7);
        },
    });
}

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

const container = document.querySelector('.container');
- バルーン要素を格納するコンテナを取得します。HTML 内の .container 要素に対応します。
function createBalloon(className) { ... }:
- createBalloon 関数は、指定されたクラス名を持つバルーン要素をコンテナに作成するための関数です。
- ループを使用して、100 個のバルーン要素を作成し、それぞれに指定されたクラス名とアイコンクラスを追加します。
- これにより、コンテナ内に複数の色と形のバルーンが作成されます。
createBalloon('blue'); createBalloon('red'); ...:
- 各色のバルーン要素を作成します。関数 createBalloon に各色のクラス名を渡して呼び出します。
function animateBalloons(className) { ... }:
- animateBalloons 関数は、指定されたクラス名を持つバルーン要素のアニメーションを設定するための関数です。
- Anime.js ライブラリを使用してアニメーション効果を設定します。
- targets: .${className} によって、指定されたクラス名を持つバルーン要素がアニメーションの対象となります。
- duration にはアニメーションの継続時間をミリ秒単位で指定します。
- delay: anime.stagger(40) によって、各要素のアニメーション開始時間がスタッガードされます。
- translateX, translateY は、ランダムな位置への移動を指定します。
- scale は、ランダムなスケールを指定します。
animateBalloons('blue'); animateBalloons('red'); ...:
- 各色のバルーン要素に対して、アニメーションを設定します。関数 animateBalloons に各色のクラス名を渡して呼び出します。