Subscribe Now!

Material Ripple Effect

In this article we will learn how to make div or container with click ripple effect animation.
Material Ripple Effect

Namaste!

Introduction

In this article we will learn how to make div or container with click ripple effect animation.

Material Ripple Effect Demo

Material Ripple Effect

Material Ripple Effect Source Code

Put this code in <body> Your Code Here </body> tags

.html file code

<div class="container">
        <div class="card radius">
        The key to boosting your news site’s visibility and traffic today is figuring out what’s really new under the sun and what’s as old as great journalism itself.

For example, news content now appears on several different Google products including Google News, Google Search, YouTube
            <mat-ripple></mat-ripple>
        </div>
            <div class="card radius">
        The key to boosting your news site’s visibility and traffic today is figuring out what’s really new under the sun and what’s as old as great journalism itself.

For example, news content now appears on several different Google products including Google News, Google Search, YouTube
            <mat-ripple color="rgba(255, 0, 0, 0.089)"></mat-ripple>
        </div>
        <div class="card radius">
        The key to boosting your news site’s visibility and traffic today is figuring out what’s really new under the sun and what’s as old as great journalism itself.

For example, news content now appears on several different Google products including Google News, Google Search, YouTube
            <mat-ripple color="rgba(0, 102, 255, 0.089)"></mat-ripple>
        </div>
        <div class="card radius">
        The key to boosting your news site’s visibility and traffic today is figuring out what’s really new under the sun and what’s as old as great journalism itself.

For example, news content now appears on several different Google products including Google News, Google Search, YouTube
            <mat-ripple color="rgba(77, 5, 211, 0.103)"></mat-ripple>
        </div>
        
        <div class="card radius blue">
        The key to boosting your news site’s visibility and traffic today is figuring out what’s really new under the sun and what’s as old as great journalism itself.

For example, news content now appears on several different Google products including Google News, Google Search, YouTube
            <mat-ripple color="rgba(255,255,255,.25)"></mat-ripple>
        </div>

Put this code in <style> Your Code Here </style> tags

.css file code

body{
    background-color: #0064d6;
    padding: 50px 60px;
    display: flex;
    justify-content: center;
    text-align: center;
    user-select: none;
}
.container{
    padding: 20px;
    width: 720px;
    background-color: #fff;
    border-radius: 10px;
}
.card{
background-color: #fff;
padding: 15px;
margin-top: 20px;
}
.border{
border: 1px solid #eee;
}
.radius{
border-radius: 5px;
}
.blue{
    background-color: #3378ff;
    color: #FFF
}

Put this code in <script> Your Code Here </script> tags

.js file code

