注册 登录 充值会员 退出
毕业设计 PHP源码
充值

ripplet.js按钮点击波动画特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-11-29
ripplet.js按钮点击波动画特效
多种效果的ripplet.js按钮点击波动画特效,可以自定义参数制作并控制点击波效果,生成自己风格的点击波插件代码。


js代码

<script type="text/javascript" src="js/ripplet.js"></script>
<script>
  // window.event polyfill for Gecko
  if (!Object.prototype.hasOwnProperty.call(window, 'event')) {
	['mousedown', 'mouseenter', 'onmouseleave'].forEach(function (eventType) {
	  window.addEventListener(eventType, function (event) { window.event = event }, true);
	});
  }

  // heading ripplet
  window.addEventListener('load', function () {
	setTimeout(function () {
	  var heading = document.querySelector('h1.title');
	  var headingRect = heading.getBoundingClientRect();
	  headingRipplet();
	  function headingRipplet() {
		var spreadingDuration = Math.floor(4000 * Math.random() + 200);
		ripplet(
		  {
			currentTarget: heading,
			clientX: headingRect.left + Math.random() * headingRect.width,
			clientY: headingRect.top + Math.random() * headingRect.height,
		  },
		  {
			color: 'rgba('
			  + Math.floor(Math.random() * 256) + ','
			  + Math.floor(Math.random() * 256) + ','
			  + Math.floor(Math.random() * 256) + ','
			  + (Math.random() * .3 + .1)
			  + ')',
			spreadingDuration: spreadingDuration + 'ms',
			clearingDelay:     Math.floor(spreadingDuration * .8) + 'ms',
			clearingDuration:  Math.floor(spreadingDuration * .6) + 'ms',
		  }
		);
		setTimeout(headingRipplet, Math.floor(4000 * Math.random() * Math.random()));
	  }
	});
  });
</script>