SCSSで疑似Ripple Effectを実装する

まずRipple Effect（リップルエフェクト）とは？

ReactやVueを用いたプロダクトでよく見る、クリックすると波紋（Ripple）が拡がるように見えるエフェクトで、マイクロインタラクションとして機能し、

• クリックした
• 押し込んでいる
• クリックが終わった

を視覚的に伝えることができます。これは、UXデザインの文脈でいえば、「ニールセンの10のヒューリスティクス」の#1「システム状況の可視化」を効果的に実装することができます。

先述のように、ReactやVue、Angularといった、UI部分にも大きくタッチするフレームワークやライブラリでは比較的簡単に実装できますが、Webのプロダクトは上記以外のフレームワークをメインとしているケースも少なからずあります。今回ご紹介するのは、そういった場合に、SCSS（SASS）のみで擬似的にリップルエフェクトを実装する手段です。

SCSSでの実装方法

has-pseudo-ripple-effectクラスがついたときに、その部分をクリックするとリップルエフェクトが走る、という方針で実装します。

また、下記では、平文のフォントの色（$your-font-color）を透過させたものがリップルの色になります。#353535の部分を書き換えたりすれば簡単に色を変えられます。

// リップルカラーの定義
$your-font-color: #353535;

@function color-Convert-Hex-to-RGB($value:$your-font-color) {
    @return (red($value),
        green($value),
        blue($value));
}

// クラス定義
.has-pseudo-ripple-effect {
    outline: 2px solid transparent;
    outline-offset: -4px;
    background-color: transparent;
    transition-property: outline background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    position: relative;
    z-index: 1;

    &::after {
        content: "";
        position: absolute;
        background-color: transparent;
        width: 100%;
        height: 100%;
        border-radius: 45%;
        transition-property: border-radius background-color transform;
        transition-duration: 0.2s;
        transition-timing-function: ease-in;
        top: 0;
        left: 0;
        pointer-events: none;
        transform: scale(0.9);
        z-index: -1;
    }

    &:hover {
        outline-color: rgba(#{color-Convert-Hex-to-RGB()}, 0.2);
        background-color: rgba(#{color-Convert-Hex-to-RGB()}, 0.2);
    }

    &:active {
        outline-width: 4px;
        outline-color: rgba(#{color-Convert-Hex-to-RGB()}, 0.6);
        background-color: transparent;
        overflow: hidden;

        &::after {
            overflow: hidden;
            border-radius: 0;
            background-color: rgba(#{color-Convert-Hex-to-RGB()}, 0.6);
            mix-blend-mode: multiply;
            transform: scale(1);
        }

    }

}

実装イメージ

弱点

まんまるボタンなどに適用すると絶妙にキモい挙動になります。これは対応方法を探している途中なので、現段階では使い所を選んでご使用ください。直せたら追記します。