! function(t, e) { "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = t || self).MatRipple = e() }(this, (function() {
    "use strict";
    var t = function(e, n) { return (t = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t, e) { t.__proto__ = e } || function(t, e) { for (var n in e) e.hasOwnProperty(n) && (t[n] = e[n]) })(e, n) };
  
    function e(e, n) {
      function i() { this.constructor = e } t(e, n), e.prototype = null === n ? Object.create(n) : (i.prototype = n.prototype, new i) }
    var n, i = function() { return (i = Object.assign || function(t) { for (var e, n = 1, i = arguments.length; n < i; n++)
          for (var r in e = arguments[n]) Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r]); return t }).apply(this, arguments) };
    ! function() { var t = window; if (void 0 !== t.Reflect && void 0 !== t.customElements) { var e = HTMLElement,
          n = function() { return Reflect.construct(e, [], this.constructor) };
        t.HTMLElement = n, HTMLElement.prototype = e.prototype, HTMLElement.prototype.constructor = HTMLElement, Object.setPrototypeOf(HTMLElement, e) } }();
    ! function(t) { t[t.FADING_IN = 0] = "FADING_IN", t[t.VISIBLE = 1] = "VISIBLE", t[t.FADING_OUT = 2] = "FADING_OUT", t[t.HIDDEN = 3] = "HIDDEN" }(n || (n = {}));
    var r, o = function() {
      function t(t, e, i) { this._renderer = t, this.element = e, this.config = i, this.state = n.HIDDEN } return t.prototype.fadeOut = function() { this._renderer.fadeOutRipple(this) }, t }();
  
    function s(t, e) { return window.getComputedStyle(t).getPropertyValue(e || "opacity") }
    var a, u = { enterDuration: 600, exitDuration: 450 },
      p = (a = { passive: !0 }, function() { if (null == r && "undefined" != typeof window) try { window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { return r = !0 } })) } finally { r = r || !1 }
        return r }() ? a : !!a.capture),
      l = function() {
        function t(t, e, n) { this._target = t, this._isPointerDown = !1, this._triggerEvents = new Map, this._activeRipples = new Set, this._containerElement = e, this._pathElement = n, this._triggerEvents.set("mousedown", this._onMousedown.bind(this)).set("mouseup", this._onPointerUp.bind(this)).set("mouseleave", this._onPointerUp.bind(this)).set("touchstart", this._onTouchStart.bind(this)).set("touchend", this._onPointerUp.bind(this)).set("touchcancel", this._onPointerUp.bind(this)) } return t.prototype.fadeInRipple = function(t, e, r) { var a = this;
          void 0 === r && (r = {}); var p = this._containerRect = this._containerRect || this._containerElement.getBoundingClientRect(),
            l = i({}, u, r.animation);
          r.centered && (t = p.left + p.width / 2, e = p.top + p.height / 2); var c = r.radius || function(t, e, n) { var i = Math.max(Math.abs(t - n.left), Math.abs(t - n.right)),
                r = Math.max(Math.abs(e - n.top), Math.abs(e - n.bottom)); return Math.sqrt(i * i + r * r) }(t, e, p),
            h = t - p.left,
            d = e - p.top,
            f = l.enterDuration,
            b = document.createElement("div");
          b.classList.add("mat-ripple-element"), b.style.left = h - c + "px", b.style.top = d - c + "px", b.style.height = 2 * c + "px", b.style.width = 2 * c + "px", b.style.background = r.color || null, b.style.transitionDuration = f + "ms", this._pathElement.appendChild(b), s(b), b.style.transform = " translate3d(0,0,0) scale(1)"; var _ = new o(this, b, r); return _.state = n.FADING_IN, this._activeRipples.add(_), r.persistent || (this._mostRecentTransientRipple = _), setTimeout((function() { var t = _ === a._mostRecentTransientRipple;
            _.state = n.VISIBLE, r.persistent || t && a._isPointerDown || _.fadeOut() }), f), _ }, t.prototype.fadeOutRipple = function(t) { var e = this._activeRipples.delete(t); if (t === this._mostRecentTransientRipple && (this._mostRecentTransientRipple = null), this._activeRipples.size || (this._containerRect = null), e) { var r = t.element,
              o = i({}, u, t.config.animation);
            r.style.transitionDuration = o.exitDuration + "ms", r.style.opacity = "0", t.state = n.FADING_OUT, setTimeout((function() { t.state = n.HIDDEN, r.parentNode.removeChild(r) }), o.exitDuration) } }, t.prototype.fadeOutAll = function() { this._activeRipples.forEach((function(t) { return t.fadeOut() })) }, t.prototype.setupTriggerEvents = function(t) { t && t !== this._triggerElement && (this.removeTriggerEvents(), this._triggerEvents.forEach((function(e, n) { t.addEventListener(n, e, p) })), this._triggerElement = t) }, t.prototype.removeTriggerEvents = function() { var t = this;
          this._triggerElement && this._triggerEvents.forEach((function(e, n) { t._triggerElement.removeEventListener(n, e, p) })) }, t.prototype._onMousedown = function(t) { var e = function(t) { return 0 === t.buttons }(t),
            n = this._lastTouchStartEvent && Date.now() < this._lastTouchStartEvent + 800;
          this._target.rippleDisabled || e || n || (this._isPointerDown = !0, this.fadeInRipple(t.clientX, t.clientY, this._target.rippleConfig)) }, t.prototype._onTouchStart = function(t) { if (!this._target.rippleDisabled) { this._lastTouchStartEvent = Date.now(), this._isPointerDown = !0; for (var e = 0, n = t.changedTouches; e < n.length; e++) { var i = n[e];
              this.fadeInRipple(i.clientX,i.clientY, this._target.rippleConfig) } } }, t.prototype._onPointerUp = function() { this._isPointerDown && (this._isPointerDown = !1, this._activeRipples.forEach((function(t) { var e = t.state === n.VISIBLE || t.config.terminateOnPointerUp && t.state === n.FADING_IN;!t.config.persistent && e && t.fadeOut() }))) }, t }(),
      c = function(t) {
        function n(e) { return t.call(this, e) || this } return e(n, t), n }(function(t) {
        function n(e) { var n = t.call(this) || this; return n._color = "rgba(0,0,0,.2)", n._unbounded = !1, n._centered = !1, n._radius = 0, n._disabled = !1, n._isInitialized = !1, n._globalOptions = e || {}, n } return e(n, t), Object.defineProperty(n, "observedAttributes", { get: function() { return ["color", "unbounded", "centered", "radius", "disabled"] }, enumerable: !0, configurable: !0 }), Object.defineProperty(n.prototype, "color", { get: function() { return this._color }, set: function(t) { this._color = t || "rgba(0,0,0,.2)" }, enumerable: !0, configurable: !0 }), Object.defineProperty(n.prototype, "unbounded", { get: function() { return this._unbounded }, set: function(t) { if (this._unbounded = t, t) { if (this.hasAttribute("unbounded")) return;
              this.setAttribute("unbounded", "") } else this.removeAttribute("unbounded") }, enumerable: !0, configurable: !0 }), Object.defineProperty(n.prototype, "centered", { get: function() { return this._centered }, set: function(t) { this._centered = t }, enumerable: !0, configurable: !0}), Object.defineProperty(n.prototype, "radius", { get: function() { return this._radius }, set: function(t) { this._radius = t }, enumerable: !0, configurable: !0 }), Object.defineProperty(n.prototype, "animation", { get: function() { return this._animation }, set: function(t) { this._animation = t }, enumerable: !0, configurable: !0 }), Object.defineProperty(n.prototype, "disabled", { get: function() { return this._disabled }, set: function(t) { this._disabled = t, this._setupTriggerEventsIfEnabled() }, enumerable: !0, configurable: !0 }), Object.defineProperty(n.prototype, "trigger", { get: function() { return this._trigger || this._elementRef }, set: function(t) { this._trigger = t, this._setupTriggerEventsIfEnabled() }, enumerable: !0, configurable: !0 }), Object.defineProperty(n.prototype, "rippleConfig", { get: function() { return { centered: this.centered, radius: this.radius, color: this.color, animation: i({}, this._globalOptions.animation, this.animation), terminateOnPointerUp: this._globalOptions.terminateOnPointerUp } }, enumerable: !0, configurable: !0 }), Object.defineProperty(n.prototype, "rippleDisabled", { get: function() { return this.disabled || !!this._globalOptions.disabled }, enumerable: !0, configurable: !0 }), n.prototype.attributeChangedCallback = function(t, e, n) { switch (t) {
            case "color":
              e !== n && (this.color = n); break;
            case "unbounded":
              this.hasAttribute("unbounded") ? this.unbounded = !0 : this.unbounded = !1; break;
            case "centered":
              this.hasAttribute("centered") ? this.centered = !0 : this.centered = !1; break;
            case "radius":
              e !== n && (this.radius = JSON.parse(n)); break;
            case "disabled":
              this.hasAttribute("disabled") ? this.disabled = !0 : this.disabled = !1 } }, n.prototype.connectedCallback = function() { this._isInitialized = !0, this._setup(), this._setupTriggerEventsIfEnabled() }, n.prototype.disconnectedCallback = function() { this._rippleRenderer.removeTriggerEvents() }, n.prototype.fadeOutAll = function() { this._rippleRenderer.fadeOutAll() }, n.prototype.launch = function(t, e, n) { return void 0 === e && (e = 0), "number" == typeof t ? this._rippleRenderer.fadeInRipple(t, e, i({}, this.rippleConfig, n)) : this._rippleRenderer.fadeInRipple(0, 0, i({}, this.rippleConfig, t)) }, n.prototype._setupTriggerEventsIfEnabled = function() {!this.disabled && this._isInitialized && this._rippleRenderer.setupTriggerEvents(this.trigger) }, n.prototype._getParentBorders = function() { return { top: Number(s(this.parentElement, "border-top").charAt(0)), right: Number(s(this.parentElement, "border-right").charAt(0)), bottom: Number(s(this.parentElement, "border-bottom").charAt(0)), left: Number(s(this.parentElement, "border-left").charAt(0)) } }, n.prototype._setup = function() { var t = this._getParentBorders(),
            e = document.createElement("template");
          e.innerHTML = "\n\t\t\t<style>\n                :host{\n\t\t\t\t\tposition: absolute !important;\n\t\t\t\t\tborder-radius: inherit;\n                    top: " + -1 * t.top + "px;\n\t\t\t\t\tright: " + -1 * t.right + "px;\n                    bottom: " + -1 * t.bottom + "px;\n                    left: " + -1 * t.left + "px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpointer-events: none\n                }\n\n\t\t\t\t.mat-ripple-element {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\ttransition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n\t\t\t\t\ttransform:  translate3d(0,0,0) scale(0.4);\n\t\t\t\t\twill-change: transform, opacity;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t:host([unbounded]) {\n\t\t\t\t\toverflow: visible;\n\t\t\t\t}\n\t\t\t\t\n            </style>\n            <slot></slot>\n        ", this.attachShadow({ mode: "open" }).appendChild(e.content.cloneNode(!0)), this._elementRef = this.parentElement, this._rippleRenderer = new l(this, this._elementRef, this.shadowRoot), "static" === s(this.parentElement, "position") && (this.parentElement.style.position = "relative") }, n }(HTMLElement));
    return customElements.define("mat-ripple", c), c
  }));

Thank You!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 62

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

I'm not a robot *Time limit exceeded. Please complete the captcha once again.