في هذا الدرس سوف نطبق تأثير مرور الماوث على الصورة بواسطة CSS3, مع معالجة الشاشات التي تعمل باللمس بواسطة مكتبة الجافا سكربت Modernizr.

التوضيح: عندما يقوم المستخدم بتمرير الماوث على الصورة سوف يحدث transition "تبطئ" انيق ويظهر بعض الشفافية على الصورة, وتظهر لنا ايقونة فوق الصورة لينقر المستخدم عليها لتحويلة الى الرابط الخاص بها.

شاهد النتيجة:

http://www.callmenick.com/t...

تحميل نتيجة هذا الدرس:

http://www.callmenick.com/t...

/image-overlay-hover-effects-source.zip

تأثير الشفافية على الصورة واظهار ايقونة عليها طريقة رائعة لاضافة التفاعل الى موقعك, ولتطبيق هذا التأثير على الصور نحتاج الى بعض التبطئ وايقونة مناسبة لعملنا,

لدينا مجموعة من الصور ولنفرض الصور الخاصة بالمقالات عندما يقوم المستخدم بعمل Hover "تمرير الموس" على الصور سوف نقوم بعمل خلفية سوداء شفافة فوق الصورة, وايضا يظهر فوق صورة المقالة ايقونة “+” والمقصود بها انقر لتشاهد المزيد من المعلومات, والان دعونا نبدأ!

البدأ:

في هذا الدرس لن اشرح التأثيرات 6 التي رئيتها في المعاينة سوف اشرح تأثير واحد فقط وانت تستطيع تحميل الكود الخاص بهم جميعا ومشاهدته, والان دعونا نبدأ بكود HTML الخاص بالمثال الاول:

HTML

<div id="effect-1" class="effects clearfix">
    <div class="img">
        <img src="img/jpg/1.jpg" alt="">
        <div class="overlay">
            <a href="#" class="expand">+</a>
            <a class="close-overlay hidden">x</a>
        </div>
    </div>
    <div class="img">
        <img src="img/jpg/2.jpg" alt="">
        <div class="overlay">
            <a href="#" class="expand">+</a>
            <a class="close-overlay hidden">x</a>
        </div>
    </div>
    <div class="img">
        <img src="img/jpg/3.jpg" alt="">
        <div class="overlay">
            <a href="#" class="expand">+</a>
            <a class="close-overlay hidden">x</a>
        </div>
    </div>
    <div class="img">
        <img src="img/jpg/4.jpg" alt="">
        <div class="overlay">
            <a href="#" class="expand">+</a>
            <a class="close-overlay hidden">x</a>
        </div>
    </div>
</div>

توضيح في كود HTML

لقد قمت بتعين كلاس مشترك لجميع التأثيرات 6 وهو .effects وهذا يتيح لنا الوصول الى جميع عناصر div وسوف نضع المحتوى الخاص بالتأثير الاول داخل هذا الكلاس, نقوم بوضع الصور والروابط داخل div ونعطيه كلاس .img.

بدلا من استخدام pseudo class (العناصر اللاحقة) في CSS بكتابة اسمك الكلاس :hover سوف نتحقق منه بستخدام JavaScript/jQuery و Modernizr, جميعها تنفذ نفس التأثير عندما يقوم المستخدم بتمرير الماوس او النقر, مكتبة Modernizr تتيح لنا التحقق ان المستخدم دخل الموقع من شاشة تعمل باللمس (ما يعني في معظم الحالات انك تدخل الموقع من جهاز بشاشة لمس), ان كان المستخدم يتصفح من شاشة تعمل بالمس سوف نقوم بستدعاء تأثير النقر, وان كان يتصفح من جهاز يعمل بالماوس "لابوتوب او كمبيوتر" سوف نقوم بستدعاء تأثير مرور الماوس hover, سوف نستخدم دوال mousenter/mouseleave الخاصة بمكتبة jQuery , وسوف نظهر التأثير من خلال "اضافة/ازالة" كلاس .hover

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

نحن نريد هذا التأثير ان يظهر على الاجهزة التي تعمل بالماوس مثل جهاز الكمبيوتر او الابتوب وسوف يكون التأثير على الشكل التالي عندما يقوم المستخدم بعمل hover:

صورة توضيحية: http://bit.ly/1AjF3oC

والتأثير سوف يظهرعلى الاجهزة التي تعمل بالمس مثل (التابلت او الجوال) على هذا الشكل:

صورة توضيحية: http://bit.ly/1AjFmQo

