anime.jsでripple effect(波紋効果)を作ってみたよ

こんにちは！

プログラム学習中のdynaです！

この記事は anime.jsの公式サイトに載っているページを少しアレンジしてデモで作成した内容 になります。

デモはこちら↓

表示されている丸をクリックすると、動きます。

See the Pen ripple effect(波紋効果)　anime.js by dyna (@sakudyna) on CodePen.

公式サイトはこちら ⇒ https://animejs.com/documentation/

日本語版はこちら ⇒ https://tr.you84815.space/animejs/staggering.html

1. anime.jsって？
2. コード
3. HTMLで表示部分を作成
4. JavaScriptで丸を描く
5. anime.jsの値を設定する
6. おまけ

anime.jsって？

JavaScriptのアニメーションライブラリです。

軽いファイルで面白いアニメーションがたくさん使えます。

公式サイトからDLしてJSファイルを読み込めば使用できます。

面白いアニメーションがたくさん！

コード

コードを記載します。

HTMLは自分のローカル環境に作った場合です。


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>サンプル</title>
        <link rel="stylesheet" href="anime.css">
        <script type="text/javascript" src="./js/anime.min.js"></script>
        <script type="text/javascript" src="./js/sampleAnime.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <div class="el"></div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>


body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(23, 22, 87);//背景色
}

.wrapper{
    width: 300px;//サイズ
    height: 300px;
}

.el{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.item{
    width: 20px;
    height: 20px;
    margin: 1px;
　　border-radius: 50% 50% 50% 50%;　//丸に表示する
    background:radial-gradient(#78b3ff,rgb(47, 45, 161));//丸の色 
}

body{

width: 100%;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: rgb(23, 22, 87);//背景色

}

.wrapper{

width: 300px;//サイズ

height: 300px;

}

.el{

position: relative;

display: flex;

flex-wrap: wrap;

width: 100%;

height: 100%;

}

.item{

width: 20px;

height: 20px;

margin: 1px;

　　border-radius: 50% 50% 50% 50%;　//丸に表示する

background:radial-gradient(#78b3ff,rgb(47, 45, 161));//丸の色

}


//.elを取得
    const el = document.querySelector('.el');
    //破片を作成
    const fragment = document.createDocumentFragment();


    //156個のdivを作成
    for (let i = 0; i < 156; i++) {
        let el_item = document.createElement('div');
        el_item.classList.add('item');

        fragment.appendChild(el_item);
    }

    el.appendChild(fragment);

el.addEventListener('click',function(){
    anime({
        targets: '.item',
        scale: [
            {
            value: .1,
            easing: 'easeOutSine',
            duration: 500
            },
            {
            value: 1,
            easing: 'easeInOutQuad',
            duration: 1200
            }
        ],
       // loop: true,
        //列、行
        delay: anime.stagger(100, {grid: [13, 12], from: 'center'})
    });
})

//.elを取得

const el = document.querySelector('.el');

//破片を作成

const fragment = document.createDocumentFragment();

//156個のdivを作成

for (let i = 0; i < 156; i++) {

let el_item = document.createElement('div');

el_item.classList.add('item');

fragment.appendChild(el_item);

}

el.appendChild(fragment);

el.addEventListener('click',function(){

anime({

targets: '.item',

scale: [

{

value: .1,

easing: 'easeOutSine',

duration: 500

{

value: 1,

easing: 'easeInOutQuad',

duration: 1200

}

// loop: true,

//列、行

delay: anime.stagger(100, {grid: [13, 12], from: 'center'})

});

})

HTMLで表示部分を作成

HTMLの以下の部分で、表示物を作成する部分を記載します。


 <div class="wrapper">
     <div class="el"></div>
 </div>