كيفية جعل موقع الويب الخاص بك مستجيبًا وتفاعليًا باستخدام CSS و JavaScript

يعد امتلاك موقع ويب سريع الاستجابة وتفاعلي مطلبًا غير مكتوب لكل مالك موقع ويب. لا يمكن المبالغة في فوائد وجود موقع ويب تفاعلي يتكيف تمامًا مع أي حجم شاشة.

يجب عليك إنشاء تجربة مخصصة لكل مستخدم يزور موقع الويب الخاص بك ، ومع العديد من خصائص CSS وبعض وظائف JavaScript ، يمكنك فعل ذلك تمامًا.

في هذه المقالة التعليمية ، ستتعرف على كيفية جعل موقع الويب بتنسيق HTML و CSS مستجيبًا وتفاعليًا.

جعل موقع الويب الخاص بك تفاعليًا

عند إنشاء موقع ويب ، تبدأ من أعلى إلى أسفل. لذلك ، فإن جعل موقع الويب الخاص بك تفاعليًا هو عملية يجب أن تبدأ أيضًا من الأعلى. يأخذ هذا الموقع المحفظة بنينا كمثال. إنه ذو تصميم نظيف ولكنه ليس تفاعليًا تمامًا.

يتغير لون كل عنصر في القائمة عند التمرير فوقه ، ولكن كيف تعرف أي قسم من موقع الويب الذي تتصفحه؟ حسنًا ، هناك طريقتان للقيام بذلك - تنشيط عناصر القائمة باستخدام التمرير و عند النقر الأحداث.

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

الاستعلام محدد DOM.

في دليل مشروعك ، ستحتاج إلى إنشاء ملف جافا سكريبت جديد وربطه بملف HTML باستخدام سطر التعليمات البرمجية التالي:

في النصي العلامة ، ال src value هو اسم ملف JavaScript ، وهو في المثال أعلاه main.js.

ملف main.js

// باستخدام جافا سكريبت لتفعيل عنصر القائمة عند التمرير
const li = document.querySelectorAll (". links") ؛
const ثانية = document.querySelectorAll ("قسم") ؛
الوظيفة النشطة القائمة () {
اسمحوا len = sec.length ؛
while (- len && window.scrollY + 97 li.forEach (ltx => ltx.classList.remove ("نشط")) ؛
li [len] .classList.add ("نشط") ؛
}
activeMenu () ،
window.addEventListener ("التمرير" ، activeMenu) ؛

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

لكي يعمل الرمز أعلاه ، يجب عليك تحديث ورقة أنماط موقع الويب للمحفظة لتضمين الكود التالي في قسم شريط التنقل:

#navbar .menu li.active a {
اللون: #fff ؛
}

تنشيط عناصر القائمة عند النقر

 // باستخدام jquery لتنشيط عنصر القائمة عند النقر
$ (document) .on ('click'، 'li'، function () {
$ (this) .addClass ('active'). siblings (). removeClass ('active')
})

ستؤدي إضافة الكود أعلاه إلى ملف JavaScript الخاص بك إلى تنشيط كل قسم عندما ينقر المستخدم على عنصر القائمة المناسب. ومع ذلك ، فإنه يستخدم jQuery (مكتبة JavaScript) التي تنجز هذه المهمة بأقل قدر ممكن من التعليمات البرمجية.

المشكلة التي قد تواجهها عند تنشيط كل عنصر قائمة عند النقر هي أن شريط التنقل سيغطي الجزء العلوي من كل قسم. لمنع هذا ، يمكنك ببساطة إدخال الكود التالي في قسم الأداة المساعدة في ورقة الأنماط:

الجزء{
التمرير الهامش العلوي: 4.5rem ؛
}

سيضمن الكود أعلاه أنه عند الانتقال إلى كل قسم من خلال النقر ، سيبقى شريط التنقل 4.5 ريم فوق كل قسم (أو 72 بكسل). ميزة أخرى رائعة لإضافتها إلى موقع الويب الخاص بك هي التمرير السلس، والذي يمكنك إنجازه باستخدام كود CSS التالي:

