【CSS+JS】クリックで丸い円が画面全体に広がるアニメーション

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSとJavaScriptで、要素をクリックすると丸い円が画面全体に広がるアニメーションの作り方をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

丸い円が広がるアニメーションの作り方

丸い円が画面上に広がるアニメーションは、予め丸い要素を用意しておき、それにtransformのscaleを指定することで実現することができます。

HTML

<div class="circle"></div>

CSS

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #384878;
    transition: 1s;
}

これで画面上に丸い要素を設置することができます。実際にはposition等で要素に重ねる形で置いたり、flexで横並びで使用することになると思います。

今回は要素をクリックしたタイミングで丸い円が画面上に広がるようにしたいので、クリックイベントが発火した際に追加するclassを用意します。

.circle.is-animated {
    transform: scale(100);
}

これでHTMLとCSSの準備は完了です。最後にJavaScriptでクリックイベント発火時にclassを付与する処理を作っていきます。

クリックイベント発火時にclassを付与する

では最終仕上げです！下記の処理を追加して、本記事の内容は完了です。

JavaScript

const circle = document.querySelector('.circle');
const addClass = ()=>{
    circle.classList.toggle('is-animated');
}

circle.addEventListener('click',addClass ,false);

実装すると下記のデモのような動きになります。デモ右上の丸い要素をクリックすると、円が画面全体に広がるので試してみてください。

See the Pen by ryohei (@intotheprogram) on CodePen.

上記のデモでは、丸い円が画面全体に広がるだけの動きしかないですが、実際にはこの丸い円の上にメニューやコンテンツを重ねて表示することになります。上に重ねるコンテンツをフェードやスライドのようなアニメーションを付けるなど、工夫次第で色々な見せ方ができそうですね！

最後に

CSSでスタイルを準備してJSでトリガーだけ実装する方法は、切り分けができますし、何よりブラウザの負担が軽く済むので良い方法です。本記事の内容を応用として世界に一つだけのアニメーションを作ってくださいね！

以上、CSSとJavaScriptでクリックすると丸い円が画面全体に広がるアニメーションの作り方のご紹介でした！