The ripple() effect creates a Material Design-style circular wave expanding from the click/touch point. The ripple element is absolutely positioned, scales from 0 to 4x, and fades out. Perfect for buttons, cards, and interactive elements.

// Add ripple to all buttons
Domma.effects.ripple('.btn');

// Custom colour and duration
Domma.effects.ripple('.card', {
  colour: 'rgba(59, 130, 246, 0.3)',
  duration: 800,
  centered: false
});

// Clean up
ctrl.destroy();

Click on these buttons to see the ripple effect. The ripple emanates from the click point.

Domma.effects.ripple('.btn', {
  colour: 'rgba(255, 255, 255, 0.35)',
  duration: 600
});

Different ripple colours for different contexts.

Domma.effects.ripple('.blue', { colour: 'rgba(21, 101, 192, 0.3)' });
Domma.effects.ripple('.green', { colour: 'rgba(46, 125, 50, 0.3)' });
Domma.effects.ripple('.red', { colour: 'rgba(198, 40, 40, 0.3)' });

With centered: true, the ripple always starts from the centre of the element regardless of click position.

Domma.effects.ripple('.element', {
  centered: true
});

Ripple effect on cards for interactive list items or dashboards.

Domma.effects.ripple('.file-card', {
  colour: 'rgba(13, 110, 253, 0.15)',
  duration: 800
});

Compare different ripple durations.