ستجذب الواجهة الديناميكية على موقعك انتباه المستخدمين وتزيد من حركة المرور. إن إنشاء رأس متحرك لموقع ويب ليس بالأمر الصعب كما يبدو للوهلة الأولى.
تعليمات
الخطوة 1
دعنا نحاول إنشاء رأس متحرك ، والذي سيغير تكوينه عندما يحوم مؤشر الماوس فوقه. على سبيل المثال ، تم تحويل صورة بالأبيض والأسود في رأس إلى لون عند التفاعل أو تغييرها إلى صورة أخرى.
الخطوة 2
قم بتثبيت مكتبة jQuery على جهاز الكمبيوتر الخاص بك بعد تنزيلها من الموقع الرسمي (jquery.com).
الخطوه 3
اربط المكتبة بملف html الخاص بك بين علامات الرأس باستخدام وسم البرنامج النصي:
الخطوة 4
حدد صورتين ستحلان محل بعضهما البعض عندما يتفاعل المستخدم مع الرأس. إذا كنت تريد الانتقال من الأسود والأبيض إلى اللون ، فقم بإنشاء نسخة من الصورة وقم بإلغاء تشبعها في Photoshop.
الخطوة الخامسة
قم بإنشاء قائمة من عنصرين في مستند html وإرفاق الصور بكل منهما باستخدام علامة الصورة. قم بتطبيق فئة نمط على القائمة نفسها ، على سبيل المثال
الخطوة 6
افعل ذلك في div المسؤول عن رأس موقعك. أولاً ، حدد عنوان الصورة التي يجب أن تنعكس في حالة ثابتة ، ثم العنوان الذي يظهر عند التمرير.
الخطوة 7
أضف class = "pervaya" إلى الصورة الأولى ، والفئة: "vtoraya" إلى الصورة الثانية.
الخطوة 8
في ملف css المرفق ، حدد مواضع العناصر المطلقة (موضع: مطلق ؛) ، ارتفاع وعرض ثابت (ارتفاع وعرض) لهذه الفئات.
الخطوة 9
ضع الصور فوق بعضها البعض. استخدم نمط الفهرس z لهذا الغرض. يسمح لك بمحاذاة العناصر على طول المحور z ، والذي يبتعد عنا في عمق الشاشة.
الخطوة 10
بالنسبة للقائمة نفسها ، حدد المسافة البادئة والمحاذاة التي تحتاجها وقم بإزالة عناصر القائمة (نوع نمط القائمة: لا شيء ؛).
الخطوة 11
قم بإنشاء ملف.js والصق الكود التالي فيه:
$ (document).ready (function () {
$ ("img.grey"). hover (وظيفة () {
$ (this).stop (). animate ({"opacity": "0"}، "slow")؛
}, وظيفة () {
$ (this).stop (). animate ({"opacity": "1"}، "slow")؛
});
});
الخطوة 12
هذا الرمز سوف يحرك رأسك في العمل. لا تنس توصيل ملف.js بمستند html.
