How To Add Click Ripple Effect Animation In Website

Hello Everyone! Today I Will Give You An Amazing Click Ripple Animation Code Whice Use On Your Blogger Website.

Just Follow Steps And See Your Website 

Steps

Before following this steps please take back-up of your theme to make your site+theme more safe.

1. 
   

   STEPS

   1. Find </head> tag in theme/template of your website
   2. Now add the below code just above </head>

   <script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js' type='text/javascript'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

   3. Find </b:skin> tag template/theme of your website to add CSS
   4. Copy the below code and paste it just above </b:skin>

   .clicker {width:60px;height:60px;margin-left:-30px;margin-top:-30px;background:#204ecf;border-radius:100%;position:absolute;transform:scale(0);opacity:.3;-ms-filter:none;filter:none;z-index:9999;pointer-events:none}.darkMode .clicker{background:#fff}.clicker.is-active{opacity:0;-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter:alpha(opacity=0);transition:opacity 900ms ease,transform 900ms ease;transform:scale(1)}

   5. Now find </body> tag in theme/template of your website
   6. Copy the below code and paste it just above </body>

   <script>/*<![CDATA[*/ (function(){var i=function(n,t){return window.setTimeout(t,n)},o={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},e=function(n,t){var i,o="touchstart"===n.type.toLowerCase();switch(t){case"top":i="pageY";break;case"left":i="pageX"}return(o?n.originalEvent.touches[0]:n)[i]};$(document).on("mousedown touchstart",function(n){var t=$('<div class="clicker"></div>');return t.css({left:e(n,"left"),top:e(n,"top")}),$("body").append(t),i(0,function(){return t.on(o[Modernizr.prefixed("transition")],function(){return t.remove()}),t.addClass("is-active")})})}).call(this); /*]]>*/</script>

   7. Done!

   Don't forgot to saave Your Theme

2. DEMO

   Conclusion

   I made this post step by step on How To Add Click Ripple Effect Animation In Website. I hope you have liked it and Please do share with your friends and follow our blog for more

   if you face any problems or have any questions please feel free to ask in comments section or Contact us