Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
98
Help us understand the problem. What is going on with this article?
@nekoneko-wanwan

クリックで波紋を出すエフェクト(Ripple Effect)実装メモ

More than 5 years have passed since last update.

はじめに

2014年に発表されたマテリアルデザインのアニメーションの一つとして、Ripple Effectという波紋が広がるような演出があります。今回cssとjsで実装してみたので、それのメモです。

<こんな感じ>
ripple.gif

実際の動き
http://nekoneko-wanwan.github.io/demo/mouse-action/click/
※cssのプレフィックスは書いていないので動かない環境もあります

html

  • div.rippleがクリック範囲の要素、spanがエフェクトの要素です。
  • ここではspanを直接書いていますが、jsの方でDOM生成しても良いかと思います。
ripple.html
<div class="ripple">
    <span class="ripple__effect is-orange"></span>
</div>

javascript

  • エフェクト要素をクリックした座標を中心とした位置に移動させます。
  • エフェクトのアニメーション自体はcssで表現しています。
  • エフェクトを発動させるためのclassを付け替えます。
ripple.js
$(function() {
    var $clickable = $('.ripple');

    /* mousedownだと直ぐに発動し、clickだとマウスボタンを離した時に発動する */
    $clickable.on('mousedown', function(e) {
        var _self   = this;
        var x       = e.offsetX;
        var y       = e.offsetY;

        var $effect = $(_self).find('.ripple__effect');
        var w       = $effect.width();
        var h       = $effect.height();

        /* クリックした座標を中心とする */
        $effect.css({
            left: x - w / 2,
            top: y - h / 2
        });

        /* jsではclassの付け替えをするだけ */
        if (!$effect.hasClass('is-show')) {
            $effect.addClass('is-show');

            /*
             * エフェクトアニメーションが終わったらclassを削除する
             * ここでは、単純にcssで設定するdurationと時間を合わせているだけですが
             * keyframes終了のイベント(AnimationEnd)が取れるかと思うので、それで対応した方が良いかも
             */
            setTimeout(function() {
                $effect.removeClass('is-show');
            }, 750);
        }
        return false;
    });

});

css

  • エフェクトアニメーションの設定を行ないます。

プレフィックスは省略しています

ripple.css
/* クリックできる要素 */
.ripple {
    /* エフェクトに直接関係はない */
    margin: 20px;
    background-color: #f7f7f7;
    height: 100px;
    width: 200px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;

    /* 必須 */
    overflow: hidden;
    position: relative;
}

/* エフェクト要素 */
.ripple__effect {
    /* 値の変更はエフェクト形体・サイズ・スピードに影響する */
    width: 150px;
    height: 150px;

    /* 必須 */
    position: absolute;
    border-radius: 100%;
    pointer-events: none;
    transform: scale(0);
    opacity: 0;
}

/* エフェクト要素の色を指定 */
.ripple__effect.is-orange { background: #f1c40f;}
.ripple__effect.is-blue   { background: #4aa3df;}
.ripple__effect.is-black  { background: #999;}

/* classが付与されたらアニメーションを実行 */
.ripple__effect.is-show {
    animation: ripple 0.75s ease-out;
}

/* アニメーションの定義 */
@keyframes ripple {
    from {
        opacity: 1;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}
98
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nekoneko-wanwan
Webデザイン、フロントエンド開発を主にやっています。真面目なものから、変なものまで。色々な記事を投稿していければと思います。
hotstartupinc
「ペライチ」を開発する会社です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
98
Help us understand the problem. What is going on with this article?