0

I'd like to reproduce this ripple-on-click effect:

http://jsfiddle.net/cjalatorre/zr2m5d88/

The fiddle is an extension from this answer:

I decided to go with a CSS radial gradient in the button's background-image. I'm centering the ripple (the gradient's circle) at the touch/mouse point. I extended the Surface module in order to hook into the render cycle.

There are two Transitionables, one for the diameter of the gradient and one for gradient opacity. Both of these are reset after the interaction. When the user clicks on a button, the Surface stores the X and Y offset and then transitions the gradient diameter to its max value. When the user releases the button, it transitions the gradient opacity to 0.

The render cycle is constantly setting the background-image to a radial gradient with the circle at the X and Y offset, and getting the opacity and gradient diameter from the two Transitionables.

These famo.us modules are used:

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Timer = require('famous/utilities/Timer');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');
var Transitionable = require('famous/transitions/Transitionable');

I'm not familiar with famo.us, so before I try and rewrite this, are there any obvious equivalent vanilla functions / gotchas?

Community
  • 1
  • 1
offthegrass
  • 446
  • 1
  • 6
  • 16

1 Answers1

0

Have a look at https://github.com/fians/Waves You have the same effect, in JS, CSS, SASS, LESS...

Jérémie Parker
  • 3,184
  • 2
  • 20
  • 33
  • thanks, I went for something similar / a little simpler: http://www.cssscript.com/material-design-click-ripple-effect-vanilla-javascript-material-touch/ – offthegrass Apr 20 '15 at 09:14