10/08/2017

settings_overscan print announcement
أهلا إخواني..في هذا البرنامج التعليمي سنتعرف على كيفية إنشاء تأثير Aware Hover متحرك يدرك إتجاه الماوس عند التمرير فوق المحتوى أيا كان .. هي ميزة تضيف لمسة أنيقة ونادرة لمدونتك تستطيع إضافتها للتدوينات في قسم البوست على الصفحة الرئيسية أو كذلك للأدوات التي تحتوى على معاينة الصور والإقتباسات  كاداة (مواضيع ذات صلة) وأداة مواضيع عشوائية  (المشاركات الشائعة) أو إذ كانت تحتوي مدونتك على معرض للصور أو المجلات او الافلام والألعاب ..إلى غير ذلك من المحتويات .
سيكون هذا السكريبت أول إصدار تجريبي وبسيط لتوسيع مدارك المستخدم فقط ما أحتاجه منك هو التركيز قليلا ويا حبذاه لو تكون لك خلفية بسيطة في التعامل والتعديل على الأكواد لأنك ستخفف عنا عبء الإستطراد  وتجاوز التنبيهات





طريقة التركيب

كما أشرت سابقا هناك عدة مواضع لتفعيل هذه الميزة ويصعب حصرها أو إحتوائها وأضف إلى ذلك تعارض تنسيق أكواد القوالب لذلك سأقوم بشرح كيفية عمل السكريبت بتطبيق عملي لتستطيع بعد ذلك أن تحور العملية على محتويات أخرى مناسبة لتفعيل هذه الخاصية...وقبل ان نشرع في الموضوع قم بالمعاينة المباشرة لهذه الألية



لاتنسى أخذ نسخة إحتياطية من القالب

