৩ সেপ্টেম্বর, ২০১৫

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

ব্লগার Thumbnails Image এ Css3 Animation Effects যুক্ত করুন
4/ 5 stars - "ব্লগার Thumbnails Image এ Css3 Animation Effects যুক্ত করুন" আজ আপনাদের সাথে অত্যান্ত আকর্ষণীয় একটি পোষ্ট শেয়ার করতে যাচ্ছি, যেটি আমাদের ব্লগে ব্যবহার করা হয়েছে। এটির মাধ্যমে আপনার ব্লগের যে কোন Elem...
-
আজ আপনাদের সাথে অত্যান্ত আকর্ষণীয় একটি পোষ্ট শেয়ার করতে যাচ্ছি, যেটি আমাদের ব্লগে ব্যবহার করা হয়েছে। এটির মাধ্যমে আপনার ব্লগের যে কোন Element এর উপর Animation Effects দিতে পারবেন। এটি Css3 এবং JavaScript দিয়ে তৈরী করা হয়েছে, যার মাধ্যমে আপনার ব্লগের বিভিন্ন Element এর উপর ৫০ টিরও বেশী Bounce, Animate, Flip, Pulse Effects দিতে পারবেন। এই আকর্ষণী Css3 Transforms and Animation Effects যে কোন Browser এ সাপোর্ট করবে। আপনি লাইভ ডেমো দেখতে চাইলে আমাদের ব্লগের Home Page এ যান।
ব্লগার 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.
Subcribe to our all updates

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

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

  1. এই জিনিষটা বুঝলাম না। এর উপকারটা কি তা আসলে বিঝি নাই।

    উত্তরমুছুন
    উত্তরগুলি
    1. আমার ব্লগ ভিজিট করার পর Image এ যে Animation হয় সেটাকেই বুঝানো হয়েছে।

      মুছুন

 
Subscribe for all Updates

Subscribe Now

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

Powered by: