Javascriptによるアニメーション作成

anime.jsを使用したアニメーション作成

アニメーションサイトGit共有リンク
https://github.com/ayaka0525/anime/tree/main

anime.jsをサイトで検索して、anime.min.jsのRawをクリックし名前をつけて保存。
自分の作成しているhtml,cssなどと同じ階層に入れたら使えるようになる。

htmlのscript手前で読み込み

 <script src="anime.min.js"></script>

javascriptはhtmlのbodyに直接記述した。
先ほど読み込みをしたanimateBlocksを使用している。

 <script>
        // ".container" クラスの要素を取得
        const container = document.querySelector(".container");
        
        // ループを使って50個のブロック要素を作成して追加
        for (var i = 0; i <= 50; i++) {
            const blocks = document.createElement("div"); // 新しいdiv要素を作成
            blocks.classList.add("block"); // 作成した要素に"block"クラスを追加
            container.appendChild(blocks); // コンテナにその要素を追加
        }
        
        // ブロックをアニメーションさせる関数
        function animateBlocks() {
            anime({
                targets: ".block", // "block"クラスを持つすべての要素が対象
                // translateX: X軸にランダムに移動させる
                translateX: function() {
                    return anime.random(-800, 700); // -800から700までの範囲でランダムに移動
                },
                // translateY: Y軸にランダムに移動させる
                translateY: function() {
                    return anime.random(-500, 700); // -500から700までの範囲でランダムに移動
                },
                // scale: ランダムにブロックのサイズを変更
                scale: function () {
                    return anime.random(1, 3); // 1倍から3倍の間でランダムにスケール変更
                },
                duration: 2500, // アニメーションの継続時間を2500ミリ秒（2.5秒）に設定
                delay: anime.stagger(15), // 各要素のアニメーションの開始を15msずつ遅らせる
                complete: animateBlocks, // アニメーション完了後、再度同じ関数を実行（無限ループでアニメーションを繰り返す）
            });
        }
    
        // アニメーションを開始
        animateBlocks();
    
    </script>

参照YOUTUBEサイト

お疲れ様でした！