اضافة تأثير على صورة الموضوع مع صندوق في التدوينة

اضافة  تأثير على صورة الموضوع , اهلا بكم زوار مدونتي بعد بحث كثير وجدة طريقة تطبيق تأثير على صورة الموضوع.

اضافة  تأثير على صورة الموضوع مع صندوق في التدوينة

واردت ان اشارككم اياه ولكي أكون أكثر تحديدا فسيطبق على صندوق حامل المواضيع المثبت بالرئيسية كأي موقع آخر،
 هذا التأثير يخص تأثيرات Animatecss التي قدمتها في هذه التدوينة ,ويتضمن ايضا اسم الناشر و التاريخ و التسميات ايضا 
وها قد أتتني الفرصة حتى أريكم الطريقة بأسهل طريقة ممكنة. والآن قبل أن ندخل للمعاينة أحب أن أذكر بأن الكود المستعمل له ميزة آخرى 
ألا وهي تحميل صور المواضيع في آنٍ واحد مما يوفر سرعة في تحميل الموقع وتظهر المواضيع مع نزولك للأسفل ولقد تم تجربة 
التأثير على كل من البوستات ذات شكل شبكة والشكل العادي وهي تشتغل تمام التمام.

اضافة  تأثير على صورة الموضوع مع صندوق في التدوينة

<b:if cond=”data:blog.pageType != &quot;item&quot;”>
<b:if cond=”data:blog.pageType != &quot;static_page&quot;”>
<script type=”text/javascript”>
      //<![CDATA[
(function(){var a,b=function(a,b){return function(){return a.apply(b,arguments)}};a=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in a)d=a[c],null!=d&&(b[c]=d);return b},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a}(),this.WOW=function(){function c(a){null==a&&(a={}),this.scrollCallback=b(this.scrollCallback,this),this.scrollHandler=b(this.scrollHandler,this),this.start=b(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults)}return c.prototype.defaults={boxClass:”wow”,animateClass:”animated”,offset:0,mobile:!0},c.prototype.init=function(){var a;return this.element=window.document.documentElement,”interactive”===(a=document.readyState)||”complete”===a?this.start():document.addEventListener(“DOMContentLoaded”,this.start)},c.prototype.start=function(){var a,b,c,d;if(this.boxes=this.element.getElementsByClassName(this.config.boxClass),this.boxes.length){if(this.disabled())return this.resetStyle();for(d=this.boxes,b=0,c=d.length;c>b;b++)a=d[b],this.applyStyle(a,!0);return window.addEventListener(“scroll”,this.scrollHandler,!1),window.addEventListener(“resize”,this.scrollHandler,!1),this.interval=setInterval(this.scrollCallback,50)}},c.prototype.stop=function(){return window.removeEventListener(“scroll”,this.scrollHandler,!1),window.removeEventListener(“resize”,this.scrollHandler,!1),null!=this.interval?clearInterval(this.interval):void 0},c.prototype.show=function(a){return this.applyStyle(a),a.className=””+a.className+” “+this.config.animateClass},c.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”),a.setAttribute(“style”,this.customStyle(b,d,c,e))},c.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.setAttribute(“style”,”visibility: visible;”));return e},c.prototype.customStyle=function(a,b,c,d){var e;return e=a?”visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;”:”visibility: visible;”,b&&(e+=”-webkit-animation-duration: “+b+”; -moz-animation-duration: “+b+”; animation-duration: “+b+”;”),c&&(e+=”-webkit-animation-delay: “+c+”; -moz-animation-delay: “+c+”; animation-delay: “+c+”;”),d&&(e+=”-webkit-animation-iteration-count: “+d+”; -moz-animation-iteration-count: “+d+”; animation-iteration-count: “+d+”;”),e},c.prototype.scrollHandler=function(){return this.scrolled=!0},c.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.stop():void 0},c.prototype.offsetTop=function(a){var b;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},c.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute(“data-wow-offset”)||this.config.offset,f=window.pageYOffset,e=f+this.element.clientHeight-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},c.prototype.util=function(){return this._util||(this._util=new a)},c.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},c}()}).call(this);
// WOW
 new WOW(
  { offset: 100 }
 ).init();


      //]]></script></b:if></b:if>

3- نأتي للمرحلة الأخيرة إبحث عن <b:includable id=’post’ var=’post’> ستجد بجانبه سهم إضغط عليه,
 بأول الكود الذي أسفله ستجد كلمة تشبهه هذه class=’post hentry’ قد تجد كتابة معها لا تقلق ذلك لن يشكل فارقا المهم 
أضف هذه الكتابة wow zoomInUp’ data-wow-duration=’0.6s في داخل ‘ ‘ بحيث ستصبح هكذا :