Menu

Add CSS3 Animation Effects To Blogger Thumbnails

CSS3 Logo
Today I'd like to share the process for creating an animated effect for your web elements, which is mostly used in the current web design trend. WOW is a JavaScript plugin that lets you use animate web elements.There are more than 50 different effects: Bounce, animate, flip, pulse etc. Please note that the CSS transforms and animation effect only work in browsers that support them. So, we've come up with this little plugin that will allow some custom styling of the HTML elements, it is easy to apply some simple effects in order to spice up your blog or website design. The plugin is developed by matthieua and CSS Animation created by daneden.

Note: jQuery is used when you want to execute the animation effect, so ensure that you have installed the latest jquery in your template source. So let's get started..!! The plugin and CSS Codes used in the tutorial is by matthieua and daneden. They are licensed under the Attribution-MIT License. For the live demo visit our blog homepage.



Update: Aug-26-2015
Plugin Customization Code Added
Update: Sep-01-2015
Video Tutorial Added

How Setup Jquery and Wow (Animation Effect) Plugin

  1. Go to your Blogger Dashboard >> Template
  2. Click Edit HTML
  3. search for the following code (Need Help?)
  4. </body>
  5. and paste the following code just before closing body tag
  6. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ /*! WOW - v1.1.2 - 2015-08-19 * Copyright (c) 2015 Matthieu Aussaguel; Licensed MIT */(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>b;b++)if(b in this&&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]&&(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.createEvent=function(a,b,c,d){var e;return null==b&&(b=!1),null==c&&(c=!1),null==d&&(d=null),null!=document.createEvent?(e=document.createEvent('CustomEvent'),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e},a.prototype.emitEvent=function(a,b){return null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():'on'+b in(null!=a)?a['on'+b]():void 0},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent('on'+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('on'+b,c):delete a[b]},a.prototype.innerHeight=function(){return'innerHeight'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>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>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(){'undefined'!=typeof console&&null!==console&&console.warn('MutationObserver is not supported by your browser.'),'undefined'!=typeof console&&null!==console&&console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.')}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return'float'===b&&(b='styleFloat'),e.test(b)&&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&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.resetAnimation=f(this.resetAnimation,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),null!=a.scrollContainer&&(this.config.scrollContainer=document.querySelector(a.scrollContainer)),this.animationNameCache=new c,this.wowEvent=this.util().createEvent(this.config.boxClass)}return e.prototype.defaults={boxClass:'wow',animateClass:'animated',offset:0,mobile:!0,live:!0,callback:null,scrollContainer:null},e.prototype.init=function(){var a;return this.element=window.document.documentElement,'interactive'===(a=document.readyState)||'complete'===a?this.start():this.util().addEvent(document,'DOMContentLoaded',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('.'+this.config.boxClass),e=[],a=0,c=d.length;c>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>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>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(this.config.scrollContainer||window,'scroll',this.scrollHandler),this.util().addEvent(window,'resize',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=[],c=0,d=b.length;d>c;c++)f=b[c],g.push(function(){var a,b,c,d;for(c=f.addedNodes||[],d=[],a=0,b=c.length;b>a;a++)e=c[a],d.push(this.doSync(e));return d}.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(this.config.scrollContainer||window,'scroll',this.scrollHandler),this.util().removeEvent(window,'resize',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&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll('.'+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<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=a.className+' '+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,'animationend',this.resetAnimation),this.util().addEvent(a,'oanimationend',this.resetAnimation),this.util().addEvent(a,'webkitAnimationEnd',this.resetAnimation),this.util().addEvent(a,'MSAnimationEnd',this.resetAnimation),a},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute('data-wow-duration'),c=a.getAttribute('data-wow-delay'),e=a.getAttribute('data-wow-iteration'),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return'requestAnimationFrame'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>b;b++)a=d[b],e.push(a.style.visibility='visible');return e},e.prototype.resetAnimation=function(a){var b;return a.type.toLowerCase().indexOf('animationend')>=0?(b=a.target||a.srcElement,b.className=b.className.replace(this.config.animateClass,'').trim()):void 0},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?'hidden':'visible',c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?'none':this.cachedAnimationName(a)}),a},e.prototype.vendors=['moz','webkit'],e.prototype.vendorSet=function(a,b){var c,d,e,f;d=[];for(c in b)e=b[c],a[''+c]=e,d.push(function(){var b,d,g,h;for(g=this.vendors,h=[],b=0,d=g.length;d>b;b++)f=g[b],h.push(a[''+f+c.charAt(0).toUpperCase()+c.substr(1)]=e);return h}.call(this));return d},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(h=d(a),g=h.getPropertyCSSValue(b),f=this.vendors,c=0,e=f.length;e>c;c++)i=f[c],g=g||h.getPropertyCSSValue('-'+i+'-'+b);return g},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,'animation-name').cssText}catch(c){b=d(a).getPropertyValue('animation-name')}return'none'===b?'':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>b;b++)a=d[b],a&&(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('data-wow-offset')||this.config.offset,f=this.config.scrollContainer&&this.config.scrollContainer.scrollTop||window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this); //]]> </script>
  7. Call the plugin in your body section (After Dom Loaded)
  8. <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>

    Customize the default setting

    • BoxClass: Class name that reveals the hidden box when the user scrolls.
    • AnimateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)
    • Offset: Define the distance between the bottom of browser viewport and the top of the hidden box. When the user scrolls and reaches this distance the hidden box is revealed.
    • Mobile: Turn on/off WOW.js on mobile devices.
    • Live: constantly check for new WOW elements on the page.
    For advance use of WOW Plugin Go to Documentation Page
  9. next, locate the following code
  10. */]]></b:skin>
  11. and paste the below CSS code above the */]]></b:skin>
  12. /*!Animate.css - http://daneden.me/animate Licensed under the MIT license -http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden*/ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s} @-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown} @-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp} @-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
    Note:- For more animated effects please visit the following page: CSS3 Animation. Pick an animation style in Animate.css, then add the CSS class to the HTML element. All Animation Effects In Action
  13. Finally, search for the following code
  14. imgtag = '<span style="float:left; position:relative;">
  15. and add following code right after opening <span
  16. class="wow zoomIn animated"
  17. your final code should look like this:
  18. imgtag = '<span class="wow zoomIn Animated" style="float:left; position:relative;">
