【JavaScript】バルーンアニメーション(Anime.js)風船が上昇するアニメーション

2023年8月27日

この記事では、JavaScriptのライブラリ『Anime.js』を使って風船が上昇するアニメーションを実装するプログラミングコードを解説していきます。

完成形

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

ページの読み込みから少し待つと画面下側から風船がゆっくりと上昇していきます。

See the Pen js-07 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="css/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>:
- HTML5の文書型宣言です。
<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のCSSファイルを読み込んでいます。アイコンを使用するための準備をしています。
<link rel="stylesheet" href="css/style.css">:
- カスタムのスタイルシートファイルを読み込んでいます。自身で定義したスタイルを適用できます。
<title>バルーンアップアニメーション</title>:
- ページのタイトルを設定しています。
<body>:
- ページの本文が記述される部分です。
<div class="container"></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: 150%;
  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: 150%; 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 <= 150; 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: 200000,
        delay: anime.stagger(1000),
        loop: true,
        easing: 'easeOutCirc',
        translateX: function(){
            return anime.random(-100, 100) + 'vw';
        },
        translateY: function(){
            return anime.random(-200, -200) + 'vh';
        },
        scale: function(){
            return anime.random(1,7);
        },
    });
}

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

const container = document.querySelector('.container');
- .container クラスを持つ要素を取得しています。ここにアイコンが追加されます。
function createBalloon(className) { ... }:
- バルーンアイコンを生成するための関数です。引数 className はアイコンの色を示します。
- ループを使用して、アイコンを150個生成し、それぞれに指定された色とアイコンのクラスを設定しています。
- bi クラスと bi-balloon-fill クラスは、Bootstrap Icons ライブラリのアイコンを指定しています。
function animateBalloons(className) { ... }:
- バルーンアイコンをアニメーションさせるための関数です。引数 className はアニメーション対象のアイコンの色を示します。
- anime ライブラリを使用してアニメーションを設定します。
- targets で対象の要素を指定し、duration でアニメーションの継続時間を設定します。
- delay でアイコンごとに遅延を設定し、loop でアニメーションをループさせます。
- easing でアニメーションのイージングを指定し、translateX と translateY でランダムな移動を指定します。
- scale でランダムな拡大率を指定します。
createBalloon と animateBalloons 関数を呼び出し、各アイコンの色に対してアニメーションを開始します。