Mar 21, 2016

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

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

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

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
ব্লগে Material Design "Ripple Animation" Effect যুক্ত করুন
  • কিবোর্ড হতে 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 অংশটি বুঝতে কোন সমস্যা হলে কিংবা আপনার ব্লগের যে অংশে যুক্ত করতে চাচ্ছেন সেই অংশ খোঁজে না পেলে আমাদেরকে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের চেষ্টা করব, ইনশাআল্লাহ্।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

5 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. ভাই ওয়ার্ডপ্রেসের ক্ষেত্রে কিভাবে করব???

    ReplyDelete
    Replies
    1. ওয়ার্ডপ্রেস নিয়ে এখনো আমরা কোন সাপোর্ট দিচ্ছি না। তবে এই পোষ্টটিতে যেহেতু Css ও JavaScript ব্যতীত অন্য কিছু নেই সেহেতু আমার মনেহয় এটি নরমালি ওয়ার্ডপ্রেসেও কাজ করবে।

      Delete
  2. ভাই,আমার blog সাইড এটা,http:// juelnet.blogspot.com এখন সমস্যা হলো blog কাস্টমাইজেশন করে blog ডিজাইন করা যচ্ছে না,ফলে আমি কিছু html code দিয়ে blog টি ডিজাইন করেছি,,এখন সমস্যা blog এর ভিতরে মার্জিন এর পরিবর্তন করার কোন কোড যানা আছে কি আপনার,জানালে উপকৃত হোতাম

    ReplyDelete
    Replies
    1. আপনার টেমপ্লেটটি হচ্ছে অন্য ডেভেলপারদের প্রিমিয়াম ভার্সন। আপনার কোন ধরনের সমস্যা হলে তাদের সাথে যোগাযোগ করতে পারেন, ধন্যবাদ।

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: