リップルエフェクトボタン

波紋が広がるリップルエフェクトボタンの作り方（CSS・Javascript）を参考に jQuery にしてリップルエフェクトボタンをやってみました。

ripple-effect.js

// クラス名rippleの要素を取得
var ripples = $('.ripple');

// クラス名rippleの要素があるかの判定
if ( ripples[0] ) {

    // クリックされた際の処理
    ripples.on('click', function(event) {
        offset = $(this).offset(); // 絶対座標の取得
        w      = $(this).outerWidth(); // 要素の幅を取得
        x      = event.pageX - offset.left - (w / 2);　// リップルの要素の X 座標を設定
        y      = event.pageY - offset.top - (w / 2);　// リップルの要素の Y 座標を設定
        // リップルの要素を設定
        html   = $('<span>').css({
            'top'    : y,
            'left'   : x,
            'width'  : w,
            'height' : w
        }).addClass('rp-effect').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            // css の animation が終わったら各リップルの要素を削除
            $(this).remove();
        })
        // リップルの要素を追加
        $(this).append(html);
    });
}

後は参考サイトの、CSS と HTML を参考に作っていけば終わりです。