How To Add Ripple Effect On A Blogger Blog On Any Element?

Here we come again. That was ages ago when we had posted our last post on CSS. Now that CSS thing happened again. Today, we are going to help you add ripple effect on your blogger blog on any element. The ripple effect was created by Google with material design, as its part. Do you know what is material design?
[quote url='false']Material Design is a type of design which is full of shadow and is 3D design. Find more here: http://blgr.us.to/1SwYXU2[/quote] It's true. Material design is a design and in this type of design, all elements of a template or web page have three dimensions. Namely, x,y and z. These are, height, breadth and length and that's all we have studied already in class 8th or 7th.
[info headline="We are also adopting Material design!"]As we researched about this design, we admired that this design looks beautiful and so clean and therefore, we are adopting (transforming) material design. So, there may be glitches for a particular period, but the developer will solve them.[/info] Now, let's come to the topic. Which is- adding Ripple Effect. Now, what is the ripple effect? It's an effect that occurs when we click on any element (web page element), and it is like when we mistakenly drop a drop of ink on paper.

Now, let us show you the demo of ripple effect. Click on the button below:
Click Me!Felt something? Ripple is immaculate. Do you know? You can find this effect in almost 100s of blogs, but the language and steps told in those blogs are confusing and also, those steps are for developers. That's why we decided to post this effect on our blog to make our dear loyal readers able to use this effect without glitches and easily irrespectively if they are developers or non-developers.

How To Add This Effect On Your Blog?

To be able to use this effect, you will first have to add the required codings about it. To add them, kindly follow the following steps:

• Go to Blogger Dashboard > Template > Edit HTML
• Now, press Ctrl + F on your keyboard and search for </head> tag and above it, paste the following code:

<script>
      //<![CDATA[
      jQuery(document).ready(function(e){e("body").on("click",".ripple-effect",function(t){t.preventDefault();var i=e(this),a=i.attr("data-ripple-limit"),n=i.attr("data-ripple-color");if("undefined"==typeof n)var n="rgba( 0, 0, 0, 0.3 )";var o=i.attr("data-ripple-wrap-radius");if("undefined"==typeof o)var o=0;if("undefined"==typeof a)var r=i;else var r=i.closest(a);var p=r.offset(),d=t.pageX,s=t.pageY,f=r.outerWidth(),l=r.outerHeight(),u=e('<span class="ripple-effect-wrap"></span>');u.css({width:f,height:l,position:"absolute",top:p.top,left:p.left,"z-index":1e4,overflow:"hidden","background-clip":"padding-box","-webkit-border-radius":o,"border-radius":o});var c=i.attr("data-ripple-wrap-class");"undefined"!=typeof c&&u.addClass(c),u.appendTo("body");var b=d-p.left,m=s-p.top,g=1e3,h=e('<span class="ripple"></span>');h.css({width:g,height:g,background:n,position:"absolute",top:m-g/2,left:b-g/2,content:"","background-clip":"padding-box","-webkit-border-radius":"50%","border-radius":"50%","-webkit-animation-name":"ripple-animation","animation-name":"ripple-animation","-webkit-animation-duration":"5s","animation-duration":"5s","-webkit-animation-fill-mode":"both","animation-fill-mode":"both"}),e(".ripple-effect-wrap:last").append(h),setTimeout(function(){u.fadeOut(function(){e(this).remove()})},500);var v=i.attr("href"),w=i.attr("target");w||(w="_self"),"undefined"!=typeof v&&"#"!=v.substring(0,1)&&setTimeout(function(){window.open(v,w)},200),(i.is("input")||i.is("button"))&&setTimeout(function(){i.removeClass("ripple-effect"),i.trigger("click"),i.addClass("ripple-effect")},200)})});
      //]]>
</script>

• Now, search for ]]></b:skin> and paste the following code above it:

@-webkit-keyframes ripple-animation {
0% {
-webkit-transform: scale(.01);
transform: scale(.01);
}
100% {
-webkit-transform: scale(5);
transform: scale(5);
}
}
@keyframes ripple-animation {
0% {
-webkit-transform: scale(.01);
transform: scale(.01);
}
100% {
-webkit-transform: scale(5);
transform: scale(5);
}
}

• Now save your template.
• You have added it successfully! 

How To Use Ripple Effect On Your Blog On Any Element?

Now, you have added the required coding for it, and it's now time to use this excellent effect. For using it, you just have to add ripple-effect as a class. If you are non-developer, you'll find some difficulty in using it. So, here's a quick line to help you use it.

Example #1: Suppose, I have a button, and its HTML is:

<button>Hello</button>

And now, if you I want to add ripple effect on it, I would change the above to code to below code:

<button class='ripple-effect'>Hello</button>

Example #2: What if you have code like this?:

<button id='anything' class='anything'>Hello</button>

In this case, you would just add ripple-effect after second anything:

<button id='anything' class='anything ripple-effect'>Hello</button>

Now you are ready to do crazy things with it. :)

Final Words

I hope you enjoyed this post a lot. Don't forget to join our running giveaway about Grammarly's last five lifetime premium accounts. Do you know? This is the most detailed post about this effect you will on the web. That's why, don't forget to share it with your friends. Thanks!

Share this post