こんにちは、ファストコーディングのWebディレクタ、BigViです。今回はホバー時にちょっとした楽しさをプラスするリップルエフェクトについてお話しします。
お問い合わせボタンや、購入ボタンを目立たせる方法はいろいろあります。でも、クリックさせやすくする方法になると、このリップルエフェクトが一番いいと思います。複雑なコードを作らずに、シンプルな方法を見つけ出しましたので、今日はそれをJavaScriptで10行で実現する方法をご紹介します。
リップルエフェクトの魅力とは？
まず、リップルエフェクトがなぜ求められるのかについて考えてみましょう。ユーザーインターフェース（UI）のデザインは、ユーザーの満足度に大きな影響を与えます。クリック時のさりげない視覚効果は、ユーザーに楽しい体験をもたらします。
過去のプロジェクトでは、「もっとインタラクティブな要素を」というクライアントの要望に応えたところ、特にクリック時のリップルエフェクトは好評を博しました。この小さな工夫が、サイトの印象を大きく変える一因となったのです。
シンプルで軽快！手軽に作れるエフェクト
ポイントは、リップルエフェクトをとてもシンプルに作ることです。JavaScriptを駆使せず、軽量でコードの少ない形で実現可能です。
簡単なHTMLとCSS
まずは、ボタンを作ってみましょう。
<button class="ripple-button">Hover Me na!</button>
.ripple-button {
position: relative;
overflow: hidden;
/* 他のスタイル */
width: 200px;
height: 100px;
border: none;
}
.ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple 0.6s linear;
background-color: rgba(0, 0, 0, 0.7);
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
JavaScriptでリップルエフェクトを実装
次にJavaScriptでエフェクトを加えます。ホーバーの位置にリップルが広がります。
document.querySelector('.ripple-button').addEventListener('mouseenter', function(e) {
let circle = document.createElement("span");
circle.classList.add("ripple");
this.appendChild(circle);
let d = Math.max(this.clientWidth, this.clientHeight);
circle.style.width = circle.style.height = d + 'px';
circle.style.left = e.clientX - this.offsetLeft - d / 2 + 'px';
circle.style.top = e.clientY - this.offsetTop - d / 2 + 'px';
setTimeout(() => circle.remove(), 600);
});
コードはこれで終わりです。簡単ですね。
リップルエフェクトでクリック率があがりました。
あるeCommerceサイトのプロジェクトで、このリップルエフェクトを実装しました。製品紹介ページのクリック率が大幅に向上しました。ボタンにただの機能だけじゃなくて、エフェクトを加えたことでユーザーの興味を引き、クリック率は20%増加しました。
まとめ：試してみて、ボタンをもっと楽しく
すごく簡単なコードで、クリック率があがるんです。ぜひ、次のプロジェクトでこの10行のコードを試してみてください。
株式会社ファストコーディングでは、こうしたUIの提案や改善もサポートしています。もっと知りたい方は、こちらからお問い合わせください。
※本記事は弊社外国人スタッフによる投稿です。言い回しや表現が不十分な個所がありますことご容赦いただきますようお願いいたします。
株式会社ファストコーディング
