ব্লগার Thumbnails Image এ Css3 Animation Effects যুক্ত করুন

আপনি হয়তো ভাবছেন এত বড় কোড যুক্ত করলে আপনার ব্লগ স্লো হয়ে যাবে। আমি আপনাকে এ ব্যাপারে নিশ্চয়তা দিচ্ছি যে, আপনার ব্লগের লোড টাইমের উপর এটি কোন প্রভাব ফেলবে না। বরংচ এটি ব্যবহারে আপনার ব্লগের সুন্দর্য অনেকাংশেই বৃদ্ধি পাবে।

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/* Animated Thumbnail Image Script */
(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c&gt;b;b++)if(b in this&amp;&amp;this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&amp;&amp;(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent(&quot;on&quot;+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent(&quot;on&quot;+b,c):delete a[b]},a.prototype.innerHeight=function(){return&quot;innerHeight&quot;in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e&gt;d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f&gt;e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){&quot;undefined&quot;!=typeof console&amp;&amp;null!==console&amp;&amp;console.warn(&quot;MutationObserver is not supported by your browser.&quot;),&quot;undefined&quot;!=typeof console&amp;&amp;null!==console&amp;&amp;console.warn(&quot;WOW.js cannot detect dom mutations, please call .sync() after loading new content.&quot;)}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return&quot;float&quot;===b&amp;&amp;(b=&quot;styleFloat&quot;),e.test(b)&amp;&amp;b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&amp;&amp;(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c}return e.prototype.defaults={boxClass:&quot;wow&quot;,animateClass:&quot;animated&quot;,offset:0,mobile:!0,live:!0},e.prototype.init=function(){var a;return this.element=window.document.documentElement,&quot;interactive&quot;===(a=document.readyState)||&quot;complete&quot;===a?this.start():this.util().addEvent(document,&quot;DOMContentLoaded&quot;,this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll(&quot;.&quot;+this.config.boxClass),e=[],a=0,c=d.length;c&gt;a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c&gt;a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d&gt;c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,&quot;scroll&quot;,this.scrollHandler),this.util().addEvent(window,&quot;resize&quot;,this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],e=0,f=b.length;f&gt;e;e++)d=b[e],g.push(function(){var a,b,e,f;for(e=d.addedNodes||[],f=[],a=0,b=e.length;b&gt;a;a++)c=e[a],f.push(this.doSync(c));return f}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,&quot;scroll&quot;,this.scrollHandler),this.util().removeEvent(window,&quot;resize&quot;,this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&amp;&amp;(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll(&quot;.&quot;+this.config.boxClass),f=[],c=0,d=e.length;d&gt;c;c++)b=e[c],g.call(this.all,b)&lt;0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=&quot;&quot;+a.className+&quot; &quot;+this.config.animateClass},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute(&quot;data-wow-duration&quot;),c=a.getAttribute(&quot;data-wow-delay&quot;),e=a.getAttribute(&quot;data-wow-iteration&quot;),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return&quot;requestAnimationFrame&quot;in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c&gt;b;b++)a=d[b],e.push(a.style.visibility=&quot;visible&quot;);return e},e.prototype.customStyle=function(a,b,c,d,e){return b&amp;&amp;this.cacheAnimationName(a),a.style.visibility=b?&quot;hidden&quot;:&quot;visible&quot;,c&amp;&amp;this.vendorSet(a.style,{animationDuration:c}),d&amp;&amp;this.vendorSet(a.style,{animationDelay:d}),e&amp;&amp;this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?&quot;none&quot;:this.cachedAnimationName(a)}),a},e.prototype.vendors=[&quot;moz&quot;,&quot;webkit&quot;],e.prototype.vendorSet=function(a,b){var c,d,e,f;f=[];for(c in b)d=b[c],a[&quot;&quot;+c]=d,f.push(function(){var b,f,g,h;for(g=this.vendors,h=[],b=0,f=g.length;f&gt;b;b++)e=g[b],h.push(a[&quot;&quot;+e+c.charAt(0).toUpperCase()+c.substr(1)]=d);return h}.call(this));return f},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(e=d(a),c=e.getPropertyCSSValue(b),i=this.vendors,g=0,h=i.length;h&gt;g;g++)f=i[g],c=c||e.getPropertyCSSValue(&quot;-&quot;+f+&quot;-&quot;+b);return c},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,&quot;animation-name&quot;).cssText}catch(c){b=d(a).getPropertyValue(&quot;animation-name&quot;)}return&quot;none&quot;===b?&quot;&quot;:b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c&gt;b;b++)a=d[b],a&amp;&amp;(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute(&quot;data-wow-offset&quot;)||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e&gt;=d&amp;&amp;b&gt;=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&amp;&amp;this.util().isMobile(navigator.userAgent)},e}()}).call(this); new WOW().init(); //]]&gt;
</script>

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

<script type='text/javascript'>
wow = new WOW( { boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default } ) wow.init();
</script>

 Default Settings পরিবর্তন করতে চাইলেঃ

1. BoxClass : যখন মাউজ স্ক্রল করে নিচের দিকে যাবেন তখন এটি বক্স শো করবে।
2. Animated : এটি Animation Effects দেবে।
3. Offset : এটি ব্রাউজারের View Report এর দুরত্ব বজায় রাখবে।
4. Mobile : মোবাইল ভার্সন থেকে On অথবা Off করতে পারবেন।

 Css যুক্ত করাঃ

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

<link href='http://daneden.github.io/animate.css/animate.min.css' rel='stylesheet'/>

• আপনি চাইলে উপরের লিংকের কোডগুলি আপনার ব্লগের Template এ ব্যবহার করতে পারেন। 
• নোটঃ সব ধরনের Animation এখান থেকে দেখতে পারেন।

 Html ট্যাগ যুক্ত করাঃ

• কিবোর্ড হতে Ctrl+F চেপে imgtag = '<span style="float:left; position:relative;"> অংশটি সার্চ করুন।
• উপরের লাইনের <span এর পরে class="wow zoomIn animated" অংশটি যোগ করুন।
• তাহলে আপনার নতুন লাইনটি হবে নিচের মত।

imgtag = '<span class="wow zoomIn Animated" style="float:left; position:relative;">

• সবশেষে Template Save করলেই কাজ OK.