jQuery

【jQuery】マテリアルデザインによるリップルエフェクトTouch Ripple

July 19, 2018
touch-ripple

touch-rippleはタッチイベントのみに使用されるマテリアルデザインによるリップルエフェクト。

Usage

// init
$('body').ripple({
	opacity: 0.4,
	background: 'currentColor',
	selector: '.ripple',
	excludeSelector: '.no-ripple',
	rippleOnClass: 'ripple-on',
	rippleCircleClass: 'ripple-circle',
	opacityDataName: 'ripple-opacity',
	backgroundDataName: 'ripple-background',
	expanseDelayDataName: 'ripple-expanse-delay',
	expanseDelay: 0,
	expanseDuration: 175,
	expanseEasing: 'linear',
	fadeDuration: 175,
	fadeEasing: 'linear'
});

// destroy
$('body').ripple('destroy');

データ属性を使用

<div class="ripple" data-ripple-opacity="0.2" data-ripple-background="#000" data-ripple-expanse-delay="150"></div> 

MIT