【JavaScriptアニメ】タイトルの周りに動く枠線を作る方法

URLをコピーしました！

suzuto

JavaScriptアニメを使った動く枠線を作ります！

こんにちは、suzutoです。

今回はJavaScriptを使って見出しの周りの枠線を動かすアニメーションの作り方を解説していきたいと思います。

実際に作るコードはこちらです。

See the Pen 枠線を動かす by スズキトシヤ (@agpslbps-the-styleful) on CodePen.

こんな感じでアニメーションをつけていきます。

すごく簡単にできますのでぜひ試してみてください。

本記事の内容

動く枠線の作り方

作り方としては、大きな箱をつくりその中に「タイトル」と「枠線（spanタグ）」を作ります。そして「枠線（spanタグ）」をタイトルの周りに広げて角のまるみをアニメーションさせることにより実装させます。

HTML

まずはHTMLから書いていきます。

コードは以下の通りです。

<div class="box-wrapper">
        <div class="box">
            <h3>動く枠線</h3>
            <span></span>
        </div>
    </div>

全体の大きさを決める「box-wrapper」というクラス名で大枠を作ります。その中に「box」という箱をつくってください。

タイトル（h2）と枠線（span）を中に作って完了です。

CSS

次にCSSです。コードは以下の通りになります。

.box-wrapper {
            width: 200px;
            height: 200px;
            /* background-color: #888; */
            display: flex;
            align-items: center;
            justify-content: center;

            > .box {
                width: 100px;
                height: 100px;
                /* background-color: rgb(212, 112, 112); */
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                > span {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    border: 3px solid #43648f;
                }
            }
        }

わかりやすいようにネスト（入れ子）で書いています。

まず大枠の「box-wrapper」の大きさを決めます。今回は幅と高さを「200px」くらいに設定しました。

display: flex;
align-items: center;
justify-content: center;

中の要素を中央配置したいため、親の「box-wrapper」に対してフレックスで中央寄せにします。

これで中の要素はど真ん中に配置されます。

要素の幅がわかりにくい時は、CSSで「仮の背景色（background-color）」をつけておくと分かりやすいです。
あとで消すのを忘れずに。

さらに内側に作った「box」の幅と高さを「100px」として、同様にフレックスで中の要素を中央揃えにします。

ここからがポイントで、中に作った子要素の「span」を「box」の大きさに広げます。

position: absolute;
width: 100%;
height: 100%;
border: 3px solid #43648f;

「span」の幅と高さを「100％」にして「position: absolute;」で配置すると、「box」の枠にぴったり枠線ができます。

JavaScript

最後にJavaScriptでアニメーションを作っていきます。

コードは以下の通りです。

const spans = document.querySelector('.box span');
        
        spans.animate(
            {
            borderRadius: [
                "71% 29% 32% 68% / 30% 30% 70% 70%",
                "24% 76% 32% 68% / 76% 30% 70% 24% ",
                "56% 44% 57% 43% / 32% 55% 45% 68% "
            ]
            },
            {
                iterations: Infinity,
                direction: "alternate",
                duration: 2000,
            }
            
        );

まずは「querySelector」で「span」要素を取得します。

span要素に対して、「borderRadius」でアニメーションをつけていきます。

ボーダーの動きに関しては以下のサイトで形を決められるので参考にしてみてください。

面白い形のボーダーをテストできるサイト
>> Faccy Border Radius Generator

３つほど値をきめて貼り付けてみてください。

さらに、アニメーションのオプションを設定していきます。

iterations: Infinity,　→アニメーションを永続ループさせる
direction: “alternate”,　→アニメーションの「行って戻って」の処理
duration: 2000,　→2秒かけてアニメーションさせる

今回は上記のような感じで枠線をアニメーションさせてみました。

JavaScriptの「animate関数」は、以下のように使います。

animate(アニメーション内容, オプション)

第1引数→ アニメーション内容
第2引数→オプション

これで全体のコードは完成です。