لغة البرمجة {
التمرير السلوك: على نحو سلس.
}

جعل صفحتك الرئيسية تفاعلية

في معظم مواقع الويب ، سيرى المستخدم زره الأول على شريط التنقل أو الصفحة الرئيسية. بصرف النظر عن ظهوره كدعوة تحث المستخدم على اتخاذ إجراء ، يجب أن يكون الزر تفاعليًا أيضًا. طريقة رائعة لتحقيق ذلك هي باستخدام CSS :يحوم المحدد ، الذي يعين حالة جديدة لعنصر ما في كل مرة يمر فيها فأرة المستخدم فوقه.

على موقع الويب الخاص بالمحفظة ، الرابط الوحيد الموجود على الصفحة الرئيسية يحتوي على ملف BTN فئة (مما يعطيها مظهر الزر). لذلك ، لجعل هذا الزر تفاعليًا ، يمكنك ببساطة تعيين ملف :يحوم محدد إلى BTN صف دراسي.

باستخدام: hover Selector

 .btn: مرر {
الخلفية: #fff ؛
لون أزرق؛
الحدود: صلبة زرقاء ؛
نصف قطر الحدود: 5 بكسل ؛
}

ستؤدي إضافة الكود أعلاه إلى قسم الأدوات في موقع ويب المحفظة إلى انتقال الزر من حالة إلى أخرى عند تحريك الماوس فوقه.

ميزة أخرى رائعة للصفحة الرئيسية هي الكتابة المتحركة ، والتي تستخدم كتبه. js (a jQuery كتابة نص متحرك).

باستخدام typed.js

// مسج كتابة نص الرسوم المتحركة النصي
var typed = new Typed (". typing"، {
السلاسل: ["مطور برامج"] ،
اكتب السرعة: 100 ،
السرعة الخلفية: 60 ،
الحلقة: صحيح
});

بعد إضافة الشفرة أعلاه إلى ملف جافا سكريبت ، ستحتاج إلى إجراء التعديل التالي على HTML:

وأنا 

في الكود أعلاه ، استبدلت نص "مطور البرامج" في الكود الأصلي بفئة "الكتابة" ، مما يؤدي إلى إنشاء الرسوم المتحركة للكتابة.

جعل الأقسام الأخرى من موقع الويب الخاص بك تفاعلية

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

إذا كان لديك معرض أو أي قسم للصور على موقع الويب الخاص بك ، فيمكنك استخدام الخاصيتين المذكورتين أعلاه لإنشاء تأثير تحوم على صورك. ستؤدي إضافة كود CSS التالي إلى الصور الموجودة في قسم المشروع على موقع المحفظة الإلكتروني إلى إنشاء تأثير تحويل على الصور الموجودة في القسم:

.img-container img {
أقصى عرض: 450 بكسل ؛
الانتقال: سهولة كل 0.3 ثانية ؛
المؤشر: المؤشر.
}
.img-container img: hover {
تحويل: مقياس (1.2) ؛
}

جعل موقع الويب الخاص بك مستجيبًا

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

متعلق ب: كيفية استخدام استعلامات الوسائط في HTML و CSS لإنشاء مواقع ويب سريعة الاستجابة

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

أفضل طريقة لتحقيق تصميم سريع الاستجابة باستخدام CSS و HTML هي من خلال استعلامات الوسائط. يمكنك وضع استعلام وسائط داخل ملف CSS أو ملف HTML حلقة الوصل بطاقة شعار. النهج الأخير يسهل قابلية التوسع ، وهو أيضًا الطريقة التي سأوضحها.

ستحتاج إلى إنشاء ملفي CSS إضافيين. سيُنشئ ملف CSS الأول بنية التخطيط لأجهزة الكمبيوتر المحمولة الصغيرة والأجهزة اللوحية في الوضع الأفقي. سيكون عرضه الأقصى من 1100 بكسل، كما ترى في علامة الارتباط التالية:

