ব্লগে Material Design "Ripple Animation" Effect যুক্ত করুন

ব্লগ/ওয়েবসাইটকে আকর্ষণীয় করার জন্য ওয়েব ডেভেলপাররা বিভিন্ন ধরনের নিত্য নতুন কৌশল অবলম্বন করছেন। বিশেষ করে HTML5 ও CSS3 কোডিং ব্যবস্থা চালু হওয়ার পর থেকে আকর্ষণীয় ওয়েব ডিজাইন করাটা অনেক সহজ একটা ব্যাপার হয়ে দাড়িয়েছে। আর সেই সাথে সাথে সবাই উঠে-পড়ে লেগেছেন যে, কিভাবে সবাই তাদের ব্লগটাকে আকর্ষণীয় করবেন। সম্প্রতি গুগল Material Design সম্পর্কে ঘোষনা দেয়ার পর হতে সবাই ওয়েবসাইটকে Material Design করার জন্য আর বেশী উঠে-পড়ে লেগেছেন। সেই জন্য একটা ব্লগকে প্রফেশনাল ডিজাইন করার জন্য আমরা ছোট একটা অংশ আপনাদের সাথে শেয়ার করতে যাচ্ছি।

আমরা আজ যেটি শেয়ার করছি সেই Effect টি আপনার ব্লগের যে কোন অংশে যুক্ত করতে পারবেন। এটি যুক্ত করার ফলে ভিজিটর যখন আপনার ঐ অংশটিতে ক্লিক করবে তখন পানির ঢেউ এর আকর্ষণীয় একটি ইফেক্ট দেবে। আমাদের ব্লগের ম্যানুবারে এই ইফেক্টটি ব্যবহার করছি, যেখানে ক্লিক করলে বিষয়টি ভালভাবে বুঝতে পারবেন অথবা নিচের বাটনটিতে ক্লিক করলে এর সম্পর্কে পরিষ্কার ধারনা পাবেন।

 ক্লিক করুন

 কিভাবে যুক্ত করবেন?

• প্রথমে ব্লগে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।

• কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
• এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।

/* Ripple Animation
--------------------------------------------------- */
@-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)}
}

• কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
• এখন নিচের Scripts গুলি </head> ট্যাগের ঠিক উপরে পেষ্ট করুন। 

<script type='text/javascript'>
//<![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>

• সবশেষে Template Save করুন।

 কিভাবে HTML অংশ যুক্ত করবেন?

• আপনি যে অংশে এই ইফেক্ট দিতে চান সেই অংশের HTML অংশটি খোঁজে বের করতে হবে। উদাহরণ স্বরূপ ধরুন আপনি আপনার ব্লগের Menu Bar এ এই ইফেক্টটি দিতে চান। সাধারণত আপনার ম্যানুবারটির HTML নিচেরমত হতে পারে।

<li><a href='#'> Home </a></li>

         অথবা

<li><a class='menu' href='#'> Home </a></li>

• ইফেক্টটি যুক্ত করার পর আপনার লাইনটি হবে নিচেরমত।

 <li><a class='ripple-effect' href='#'> Home </a></li>

         অথবা

<li><a class='menu ripple-effect' href='#'> Home </a></li>

• আপনি যে জায়গায় এই ইফেক্ট দিতে চান কেবল সেই জায়ার Class এর সাথে ripple-effect অংশটি যুক্ত করে দিলেই হয়ে যাবে।

সাহায্য জিজ্ঞাসাঃ উপরের HTML অংশটি বুঝতে কোন সমস্যা হলে কিংবা আপনার ব্লগের যে অংশে যুক্ত করতে চাচ্ছেন সেই অংশ খোঁজে না পেলে আমাদেরকে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের চেষ্টা করব,