CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

マテリアルデザイン風のリップルエフェクトボタンをjQueryで実装する


リップルエフェクトとは?

クリック(タップ)した場所から、波紋の様に広がる効果(エフェクト)。
Googleが提供する公式のマテリアルデザインフレームワークMaterial Design Liteで使われています。

こんな感じ ▼

Push me!

カッコいい!リンクボタンだけ使いたい

Material Design Liteはカッコいいけど、既存サイトへの組み込みは難しい。
そこで、リップルエフェクトボタンだけ実装します。

HTML
CSS
JavaScript
(このコードの前にjQueryを組み込んでください)

概要

1.クリック(タップ)位置を取得
2.エフェクト用の円形div要素を生成する
3.取得した位置にボタンの子要素として配置
4.その位置を中心にanimateで要素を拡大
5.アニメーションが終わるまで待って、
6.ボタンdivのdata-hrefからリンク先を取得しページ遷移

使い方

HTML
リンク先はdiv.rippleButtonのdata-href=”リンク先URL”に入力します。

CSS
ボタンのデザインはお好みで。

JavaScript
頭の変数内容を変えることでカスタマイズ可能です。

関連記事
BACK TO TOP