إدخال سطر التعليمات البرمجية أعلاه داخل رأس علامة ملف HTML الخاص بك (أو في هذه الحالة ملف موقع الويب الخاص بالمحفظة) ستضمن أن كل جهاز بعرض شاشة 1100 بكسل وتحت ستستخدم التصميم في عريضة. css ملف.

ملف widecreen.css

/* مسكن */
#navbar .container h1 a span {
عرض لا شيء؛
}
#home .home-content .text-3 span {
اللون: # 000000 ؛
}
/* ملف */
.projects {
تبرير المحتوى: مركز ؛
}
.المشروع{
المرن: 0؛
}
/* عن */
.about-content {
الاتجاه المرن: العمود.
}
/* اتصل */
.contact-content {
الاتجاه المرن: العمود.
}

سينتج عن الكود أعلاه تخطيط سريع الاستجابة على الأجهزة ذات أحجام الشاشة 1100 بكسل وأقل ، كما ترى في الإخراج أدناه:

سيُنشئ ملف CSS الثاني بنية التخطيط للهواتف الذكية والأجهزة اللوحية في الوضع الرأسي. سيكون عرضه الأقصى من 760 بكسل ، كما ترى في علامة الارتباط التالية:

ملف mobile.css

/ * نافبار * /
#navbar .container h1 a span {
عرض لا شيء؛
}
#navbar .container .menu {
الهامش الأيسر: 0rem ؛
}
# قائمة لحم الخنزير {
العرض: 35 بكسل ؛
الارتفاع: 30 بكسل ؛
الهامش: 30 بكسل 0 20 بكسل 20 بكسل ؛
المؤشر: المؤشر.
}
#navbar .container .menu-wrap .menu {
عرض لا شيء؛
}
.شريط{
الارتفاع: 5 بكسل ؛
العرض: 100٪؛
لون الخلفية: #ffffff ؛
العرض محجوب؛
نصف قطر الحدود: 5 بكسل ؛
الانتقال: 0.3 ثانية ؛
}
# شريط 1 {
التحويل: translateY (-4px) ؛
}
# شريط 3 {
التحويل: translateY (4px) ؛
}
/* مسكن */
#الصفحة الرئيسية{
عرض: فليكس ؛
الخلفية: url ("/ images / home.jpg") مركز عدم التكرار ؛
الارتفاع: 100 فولت
}
#home .container {
الهامش: 6rem 1rem 2rem 1rem ؛
الحشو: 2rem.
}
#home .home-content .text-1 {
حجم الخط: 20 بكسل ؛
الهامش: 1.2rem ؛
}
#home .home-content .text-2 {
حجم الخط: 45 بكسل ؛
وزن الخط: 500 ؛
الهامش: 1rem ؛
}
#home .home-content .text-3 {
حجم الخط: 22 بكسل ؛
الهامش: 1.2rem ؛
}
#home .home-content .text-3 span {
اللون: # 0000ff ؛
وزن الخط: 600 ؛
}
#home .container {
الهامش الأيسر: 4.5rem ؛
}
/* عن */
# about .container {
حشوة: 0؛
}
/* اتصل */
#contact .container {
حشوة: 0؛
}

سينتج عن الملف أعلاه تخطيط الهاتف الذكي التالي سريع الاستجابة:

طرق أخرى لإنشاء مواقع ويب تفاعلية سريعة الاستجابة

تعد معرفة كيفية جعل موقع الويب الخاص بك مستجيبًا وتفاعليًا باستخدام CSS و HTML مهارة رائعة يجب أن تمتلكها. لكن هذه ليست الطرق الوحيدة لجعل موقع الويب الخاص بك مستجيبًا وتفاعليًا.

تسهل العديد من أطر عمل الواجهة الأمامية وحتى القوالب الموجودة على خدمات مثل جملة تصميمات تفاعلية سريعة الاستجابة.

15 قالب جملة أنيق للمواقع المستجيبة

تبحث لإنشاء موقع على شبكة الإنترنت لعملك أو بلوق؟ جرب قوالب جملة هذه.

اقرأ التالي

عن المؤلف