والان دعونا نشاهد كود CSS المشترك لجميع التأثيرات: (هذا الكود سوف يقوم بضبط موضع الصور ويحدد الارتفاع والعرض الخاص بالتأثير هو مشترك للتأثيرات 6 القادمة)

/* ============================================================
  GLOBAL
============================================================ */
.effects {
  padding-left: 15px;
}
.effects .img {
  position: relative;
  float: left;
  margin-bottom: 5px;
  width: 25%;
  overflow: hidden;
}
.effects .img:nth-child(n) {
  margin-right: 5px;
}
.effects .img:first-child {
  margin-left: -15px;
}
.effects .img:last-child {
  margin-right: 0;
}
.effects .img img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
}

.overlay {
  display: block;
  position: absolute;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: all 0.5s;
}

a.close-overlay {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 45px;
  height: 45px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background-color: #000;
  cursor: pointer;
}
a.close-overlay.hidden {
  display: none;
}

a.expand {
  display: block;
  position: absolute;
  z-index: 100;
  width: 60px;
  height: 60px;
  border: solid 5px #fff;
  text-align: center;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  font-size: 30px;
  border-radius: 30px;
}

والان حان وقت كتابة كود CSS الخاص بالتأثير الاول:

/* ============================================================
  EFFECT 1 - SLIDE IN BOTTOM
============================================================ */
#effect-1 .overlay {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
}
#effect-1 .overlay a.expand {
  left: 0;
  right: 0;
  bottom: 50%;
  margin: 0 auto -30px auto;
}
#effect-1 .img.hover .overlay {
  height: 100%;
}

توضيح في كود CSS

إن كل صورة وكل تأثير خاص بها مجموعة معا في حاوي بخاصية position: relative هذا الأمر يسمح لنا بتحديد مكان التأثير بشكل مطلق مع الصورة. بالنسبة للتأثير الأول، حيث يظهر التأثير من الأسفل، فنحن نعطي عنصر التأثير عرضا بقيمة 100% وبارتفاع بقيمة 0. ونغير قيمة من overflow الى hidden ونحدد مكانه في أسفل العنصر الأب

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

نعطي العنصر الأب خاصية overflow: hidden .

وأخيرا، عندما يتم إعطاء class الخاص بتمرير الفأرة على العنصر الأب، ستتغير قيمة ارتفاع عنصر التأثير إلى 100%. هذا الأمر سجعل التأثير الأسود يرتفع بشكل سلسل. أيضا لاحظ أنّ عنصر close-overlay يملك خاصية display:none في حال تم تطبيق.hidden عليه. سوف نقوم بإظهار زر الإغلاق في حال أخبرنا سكربت Modernizr أنّ الجهاز الذي يستخدمه الزائر يدعم اللمس.

JavaScript/jQuery

$(document).ready(function(){
    if (Modernizr.touch) {
        // show the close overlay button
        $(".close-overlay").removeClass("hidden");
        // handle the adding of hover class when clicked
        $(".img").click(function(e){
            if (!$(this).hasClass("hover")) {
                $(this).addClass("hover");
            }
        });
        // handle the closing of the overlay
        $(".close-overlay").click(function(e){
            e.preventDefault();
            e.stopPropagation();
            if ($(this).closest(".img").hasClass("hover")) {
                $(this).closest(".img").removeClass("hover");
            }
        });
    } else {
        // handle the mouseenter functionality
        $(".img").mouseenter(function(){
            $(this).addClass("hover");
        })
        // handle the mouseleave functionality
        .mouseleave(function(){
            $(this).removeClass("hover");
        });
    }
});

توضيح في كود JavaScript/jQuery

اولا نحن نستخدم مكتبة Modernizr لنعرف ان كان الجهاز لمس ام لا, ان كان الجهاز لمس "جوال ام تابلت...الخ" سوف يفعل تأثير النقر click, وان لم يكن الجهاز لمس "جهاز يعمل بالماوس" سوف نقوم بتطبيق تأثير مرور الماوس Hover بستخدام دالة mouseenter و mouseleave الخاصة بمكتبة jQuery.

لاجهزة المس, اول سوف نقوم بعرض زر close-overlay, وبعدها عندما يقوم المستخدم بالنقر على الصورة سوف نضيف كلاس .hover الى محتوى .img , وطبعا لازالة التأثير يجب عليه الضغط على زر close-overlay وعند الضغط سوف نقوم بحذف كلاس .hover

للاجهزة التي تعمل بالماوس, نحن نستخدم هنا دالة mouseenter و mouseleave لاضافة وازالة تأثير مرور الماوس "hover" الى div, طريقة واضحة ولا تحتاج الى الكثير من الشرح.