click on save button and you're done..!!

Note:- You can animate any of your HTML element, there is no limit, you can use it twice in your web pages. For example:

<div class="wow bouncedown Animated">
Targeted Content
</div>
<div class="wow bounceup Animated">
Targeted Content
</div>

The first div will bounce from up to down and the second one is the bounce from down to up, it's just a simple example, for more advanced use of animation effect please Read the advance documentation.

Advanced Options


data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated

<span class="wow zoomIn" data-wow-duration="2s" data-wow-delay="5s"/>
<span class="wow zoomIn" data-wow-offset="10" data-wow-iteration="10"/>

I hope you find this useful! Facing trouble? Take a look at video tutorial for further implementation, Again got any question just leave your reply below in the comment box and I will reply you back as soon as time allows me. Don't forget to share and subscribe our news feed for more updated tutorials related to blogger. Happy Blogging...!!!

37 comments Post Yours! Blog Comment Policy ▼
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment. To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.

PLEASE NOTE: We have Zero Tolerance to Spam. We reserve the rights to remove any comment from the Blog. Please leave comments that are respectful and useful. Comments with spamy links and solely promotional in nature will be deleted immediately upon our review.

  1. I can't find this line in my template (the line in 7th step)

    ReplyDelete
    Replies
    1. @Nafees Khan

      Animation effect working fine the time when i visit your blog, Need further help please let me know.

      Delete
    2. Thankyou i had solved the problem already :D

      Delete
  2. I want to add rubber band effect in my header image but i was not able to do it i tried all the above method but didn't worked.

    ReplyDelete
    Replies
    1. @Hassan Tahir

      Locate the following code in your template:

      <div id="header-inner">

      and replace the above code with below:

      <div class="wow bounceInDown" id="header-inner">

      i hope it will help, need further help please let me know.

      Delete
    2. Replace bounceInDown with you css3 animation effect class, For example rubberBand.

      and one thing more, you must write "B" in capital words otherwise it will not work.

      Delete
  3. Still didn't worked brother.

    ReplyDelete
  4. It was working now thanks for that but how can i add the bownce in down in post thumbnails i was not able to find the code that you have given in step 7.

    ReplyDelete
    Replies
    1. @Hassan Tahir

      Would you mind to share your blog link where you wish to add bounceindown affect, it will help me to sortout the issue.

      Delete
    2. Search for the following code in your template:

      ["\x3C","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x3E","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","","\x6A\x6F\x69\x6E","\x63\x68\x61\x72\x41\x74","\x20","\x2E\x2E\x2E","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x3C\x73\x70\x61\x6E\x20\x73\x74\x79\x6C\x65\x3D\x22\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x20\x70\x61\x64\x64\x69\x6E\x67\x3A\x30\x70\x78\x20\x31\x30\x70\x78\x20\x35\x70\x78\x20\x30\x70\x78\x3B\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x73\x72\x63","\x22\x20\x77\x69\x64\x74\x68\x3D\x22","\x70\x78\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22","\x70\x78\x22\x2F\x3E\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x64\x69\x76\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x2F\x64\x69\x76\x3E"];

      and replace it with the following:

      ['<', 'indexOf', 'split', 'length', '>', 'substring', '', 'join', 'charAt', ' ', '...', 'getElementById', 'img', 'getElementsByTagName', "<span class='wow bounceInDown' style='float:left; padding:0px 10px 5px 0px;'><img src='", 'src', "' width='", "px' height='", "px'/></span>", '<div>', 'innerHTML', '</div>'];


      I hope it's not very hard to find, in case of any trouble please let me know.

      Delete
    3. It's working now. Thanks For your help I really appreciate your knowledge.

      Delete
  5. How to add these animations on hover.

    ReplyDelete
    Replies
    1. @Hassan Tahir

      on hover state you must need to setup a separate element for each animation, Just follow the demo on jsfiddle.

      http://jsfiddle.net/u7vXT/

      Delete
  6. Replies
    1. @Esbondhu

      just follow the steps I have mention above in reply of hassan tahir query. I hope that will help you, in case of trouble please let me know.

      Delete
  7. @Mohammad Ishtiaq, sorry. But do you know? To get working all the effects, all should add this CSS:

    http://daneden.github.io/animate.css/animate.min.css

    By the way, thanks for providing this tutorial. :)

    ReplyDelete
  8. I can't find the line ( 7th step) in my template...

    I am using apriezt 1.2 template....

    ReplyDelete
    Replies
    1. @Anonymous

      1. Search for the following code in your template, it might be found at starting point of your body section:

      <img width='300' height='160' onload='resizeimage(event);'

      2. and just replace it with following below code, you can change animation effect by changing "bounceInDown" to another animation effect.

      <img class='wow bounceInDown' width='300' height='160' onload='resizeimage(event);'

      Animation effects source file don't forget to visit:
      https://www.github.com/daneden/animate.css/tree/master/source

      Or you can see all animation in action by visiting link below

      http://www.daneden.github.io/animate.css/

      I hope it will help, in case of any trouble please let me know.

      Delete
  9. It is working but problem is that some effects are working...Like 'wow bounceInDown' and "wow zoomIn animated" etc or may be i did,t know how they work because in first code 'wow bounceInDown' we are not using word animated and in second code "wow zoomIn animated" we use animated word.....plz help me just clarify me i am trying to do it from last 2 dayz..........
    Thank you.........
    Thank you..........

    ReplyDelete
    Replies
    1. @Anonymous

      Sorry say dear there was an error in the code, thanks for your feedback.

      As far as concern of your query here is the answer:
      We are targeting two classes in single element, (Shown above with two classes) We aren't limited to only target two classes, we can combine as many classes and IDs into a single (Image) selector as we want.

      "ZoomIn and Animated" both are animated effect classes, we are using two animation effects in one image selector. You can skip one of them, your single effect (zoomIn) will work fine.

      Delete
  10. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. @ejaz ahmed

      Mohammad is using lazy load plugin which is developed by Mika Tuupola we try to share guide on how to use lazy load plugin in blogger blog and the answer is for your second question.
      In the above documentation we have already explained how to use the same effect as Mohammad using on their own blog. We have shared CSS code for both effects zoomIn and animated.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. @ejaz ahmed

      The link you are sharing is plugin demo page, there is lot of effects he is showing for the demo only, why you should use all the effects on a single image?

      Your second Question: Animations reveal when user scroll. You can customize the plugin setting by following the steps below.

      boxClass: Class name that reveals the hidden box when user scrolls.

      animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)

      offset: Define the distance between the bottom of browser viewport and the top of hidden box.
      When the user scrolls and reach this distance the hidden box is revealed.

      mobile: Turn on/off WOW.js on mobile devices.

      live: consatantly check for new WOW elements on the page.

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

      I will try to update the setting options in the above documentation. I hope these steps will help you the way you wish.. peace and blessing :)

      Delete
  12. This comment has been removed by the author.

    ReplyDelete
  13. @Mohammad Ishtiaq:On your profile picture and below Popular Posts the effect which is used this is the same thing that i want........update your post plz

    waiting for update.........................thanks......

    ReplyDelete
    Replies
    1. @ejaz ahmed

      Dear we are teaching same method in the steps above.
      Have another query please let us know. Peace & Blessing..!! :)

      Delete
  14. Hi Mohammad Ishtiaq. All steps apply in my blog successfully without facing any problem, but only this post I am facing a little problem.in above you explain the Animations reveal when user scroll.You also give the code:

    live: consatantly check for new WOW elements on the page.

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

    can you tell me how i can use it or where i past it in template..

    ReplyDelete
    Replies
    1. @Jhari jutt

      Code is updated now as per your requirement. Just apply it again and enjoy :)

      Delete
  15. Mohammad Ishtiaq bro i try it many time but it is not working for me.. i am confused at step 5..Call the plugin in your body section (After Dom Loaded) the code that you show ,I past this code just before the </body but it not is working.I think i did,t know where i past this code..just tell me step 5 where i past it.

    ReplyDelete
    Replies
    1. @Jhari jutt

      check out the screenshot by following link below and for the demo of the working plugin visit our blog homepage.

      http://3.bp.blogspot.com/-2hjLRkKgyGs/Vd3ZUgf9lLI/AAAAAAAAFMg/QZCFCJGYLtY/s1600/2015-08-26_232007.png

      I hope it will help you, i case of trouble please let us know..!! :)

      Delete
  16. i fully follow your steps:

    check out the screenshot by following link:

    step 4 and 5

    http://s15.postimg.org/5d1n5mnpn/image.jpg

    http://s13.postimg.org/4l7nwx6l3/image.jpg

    Step 6

    http://s29.postimg.org/hpu1q3j7r/image.jpg

    Next i find this code :<img width="300" height="160" onload="resizeimage(event);"

    Change in to:

    <img class="wow zoomIn animated" width="300" height="160" onload="resizeimage(event);"

    still not working show effect as before but not reveal when i scroll.




    ReplyDelete
  17. @Mohammad Ishtiaq....Not working bro...i visit your site 7-8 times in a day..Plz make a video tutorials..because this is best for understanding as your other videos on youtube...??

    ReplyDelete
    Replies
    1. @Anonymous

      Dear we will try to upload video guide as soon as possible.

      Thank You

      Delete
  18. @Mohammad Ishtiaq bro just check that is it working on apriezt 1.2 template or not..

    ReplyDelete
    Replies
    1. @Anonymous

      It will work on all html elements. We will check it as soon as time allow.

      Thank You

      Delete
  19. @Mohammad Ishtiaq

    Thank you very much bro....i hope video tutorial help us for applying these animated effects on our blogs.??

    ReplyDelete