ボタンをホバーするとキラキラが発生するエフェクトの実装方法【JavaScript & CSS】
ボタンをホバーするとキラキラが発生するエフェクトの実装方法【JavaScript & CSS】

ボタンをホバーするとキラキラが発生するエフェクトの実装方法【JavaScript & CSS】

ボタンをホバーするとキラキラが発生するエフェクトの実装方法【JavaScript & CSS】 2021 5/27 JavaScript 2021年5月1日2021年5月27日

CSSとJavaScriptを使用して、ホバーするとキラキラが発生するエフェクトを作成しました。

以下のボタンにマウスカーソルを当ててみてください。

Hover Me Hover Me

ボタンのエリアにキラキラのエフェクトが表示されるのが確認できたかと思います。

CSSと素のJavaScriptで実装する方法を紹介していきますので、ぜひ参考にしてみてください。

目次

【コピペ用】キラキラが発生するエフェクトの実装コード

まずは全体の実装コードと画像ファイルを用意したので、コピペしてお使いください。

index.html style.css script.jsを作成し、それぞれのコードを貼り付けると使用できます。

キラキラ部分の画像は、以下のリンクからダウンロードしてください。

キラキラの画像をダウンロード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ホバーするとキラキラが発生するエフェクトのDEMO</title> <!-- CSS読み込み --> <link rel="stylesheet" href="style.css" /> </head> <body> <a href="リンクを記入" class="btn js-glitter">Hover Me</a> <!-- JS読み込み --> <script src="script.js"></script> </body> </html> /* ボタン本体 */ .btn { position: relative; /* static以外を指定 */ display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; border-radius: 100px; background-color: #6cc7f4; color: #fff; font-family: "Signika"; font-size: 1.2em; font-weight: bold; transition: all 0.3s; cursor: pointer; } /* ボタンホバー時 */ .btn:hover { background-color: #fff; color: #6cc7f4; box-shadow: 0 0 20px 0 rgba(108, 199, 244, 0.5); } /* キラキラ部分 */ .star { position: absolute; display: block; width: 10px; /* キラキラの横幅を指定 */ height: 10px; /* キラキラの縦幅を指定 */ background-image: url("star.svg"); /* キラキラの画像のパスを記入 */ background-size: contain; background-repeat: no-repeat; background-position: center center; animation: glitter 1s; pointer-events: none; } /* キラキラが発生するアニメーション */ @keyframes glitter { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } // js-glitterクラスがついた要素を全て取得 const glitterEls = document.querySelectorAll(".js-glitter"); // 取得した要素をArrayに変換 const glitterElsArr = Array.prototype.slice.call(glitterEls); // 取得した要素ひとつひとつに処理を行う glitterElsArr.forEach((glitterEl) => { let interval; // マウスホバー時にキラキラを生成 glitterEl.addEventListener("mouseenter", () => { interval = setInterval(createStar.bind(undefined, glitterEl), 200); }); // マウスを離すと停止 glitterEl.addEventListener("mouseleave", () => { clearInterval(interval); }); }); // キラキラを生成する関数 const createStar = (el) => { const starEl = document.createElement("span"); starEl.className = "star"; starEl.style.left = Math.random() * el.clientWidth + "px"; starEl.style.top = Math.random() * el.clientHeight + "px"; el.appendChild(starEl); // 一定時間経つとキラキラを消す setTimeout(() => { starEl.remove(); }, 1000); };

上記のコードをコピペするだけで、ホバー時にキラキラが発生するボタンが実装できたかと思います。

もしキラキラが表示されない場合は、画像のパスが正しいかどうか確認してみてください。

.star { background-image: url("star.svg"); /* キラキラの画像のパスを記入 */ }

CSSの上記の部分でパスを指定しています。

次からはコードの解説やカスタマイズ方法などを紹介していきますので、気になる方は読んでみてください。

【解説】キラキラが発生するエフェクトの実装コードの解説

ここでは実装コードの解説をしていきます。

  1. HTMLでボタン要素を作成する
  2. CSSでボタンの装飾とアニメーションを指定する
  3. JavaScriptでキラキラを発生させる

上記の順番で説明していきますね。

HTMLでボタン要素を作成する

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

ここではリンクボタンを想定して、aタグで実装しています。

<a href="リンクを記入" class="btn js-glitter">Hover Me</a>

ボタンのスタイルを指定するためのbtnクラス、JavaScriptで操作するためのjs-glitterクラスを付与します。

次にhref属性にリンク先のURLを記入することで、リンク付きボタンの完成です！

aタグ以外のHTMLタグでも実装可能

DEMOではaタグを使用しましたが、他のHTMLタグでも実装可能です。

buttonタグで実装する場合 Hover Me Hover Me <button type="button" class="btn js-glitter">Hover Me</button> pタグで実装する場合

pタグで作成した文章でもキラキラが発生するエフェクトを実装可能です。このテキスト上にマウスカーソルを当てて確認してみてください。

<p class="js-glitter">ここにテキストを入れてください。</p>

以上でHTMLの解説は終わりです！

CSSでボタンの装飾とアニメーションを指定する

続いてはCSSでボタンの装飾と、星の画像がキラキラ光るようなアニメーションを指定していきます。

/* ボタン本体 */ .btn { position: relative; /* static以外を指定 */ display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; border-radius: 100px; background-color: #6cc7f4; color: #fff; font-family: "Signika"; font-size: 1.2em; font-weight: bold; transition: all 0.3s; cursor: pointer; } /* ボタンホバー時 */ .btn:hover { background-color: #fff; color: #6cc7f4; box-shadow: 0 0 20px 0 rgba(108, 199, 244, 0.5); } /* キラキラ部分 */ .star { position: absolute; display: block; width: 10px; /* キラキラの横幅を指定 */ height: 10px; /* キラキラの縦幅を指定 */ background-image: url("star.svg"); /* キラキラの画像のパスを記入 */ background-size: contain; background-repeat: no-repeat; background-position: center center; animation: glitter 1s; pointer-events: none; } /* キラキラが発生するアニメーション */ @keyframes glitter { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

こちらがCSSの全体像です。

  1. ボタン本体のスタイル
  2. キラキラ部分のスタイル
  3. キラキラが発生するアニメーション

上記の3つに分けて説明していきますね。

CSS1. ボタン本体のスタイル /* ボタン本体 */ .btn { position: relative; /* static以外を指定 */ display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; border-radius: 100px; background-color: #6cc7f4; color: #fff; font-family: "Signika"; font-size: 1.2em; font-weight: bold; transition: all 0.3s; cursor: pointer; } /* ボタンホバー時 */ .btn:hover { background-color: #fff; color: #6cc7f4; box-shadow: 0 0 20px 0 rgba(108, 199, 244, 0.5); }

ボタン本体と、ボタンをホバーした時のスタイルです。

ここでの必須プロパティは2つだけで、それ以外は自由にカスタマイズすることが可能なので、重要な箇所のみ説明します。

ボタン要素のスタイルで、必要なのは以下の2つです。

  • positionプロパティの値をstatic以外にする
  • displayプロパティの値をinline以外にする

まずはpositionプロパティから説明していきますね。

キラキラ部分の要素は、position: absoluteで絶対位置を指定します。

そのため、親要素であるボタンにはposition: static以外を指定しておく必要がありますね。

次にdisplayプロパティについてですが、値がinlineだとJavaScriptで横幅と縦幅をうまく取得できません。

そうなるとキラキラの発生場所が左上に固定されてしまい、ランダム表示させることができなくなるので、必ずinline以外を指定してください。

aタグやspanタグはデフォルトでinlineになっていることがあるので、特に注意してくださいね。

この2つのルールさえ守れば、どんなHTMLタグにもキラキラが発生するエフェクトを実装することが可能です！

この部分以外は自由にカスタマイズすることが可能なので、ここでは解説しません。

  • positionプロパティの値をstatic以外にする
  • displayプロパティの値をinline以外にする

ボタン本体のスタイルを指定する際は、このルールだけ守ればOKです。

CSS2. キラキラ部分のスタイル /* キラキラ部分 */ .star { position: absolute; display: block; width: 10px; /* キラキラの横幅を指定 */ height: 10px; /* キラキラの縦幅を指定 */ background-image: url("star.svg"); /* キラキラの画像のパスを記入 */ background-size: contain; background-repeat: no-repeat; background-position: center center; animation: glitter 1s; pointer-events: none; }

続いては、キラキラ部分の星の要素のスタイルです。

まず星の位置指定には、position: absoluteを使用します。

これで親要素を基準にキラキラの発生場所を指定できるようになりました。

leftとtopに入れる値はJavaScriptで取得するので、CSSでは指定しなくてOKです。

キラキラの大きさの調整は、widthとheightに値を指定します。

大きすぎると文字が隠れて読めなくなってしまうので、10px ~ 15pxあたりが良いかと思います。

キラキラの部分はsvg画像を使用するので、backgroundプロパティで指定していきます。

.star { background-image: url("star.svg"); /* キラキラの画像のパスを記入 */ background-size: contain; background-repeat: no-repeat; background-position: center center; }

url("")の中には、画像のパスを記入します。

ここが間違っているとキラキラが表示されないので、注意してください。

最後にキラキラが発生するアニメーションを指定したいので、以下の記述をします。

animation: glitter 1s;

このコードは、glitterという名前のアニメーションを1秒かけて実行するという意味になります。

glitterの中身は次で説明していきます。

CSS3. キラキラが発生するアニメーション /* キラキラが発生するアニメーション */ @keyframes glitter { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

こちらがアニメーションglitterの中身です。

0%の時点では、transform: scale(0)とopacity: 0がかかっているので、キラキラ部分が見えない状態ですね。

その後50%時点までキラキラを徐々に表示していき、100%になるにつれて徐々に小さく＆透明にするという指定をしています。

もう一度DEMOを確認してみましょう。

Hover Me Hover Me

キラキラが徐々に大きくなり、一定時間を超えると徐々に小さくなるのが確認できましたね。

これでキラキラ部分が発生する際のアニメーションは完成です。

JavaScriptでキラキラを発生させる

最後に、JavaScriptを見ていきましょう。

// js-glitterクラスがついた要素を全て取得 const glitterEls = document.querySelectorAll(".js-glitter"); // 取得した要素をArrayに変換 const glitterElsArr = Array.prototype.slice.call(glitterEls); // 取得した要素ひとつひとつに処理を行う glitterElsArr.forEach((glitterEl) => { let interval; // マウスホバー時にキラキラを生成 glitterEl.addEventListener("mouseenter", () => { interval = setInterval(createStar.bind(undefined, glitterEl), 200); }); // マウスを離すと停止 glitterEl.addEventListener("mouseleave", () => { clearInterval(interval); }); }); // キラキラを生成する関数 const createStar = (el) => { const starEl = document.createElement("span"); starEl.className = "star"; starEl.style.left = Math.random() * el.clientWidth + "px"; starEl.style.top = Math.random() * el.clientHeight + "px"; el.appendChild(starEl); // 一定時間経つとキラキラを消す setTimeout(() => { starEl.remove(); }, 1000); };
  • キラキラを発生させる要素を取得
  • ホバー時とホバー終了時の動作を指定
  • キラキラを生成する関数を定義

上記の3つのパートに分けて解説していきます！

JavaScript1. キラキラを発生させる要素を取得

まず最初に、キラキラを発生させる要素を全て取得します。

HTMLパートで、ボタン要素にjs-glitterというクラスを付与しましたね。

このクラスがついた要素をquerySelectorAllで全て取得して、変数glitterElsに格納します。

const glitterEls = document.querySelectorAll(".js-glitter");

このとき、querySelectorAllで取得した要素はNodeListという型になるので、一部のブラウザでは次で使用するforEachメソッドを使用することができません。

そのため、NodeListをArrayに変換するために、以下の記述をします。

const glitterElsArr = Array.prototype.slice.call(glitterEls);

これで、次で使用するforEachメソッドをどのブラウザでも動作させることが可能になりました。

JavaScript2. ホバー時とホバー終了時の動作を指定 // 取得した要素ひとつひとつに処理を行う glitterElsArr.forEach((glitterEl) => { let interval; // マウスホバー時にキラキラを生成 glitterEl.addEventListener("mouseenter", () => { interval = setInterval(createStar.bind(undefined, glitterEl), 200); }); // マウスを離すと停止 glitterEl.addEventListener("mouseleave", () => { clearInterval(interval); }); });

ここでは、ホバー時とホバー終了時の動作を指定していきます。

まず取得したすべての要素ひとつひとつに対して処理をするために、forEachメソッドを使用します。

glitterElsArr.forEach((glitterEl) => { // ... }

これで{}内のコードが、全ての要素に適用されるようになりましたね。

この{}内には、ホバーした時・ホバーを解除した時の指定をします。

これらには、以下の2つのイベントを使用します。

  • mouseenter…マウスカーソルが要素の領域に入ったとき
  • mouseleave…マウスカーソルが要素の領域から出たとき
let interval; // マウスホバー時にキラキラを生成 glitterEl.addEventListener("mouseenter", () => { interval = setInterval(createStar.bind(undefined, glitterEl), 200); }); // マウスを離すと停止 glitterEl.addEventListener("mouseleave", () => { clearInterval(interval); });

ホバー時にはsetIntervalを使用して、0.2秒ごとにキラキラを生成する関数createStarを呼び出します。

ホバーを解除すると、clearIntervalでタイマーを停止させ、キラキラの生成をストップさせます。

これでホバー時・ホバー解除時の動作は終わりです。

JavaScript3. キラキラを生成する関数を定義

最後に、キラキラを生成する関数createStarの中身を見ていきましょう。

const createStar = (el) => { // ①spanタグを生成 & 'star'クラスを付与 const starEl = document.createElement("span"); starEl.className = "star"; // ②親要素のサイズを基準にleftとtopにランダムな数値を指定 starEl.style.left = Math.random() * el.clientWidth + "px"; starEl.style.top = Math.random() * el.clientHeight + "px"; // ③完成したキラキラを親要素に挿入 el.appendChild(starEl); // ④一定時間経つとキラキラを消す setTimeout(() => { starEl.remove(); }, 1000); };

この関数内では、以下の4つのことが起こっています。

  1. spanタグを生成 & starクラスを付与
  2. 親要素のサイズを基準にleftとtopにランダムな数値を指定
  3. 完成したキラキラを親要素に挿入
  4. 一定時間経つとキラキラを消す

順番に解説していきますね。

①spanタグを生成 & starクラスを付与

まずはキラキラ本体の要素を作成していきます。

const starEl = document.createElement("span"); starEl.className = "star";

createElementでspanタグを生成して、さらにstarというクラスをつけます。

CSSパートで、starクラスに対してキラキラ部分の装飾をしましたね。

.star { position: absolute; display: block; width: 10px; height: 10px; background-image: url("star.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; animation: glitter 1s; pointer-events: none; }

上記のスタイルが、キラキラ要素に適用されることになります。

②親要素のサイズを基準にleftとtopにランダムな数値を指定

CSSでは、starクラスに対してposition: absoluteを指定しましたね。

しかしleftとtopは親要素のサイズを基準にランダムに指定したいので、以下のコードを記述します。

starEl.style.left = Math.random() * el.clientWidth + "px"; starEl.style.top = Math.random() * el.clientHeight + "px";

clientWidthとclientHeightは、paddingを含む要素の横幅・高さを返すプロパティです。

この数値とMath.random()を掛け合わせることで、0~親要素の横幅、0~親要素の縦幅の中からランダムな数値を取得することができます。

これらをstyle属性に直接書き加えることで、キラキラが発生する場所をランダムに指定しているというわけですね。

③完成したキラキラを親要素に挿入

キラキラの要素が完成したので、あとは親要素に追加するだけです。

el.appendChild(starEl);

appendChildで、生成されたキラキラを親要素に追加します。

このとき、キラキラにはanimation: glitter 1sをCSSで指定しているので、1秒間で拡大しながら発生し、縮小しながら消えていくアニメーションが実行されます。

④一定時間経つとキラキラを消す

アニメーションが終了すれば、もうDOMに残しておく必要はないので、removeメソッドでキラキラを取り除きます。

setTimeout(() => { starEl.remove(); }, 1000);

glitterアニメーションは1秒で完了するので、1秒後に削除するよう指定します。

これでJavaScriptの解説は終わりです！

キラキラが発生するエフェクトのカスタマイズ方法

ここでは、いくつかのカスタマイズ方法を紹介しておきます。

  1. キラキラの大きさを変える
  2. キラキラが発生する頻度を変える
  3. アニメーションの持続時間を変える
  4. キラキラの色を変える

もし今回紹介したコードをカスタマイズしたい場合は、ぜひ参考にしてみてください。

これ以外にもカスタマイズしたい箇所があれば、コメント欄にて受け付けていますので、気軽にご連絡ください。

キラキラの大きさを変える

キラキラのサイズは、CSSで調整することが可能です。

.star { position: absolute; display: block; width: 10px; /* キラキラの横幅を指定 */ height: 10px; /* キラキラの縦幅を指定 */ background-image: url("star.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; animation: glitter 1s; pointer-events: none; }

starクラスのwidthとheightにサイズを記入してください。

キラキラが発生する頻度を変える

「キラキラの量を増やしたいor減らしたい」という場合は、JavaScriptを編集します。

glitterEl.addEventListener("mouseenter", () => { interval = setInterval(createStar.bind(undefined, glitterEl), 200); });

setIntervalの引数の200となっている箇所の数値を調整してください。

デフォルトでは、200ms = 0.2秒ごとに発生するように設定しています。

この数値を大きくすれば発生間隔が長くなる = キラキラの数が少なくなり、反対に数値を小さくすればするほどたくさんのキラキラが生成されるようになります。

アニメーションの持続時間を変える

キラキラが発生してから消えるまでの時間を指定するには、CSSとJavaScript両方に変更を加える必要があります。

.star { animation: glitter 1s; } setTimeout(() => { starEl.remove(); }, 1000);

CSSでアニメーションの実行時間を指定できるので、1sの部分の数値を調整してください。

この時、JavaScriptの該当箇所にも同じ数値を指定する必要があります。

もしanimationの持続時間を2sにするなら、JavaScriptには2000を指定してください。

こうすることで、アニメーションが最後まで完了してからキラキラを削除することができます。

キラキラの色を変える

キラキラの色を変えたい場合は、svgファイルを編集します。

まだキラキラの画像をダウンロードしていない場合は、以下のリンクからダウンロードしてください。

キラキラの画像をダウンロード

star.svgファイルをエディタで開くと、以下のようなコードが記述されています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101.154 101.154"><defs><style>.star-svg{fill:#6cc7f4;}</style></defs><path class="star-svg" d="M50.577,0l4.458,13.179A52.549,52.549,0,0,0,87.976,46.12l13.178,4.457L87.976,55.035A52.545,52.545,0,0,0,55.035,87.976l-4.458,13.178L46.12,87.976A52.549,52.549,0,0,0,13.179,55.035L0,50.577,13.179,46.12A52.554,52.554,0,0,0,46.12,13.179Z"/></svg>

このコード内の以下の箇所に、好きなカラーコードを記入してください。

<style>.star-svg{fill:#6cc7f4;}</style>

#6cc7f4となっている箇所に色を記入してファイルを保存すると、キラキラの色を変更することが可能です。

【まとめ】ボタンをホバーするとキラキラが発生するアニメーションを実装する方法

Hover Me Hover Me

ボタンにマウスカーソルを当てると、キラキラがランダムに発生するアニメーションを実装してみました。

「ボタンにホバーアニメーションをつけたい」という方は、ぜひ今回紹介したアニメーションを実装してみてください。

記事が役に立ったらサポートしてください

Web制作のメンターをお探しですか？

Web制作の学習&お悩み解決をサポートするメンターサービスを開始しました。

Web制作を学びたい方は、ぜひMENTAからご相談ください！

MENTAで相談する JavaScript ボタン キラキラ ホバーアニメーション よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
📎📎📎📎📎📎📎📎📎📎
BOT