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

اضافة تأثير أحترافي علي صور المدونة - مجال التأثيرات الحريكة مجال كبيرجدا ويصعب شرحه بالكامل لذلك سوف أقدم لكم اليوم حل بسيط ويعتمد عليه أغلب المدونين لعمل تأثيرات حركية علي صور المواضيع با أستخدام SCC

معاينة

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

أولًا ابحث عن الوسم </head> و اضف الكودين التاليين فوقه

<style type='text/css'>
.imgani .post-body img{opacity:0;transition:all .6s ease;transform:scale(.95) translateY(20px)}.imgani .post-body img.anime{opacity:1;transform:scale(1) translateY(0)}
</style>

 الخطوة الثانية والأخيرة

ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
// Image Transition
var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("imgani")}),$(window).bind("load resize scroll",function(){var o=$(this).height();$(".post-body img").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("anime")})}));
//]]>
</script>

احفظ القالب 

أي أستفسار ضعه في تعليق 

في أمان الله