web-touch-ripple

Touch Ripple For Web

Use web components to implement efficient and simple touch ripple effects.

Preview

This is preview of simplest example.

This may be different from the real thing (by gif)

How to apply ripple element

Please referance to a codes below!

Staticly

This is a solution of converting a string into a function and using it.

Not recommended to use it in this way and it can mainly be used for debugging purposes.

<!-- Called when a user taps or clicks. -->
<touch-ripple ontap="console.log('hello world!')">
    <h1 style="padding: 15px;">
        Tappabe
    </h1>
</touch-ripple>

Locally

This is the most ideal and widely used solution.

<touch-ripple id="ripple">...</touch-ripple>
<script>
    // in script.
    const ripple = document.getElementById("ripple");

    // Called when a user taps or clicks.
    ripple.ontap = () => console.log("hello world!");
</script>

Static variables of CSS

Name	Description	Default Value
--ripple	background color of touch-ripple effect.	rgba(0, 0, 0, 0.2)
--ripple-fadein-duration	Duration until the ripple effect completely fills the element.	0.2s
--ripple-fadeout-duration	Duration until the ripple effect disappears.	0.3s
--ripple-blur-radius	The blur effect radius of touch ripple.	10px
--ripple-lower-scale	The ripple scale of start point.	0.3
--ripple-upper-scale	The ripple scale of end point.	1