TUTORIAL: Efecto Ripple de Material Design [HTML+CSS+JS]



Sabemos de sobra las bondades que Material Design trae a nuestras aplicaciones, como sabemos también lo tedioso que puede ser lograrlo en HTML y CSS. Si bien existen varios frameworks de diseño que cubren por completo esta necesidad (como Material Design Lite y Materialize), a veces necesitamos solo un pequeño elemento y no un framework completo.

Hace unas horas necesitaba el efecto “Ripple” de Material Design al pulsar un botón. Buscando rápidamente en Google, encontré varias alternativas, todas ellas utilizando Jquery (y no, no me interesa importar Jquery cuando solo necesito un botón). Así que después de algunos intentos fallidos, decidí hacer el efecto a mano, con JavaScript y CSS. Para quienes no lo conocen o no asocian el nombre, este es el efecto Ripple (click a los elementos):

See the Pen Ripple Effect by Gerson Lazaro (@GersonLazaro) on CodePen.

En primer lugar, hay que destacar que en el diseño material tenemos básicamente 3 tipos de botones:

Botones con material design

Vamos a crear tres botones y un contenedor con una imagen (tambien a las imágenes podemos agregarle el efecto). En el html cada botón contendrá un DIV con clase ripple-container, que demarca los límites del efecto, y dentro de este div habrá un SPAN con clase ripple -effect encargado de desplegar el efecto como tal. La estructura HTML de los botones sería entonces:

Para que los botones tengan el diseño deseado, vamos a añadir algo de css:

Esto nos genera:

Botones con estilo material

Ahora si nos centramos en el efecto. A cada botón (y al bloque con la imagen) le hemos asignado un div interno con clase ripple-container. Este div debe ser transparente, pero ocupar la totalidad del tamaño del botón, lo cual no es muy difícil si lo ubicamos con posición absoluta. Del mismo modo, dentro de el div se encuentra un span con clase ripple-effect, al cual asignaremos una animación con keyframes, pero por defecto no será visible, y solo cuando se haga click sobre el elemento se disparará el evento que activa el span. Primero centrémonos en las propiedades css que harán funcionar el efecto:

Ahora si llega lo bueno: el javascript. Lo que haremos será capturar el click sobre el div ripple-container, ubicar el punto (x,y) dentro del botón en el cual se hizo el click, colocar ahí los valores top y left del span ripple-effect, y añadir la clase ripple-effect-animation al span para que la animación de los keyframes se active. Una vez la animación pase, de nuevo se quita esta clase, para que el botón siga funcionando (de lo contrario, el efecto solo funcionaria la primera vez). Veámoslo en código:

El resultado final es el que ya he compartido al iniciar este post:

See the Pen Ripple Effect by Gerson Lazaro (@GersonLazaro) on CodePen.

Todo el código utilizado puedes descargarlo también desde Github Gist.

Cualquier duda puedes dejarla en los comentarios. Hasta la próxima!