شرح عملي بسيط

    الفكرة هي أن يكون لديك شريحة تراكب على رأس الصور المصغرة ..بدايتا بالوسم المسؤول ثم وسم الرابط ثم الصورة المصغرة بداخله بالإضافة إلى العنوان والإقتباس وإليك مثال ذلك
    
    <div id="post"> 
    <a href="//">          
    <img src="images.jpg" />
    </a>
    <h1>
    <a href="//">
    عنوان الموضوع
    </a>
    </h1>
    <p>                  
    وصف الموضوع
    </p>
    </div>
    
    شرح الكود
    الكود المحدد بهذا اللون هو العنصر المسؤول الذي بداخله جميع المحتويات
    الكود المحدد بهذا اللون خاص بالصورة المصغرة
    الكود المحدد بهذا اللون خاص بعنوان الموضوع
    الكود المحدد بهذا اللون خاص بالوصف أو الإقتباس
  • الأن سنقوم بإضافة الرمز المسؤول عن إظهار التأثير Aware Hover داخل الكود
  • 
    <div id="post"> 
    <div id="da-thumbs"> 
    <a href="//">          
    <img src="images.jpg" />
    </a>
    <div class="Aware-Hover"></div>
    </div>
    <h3>
    <a href="//">
    عنوان الموضوع
    </a>
    </h3>
    <p>                  
    وصف الموضوع
    </p>
    </div>
    
    شرح الكود المضاف
    الكود المحدد بهذا اللون هو كود العنصر Aware Hover الذي يتحرك مع الماوس
    الكود المحدد بهذا اللون هو عنصر مسؤول عن إحتواء Aware Hover حتى لايخرج عن إطار الصورة
    ملاحظة مهمة
    لاحظ أن كود العنصر Aware Hover مغلق أي انه عند تمرير الماوس سيظهر على شكل إطار فارغ لذلك تستطيع وضع داخله أيقونة أو صورة ..لكننا نريد ان نضع داخله عنوان الموضوع والإقتباس كما هو مصمم في المعاينة ..إذا سنقوم بتنسيق الكود كالآتي

    
    <div id="post"> 
    <div id="da-thumbs"> 
    <a href="//">          
    <img src="images.jpg" />
    </a>
    <div class="Aware-Hover">
    <h3>
    <a href="//">
    عنوان الموضوع
    </a>
    </h3>
    <p>                  
    وصف الموضوع
    </p>
    </div>
    </div>
    </div>
    
    
    
    لاحظ اننا قمنا بإدخال كل من الصورة والعنوان والوصف داخل العلامة <div id="da-thumbs"> ثم قمنا بإدخال العنوان والوصف داخل العلامة <div class="Aware-Hover"> وهي العلامة المسؤولة عن تأثير Aware Hover أي عند تمرير الماوس فوق الصورة سيظهر لك العنوان والإقتباس ..بنفس العملية ومع القليل من التركيز ستقوم بتهيئة العنصر  لإستقبال كود.js
  • والآن سنقوم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..
  • 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type='text/javascript'>
    //<![CDATA[
    !function(a){a.fn.directionalHover=function(b){function c(a,b,c,e,f,g,h,i){var n=0;g/2>=e-i&&(n^=j),c-h>=f/2&&(n^=k),e-i>g/2&&(n^=l),f/2>c-h&&(n^=m),d(n,a,b,c-h,e-i,f/2,g/2)}function d(a,b,c,d,i,j,k){e(a,n)?f(d,i,j,k)?h(b,c,0,2*-j):h(b,c,2*-k,0):e(a,o)?g(d,i,j,k)?h(b,c,2*-k,0):h(b,c,0,2*j):e(a,p)?g(d,i,j,k)?h(b,c,0,2*-j):h(b,c,2*k,0):e(a,q)&&(f(d,i,j,k)?h(b,c,2*k,0):h(b,c,0,2*j))}function e(a,b){return(a&b)===b}function f(a,b,c,d){return 0>d*a-c*b}function g(a,b,c,d){return 0>c*(b-d)+d*a-c*d}function h(a,b,c,d){"in"===b?a.animate({top:c,left:d},0,function(){a.stop().animate({top:0,left:0},i.speed,i.easing)}):"out"===b&&a.animate({top:0,left:0},0,function(){a.stop().animate({top:c,left:d},i.speed,i.easing)})}var i=a.extend({},a.fn.directionalHover.defaults,b),j=1,k=2,l=4,m=8,n=j|m,o=j|k,p=l|m,q=l|k;return this.css({position:"relative",overflow:"hidden"}),this.find("."+i.overlay).css({width:"100%",height: "100%",position:"absolute",top:"-100%"}),this.each(function(){var b=a(this);b.hover(function(a){c(b.find("."+i.overlay),"in",a.pageX,a.pageY,b.width(),b.height(),Math.floor(b.offset().left),b.offset().top)},function(a){c(b.find("."+i.overlay),"out",a.pageX,a.pageY,b.width(),b.height(),Math.floor(b.offset().left),b.offset().top)})})},a.fn.directionalHover.defaults={overlay:"Aware-Hover",easing:"swing",speed:400}}(jQuery);
    $(window).load(function() {$('#da-thumbs').directionalHover();});
    //]]>
    </script> 
    
    شرح كود js
    الرابط المحدد بهذا اللون هو خاص بمكتبة جيكويري لا تقم بحذفه حتى لو كان موجود في قالب مدونتك وإلا لن يعمل الكود
    الإسم Aware-Hover المحدد بهذا اللون هو معرف الكلاس Aware Hover الذي يتحرك مع الماوس لابد أن يكون بنفس الإسم
    الإسم#da-thumbsالمحدد بهذا اللون هو معرف الآي دي  للعنصر المسؤول عن إحتواء Aware Hover حتى لايخرج عن إطار الصورة كذلك لابد أن يكون بنفس الإسم
    ملاحظة أخيرة
    إعلم أن أكواد الستايل كود.css مضمنة داخل كود.js فلن تحتاج إلى ضبط عنصر Aware Hover فقط سنقوم بإضافة  لون الخلفية لذلك ستضيف الكود البسيط التالي
  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css التالي .. مع إمكانية تغيير اللون بما يناسبك
  • 
    .Aware-Hover {
        background: #f79029;
    }