18 برنامج تعليمي لتمرير المنظر باستخدام jQuery و HTML5 - 2022
نشرت: 2022-03-17تم استخدام المنظر منذ أواخر الأربعينيات من القرن الماضي ، وتم استخدامه مؤخرًا في صناعات مثل الألعاب ، لإنشاء تجارب ألعاب فريدة للجميع. على محمل الجد ، قد يبدو اختلاف المنظر شيئًا جديدًا للمصممين. ومع ذلك ، ظل هذا المفهوم معنا طوال فترة طويلة لدرجة أن المصممين الآن فقط يلحقون بالركب ، ويؤسسوا اتجاهًا حول تأثير التمرير هذا. لتضييق وصف المنظر بشكل أفضل ، إنها تقنية فريدة في تصميم الويب تسمح لمكونات صفحة الويب الفردية بالتمرير جنبًا إلى جنب مع المستخدم في فترات زمنية مختلفة ، مما يساعد على إنشاء تأثير لخلفية متحركة خلف أي حاوية / شبكة / سياق.
في Colorlib ، بذلنا قصارى جهدنا لإعطاء أفضل قدر ممكن من الاهتمام للاختلاف المنظر ، مع الحفاظ على اتساق الأساليب الفريدة في كل مقالة من مقالاتنا:
نود الآن أن نقدم أفضل البرامج التعليمية لتمرير المنظر والتي تتضمن استخدام تقنية مثل jQuery و JavaScript و HTML5 و CSS3. ركزنا على البرامج التعليمية الملائمة للوافدين الجدد في تصميم الويب وبعض الأجزاء الوسيطة لشرح أساس اختلاف المنظر وكيف يعمل.
قبل أن ندخل في دروسنا وكل ذلك ، هناك جانبان لإلقاء نظرة فاحصة عليهما: تأثير التمرير المنظر على تحسين محرك البحث. من المؤكد أن استخدام ميزات التصميم الديناميكي سيكون له تأثير على الطريقة التي تعالج بها محركات البحث موقع الويب الخاص بك ، ولا ترغب في تسوية ميزة يمكن أن يكون لها تأثير سيء على حركة المرور العضوية الخاصة بك. غطت كارلا داوسون من Moz هذا الموضوع بتفاصيل رائعة. الخلاصة الرئيسية من مشاركتها هي سرد 3 تقنيات فريدة يمكنك تطبيقها لجعل تصميم المنظر الخاص بك أكثر ملاءمة لكبار المسئولين الاقتصاديين. يبدأ كل شيء حتى قبل أن تحاول إحداث تأثير اختلاف المنظر الوظيفي على التصميم الخاص بك ، قم أولاً بتنفيذ منهجية تحسين محركات البحث (SEO) ، ثم ركز على إنشاء المحتوى ، وبهذه الطريقة تترك مساحة لمحركات البحث لفهم كيفية عمل موقع الويب الخاص بك ، ولكن أيضًا تسمح للروبوتات لمعالجة المحتوى.
الجانب الثاني هو تجربة المستخدم لتصميم المنظر ، وما إذا كان مناسبًا لجميع التصميمات ، وما نوع المشكلات التي قد يسببها. هذه دراسة بحثية متعمقة حول تأثيرات تصميم المنظر على تجربة المستخدم ، لذلك سوف يستغرق الأمر بعض الوقت لمعالجة وفهم هذه الورقة بشكل كامل. أخذت الدراسة مجموعتين من الأشخاص ، كلاهما أعطيت عينات لمواقع الويب لاستكشافها: اختلاف المنظر ، والتمرير القياسي. لم تكن النتيجة النهائية مفاجئة ، فالمستخدمون يستمتعون بالتمرير المنظر أكثر ، ولكن هذا يأتي على حساب الارتباك ، ومخاوف قابلية الاستخدام العامة بقدر ما يذهب الانتباه. يجب عليك دائمًا إعطاء الأولوية للمستخدمين على الإضافات الفاخرة لتصميمات موقع الويب الخاص بك ، إذا كان هذا يعني الاستعانة بمصمم خبير محترف لتحليلك ، فعليك المضي قدمًا في هذه الفكرة ، خاصة إذا كنت تدير عملية تجارية واسعة النطاق. في تجربتنا الخاصة ، يمكن للمواقع الصغيرة أن تستخدم عادةً التمرير المنظر ، وليس لها تأثير كبير على تجربة المستخدم ، أو قابلية الاستخدام العامة.
الآن بعد أن قمنا بتغطية هذين الموضوعين ، يمكننا البدء في تعلم بعض التقنيات والأساليب حول كيفية تنفيذ التمرير المنظر وإنشاء تأثيرات التمرير الخاصة بك. يأتي البرنامج التعليمي الأول من Petr Tichy ، الذي كان يقوم بعمل الواجهة الأمامية لسنوات عديدة وهو محترف راسخ في هذا المجال. سوف تتعلم مرحلة الإعداد الأولي للاختلاف المنظر ، وكيفية إضافة تأثيرات الرسوم المتحركة التي تتكامل أيضًا مع اختلاف المنظر ، وكيفية تخصيص التوقيت المناسب لكل من الرسوم المتحركة. البرنامج التعليمي معقد بعض الشيء في بعض الجوانب ، لذا فهو موجه للمطورين المتوسطين الذين لديهم معرفة سابقة بـ JavaScript. في نفس البرنامج التعليمي ، ستجد رابطًا لأحد دروس Petr السابقة حول المنظر ، وهو أكثر ملاءمة للمبتدئين.
كتب Ian Yates هذا البرنامج التعليمي في وقت سابق من العام ، وقد يكون هذا أحد أحدث البرامج التعليمية حول هذا الموضوع والتي سنعرضها في هذه المجموعة من دروس المنظر. يأخذ إيان منهج الحصول على الإلهام من موقع ويب آخر يستخدم مزيجًا رائعًا من تأثير اختلاف المنظر ، ويحاول إعادة إنشائه بنفسه. الشيء الوحيد هو أنه يتحدث في الغالب عن التصميمات المميزة التي تحتوي على ميزات اختلاف المنظر ، ويذكر مقتطفًا صغيرًا واحدًا حول كيفية إنشاء تأثير خلفية فريد باستخدام JS و CSS.
لا يمتلك العملاء الكثير من المعرفة حول معايير التصميم ، فالعملاء يميلون فقط إلى الاهتمام بالاتجاهات والأشياء مثل جعل موقع الويب يبدو رائعًا بشكل لا يصدق ، وفريدًا تمامًا لأي شيء يمكن تسميته بالمنافسة. إذا كنت تعمل مع هؤلاء العملاء ، فسيكون من الضروري وجود برنامج تعليمي موجز حول كيفية إنشاء تأثيرات تمرير فريدة على التصميم ، ونعتقد أن لدينا واحدًا هنا سينجز المهمة ، تمامًا مثل هذا. سوف تتعلم كيفية هيكلة كود HTML5 المصمم باستخدام CSS3 ، ثم تضمينه في تأثير اختلاف المنظر باستخدام jQuery.
لقد وصل البرنامج التعليمي من Script Tutorials إلى أكثر من 17000 من المصممين والمطورين بالفعل ، وقد أثار هذا الرقم اهتمامنا ، لأنه يعني أن البرنامج التعليمي يجب أن يعمل حقًا ، ويجب أن يوفر تجربة سلسة لحركة اختلاف المنظر. بعد بعض الاختبارات المحلية ، يبدو أن هذا هو الحال بالفعل. نهج اختلاف المنظر المعتاد في HTML و CSS ، وكل ما عليك فعله حقًا هو نسخ ولصق كلا الرمزين في التصميم الخاص بك ويجب أن تكون جيدًا. على الرغم من ذلك ، يمكننا أن نتخيل أن هذا يكون أكثر صعوبة قليلاً في المواقف التي تحتاج فيها إلى تنفيذه لتصميمات مخصصة ، لذلك ربما نحتاج إلى مواصلة البحث عن البرامج التعليمية الشاملة التي يمكن أن تساعد في ذلك.
قد يكون آندي شورا قادرًا على مساعدتنا في هذا الصدد. تتمثل أهدافه الرئيسية في إنشاء تأثير اختلاف المنظر لا يضر بأداء موقع الويب ، والذي يتحقق من خلال: تقليل مقدار تفاعلات DOM لأحداث التمرير ، واستخدام تسريع الأجهزة لزيادة أداء الأجهزة المحمولة. في الواقع ، هذا دليل آخر للتعرف حقًا على الطريقة التي تتفاعل بها الأجهزة المحمولة مع اختلاف المنظر ، وما الذي يمكن فعله لدفع الحد الأقصى من الأداء مع عدم فقدان الجودة أو جاذبية التصميم. سوف تستكشف مقتطفين مختلفين من jQuery يتم استخدامهما لإنشاء تأثيرات أداء أفضل في المنظر على أي تصميم موقع.
نظرًا لأن اختلاف المنظر هو أسلوب جديد (حسنًا ، بضع سنوات حتى الآن ، ولكن لا يزال) لديه الكثير من التحديات التي يقدمها للمطورين الذين يرغبون في تنفيذ اختلاف المنظر لمتصفحات الويب القديمة ، فإن العملية ليست سهلة وتتطلب القليل من الفهم لكيفية عمل المتصفحات القديمة مع ميزات الويب الجديدة. يستمر البرنامج التعليمي في إظهار الأمثلة الجيدة والسيئة بين مواقع الويب المنظر ، وما يمكن تعلمه في عملية التحليل. يستمر الحديث عن زوايا مختلفة من اختلاف المنظر أيضًا ، مثل الرأسي والأفقي - لقد تطورت إمكانيات تصميم الويب الحديث حقًا إلى مستوى جديد. ستتعرف على مكتبات JavaScript الأكثر فائدة فيما يتعلق بالمنظر ، ولكل منها وثائق ودروس تعليمية فردية متاحة لهم عبر الإنترنت ، وقد أردنا مشاركة هذه المكتبات بأنفسنا ، لكن الكمية لم تكن كبيرة جدًا ، لذلك ستتعرف على المزيد كل منهم في هذا البرنامج التعليمي. هذا مورد رائع حقًا لجميع اختلاف المنظر ، لا سيما التفاعلات والطرق المختلفة لتحقيق تأثير التمرير الديناميكي.
كيفية إنشاء تأثير اختلاف بسيط
على الرغم من أن Sara Vieira مطور رائع ، إلا أنها لا تتلاعب بالكود أو المصطلحات المعقدة عندما يتعلق الأمر بموضوعات مثل اختلاف المنظر. إنها تفضل إنشاء تقنية بسيطة لتحقيق النتيجة المرجوة ، وتتيح لك تجربة الكود الذي شاركته وفقًا لسرعتك الخاصة. ستقوم بتجربة الثلاثة الكبار: JS و HTML و CSS. أفضل طريقة للتجربة ستكون على خادم ويب محلي ، أو في مجلد منفصل على خادمك المباشر ، واطلع على نوع النتائج التي يمكنك تحقيقها بهذه الطريقة.
تأثير اختلاف المنظر مع jQuery
ما هو لطيف في هذا البرنامج التعليمي ، هو أنه تم تنفيذه بالفعل في الصفحة التي تشاهدها ، لذلك ليس هناك الكثير من الحاجة للشرح في نص مكتوب ، ولكن بالأحرى إعطاء مثال في شكل رمز حي. يمكنك الحصول على مقتطف HTML / CSS ودمجه مع مقتطف jQuery لتحقيق نفس تأثير اختلاف المنظر للصفحة التي تشاهدها. مع وجود القليل من المقتطفات الوصفية (التعليق) المتوفرة على الجانب الأيمن من كل جزء من أجزاء التعليمات البرمجية.
في النهاية ، تريد الاعتماد على CSS قدر الإمكان. تعني CSS أداءً أفضل بكثير ، ومتاعب أقل في التعامل مع اللغات الديناميكية مثل jQuery. ما لديك هنا هو مقتطف CSS بسيط من شأنه أن يغير من حاويات المحتوى الخاصة بك ويجعل تجربة المحتوى أكثر ثراءً ، مع معيار أداء رائع.
Stellar.js هي مكتبة JavaScript شائعة بشكل معقول تم إنشاؤها للمساعدة في إضافة تأثيرات المنظر بسرعة إلى مواقع الويب الخاصة بك. على الرغم من أن المكتبة لم تشهد تطورًا كبيرًا في العام الماضي ، إلا أنها لا تزال قيد الاستخدام من قبل المطورين والمصممين في جميع أنحاء المجتمع. سوف تستكشف عملية كيفية دمج Stellar في تصميماتك بحيث يتم منح عناصر معينة تأثير اختلاف المنظر. تعد المكتبة بالتأكيد خيارًا آمنًا لتوصيل هذه الميزات الديناميكية ، لأنه يمكن فصلها بسهولة عن سير عمل التطوير الرئيسي إذا لزم الأمر.
استخدام Parallax لجعل موقع WordPress الخاص بك مميزًا
يتم استخدام المنظر في العديد من السياقات المختلفة ، على المرء أن يتساءل ما الذي جعل المستخدمين يعودون إلى هذه الميزة المثيرة ، وبالنسبة للكثيرين - كان هذا السبب هو القدرة على سرد قصص أفضل ، من خلال استخدام رسوم متحركة للتمرير السلس يمكن أن تأخذ القارئ من جزء من القصة إلى الجزء الآخر بهذه الحركة المتدفقة الرائعة. وماذا عن مدونات WordPress ، كيف نضيف اختلاف المنظر إلى WordPress دون استخدام السمات الفريدة التي تدعم الوظيفة؟ إذا كان هذا هو السؤال الملح حقًا ، فستجد جميع الإجابات في البرنامج التعليمي التالي. نشعر أن هذا هو البرنامج التعليمي الأكثر شمولاً حول اختلاف المنظر لمدونات WordPress ، ونأمل أن تضيف قريبًا هذه التأثيرات الرائعة إلى مدوناتك الخاصة. تخطي المقدمة إذا كنت تعرف بالفعل ما يفعله اختلاف المنظر ، فقد تم تخصيص جزء كبير من الدليل لشرح اختلاف المنظر بالتفصيل ، لذا تجنب أي شيء تشعر أنك تعرفه بالفعل.
ما هو Wix؟ إنها منصة بناء مواقع الويب المجانية الرائدة على الويب ، وكان هؤلاء الرجال يعملون إلى الأبد! هذا ليس برنامجًا تعليميًا كبيرًا ، بل هو موجه للمطورين الذين يعملون مع العملاء ونوع العملاء الذين يفضلون استخدام منصات مثل Wix لاستضافة مواقع الويب الخاصة بهم وبنائها. الآن يمكن لمستخدمي Wix الاستمتاع أيضًا بتأثير المنظر ، ولديهم الكثير من العروض التوضيحية الجيدة لتظهر لك ، من أجل إغرائك. نحن نمزح بالطبع ، يمكن أن يوفر استخدام Wix الكثير من الوقت لضرورة إنشاء تصميم فريد ، ومما يثير الدهشة لم ينخفض الطلب على مواقع الويب ، على الرغم من أن العملاء يمكن أن يحققوا هذه التصميمات الرائعة بأنفسهم إذا استغرقوا القليل من الوقت الإضافي للتعرف على النظام الأساسي الذي يستخدمونه لاستضافة موقع الويب الخاص بهم. لا تخف من تقديم فرصة لعملائك الجدد لاستضافة موقع الويب الخاص بهم باستخدام Wix أو أي نظام أساسي آخر لبناء مواقع الويب. إنها خطوة في الاتجاه الصحيح فيما يتعلق بصيانة موقع الويب ، وفي بعض الحالات ؛ أداء أيضا.
المنظر الأفقي باستخدام CSS
لديك العديد من الخيارات لتصميم المنظر ، طالما أنك تعرف ما تفعله كمصمم ومطور للواجهة الأمامية ، يمكنك تحويل أي شيء إلى تأثير اختلاف المنظر ، حتى نسخ المناظر الطبيعية باستخدام لا شيء سوى القليل من CSS و jQuery سحر! يأخذك Dave Chenell خلال الخطوات اللازمة لإنشاء تأثير تصميم المناظر الطبيعية في المنظر.
كيفية عمل توضيح متعدد الطبقات للمنظر باستخدام CSS و Javascript
يتكون تأثير اختلاف الطبقات من استخدام صورتين فوق بعضهما البعض لكشف سيناريو مرئي معين. سيؤدي ذلك إلى زيادة تعزيز التجربة المرئية التي سيحصل عليها المستخدمون مع التصميم / موقع الويب الخاص بك ، وهذه أيضًا فرصة رائعة لاستكشاف إمكانيات الرسم اليدوي وإدراجه في تصميم موقع الويب ، نظرًا لأنك سترغب في الغالب في استخدام شيء ما يمكن أن تتراكب فوق بعضها البعض وتكون منطقية تمامًا ، كما سترى في المعاينة التجريبية.
Pure CSS Parallax Websites. نقي CSS Parallax Websites
برنامج تعليمي لطيف حول إنشاء تأثير تمرير قوي باستخدام اختلاف المنظر ، باستخدام CSS الأصلي.
إعادة تكوين تأثير Firewatch Parallax
تمت تسمية Parallax بالعديد من الأسماء ، وهناك بالتأكيد مجموعة مخلصة من المصممين / المطورين الذين يكرهون تمامًا اتجاه اختلاف المنظر ، ولكن ما الذي يمكنك فعله ، يبدو أنه يعمل مع الكثيرين ، فلماذا تتوقف عند إنتاج البرامج التعليمية والمحتوى على كيفية جعل هذا التأثير ممكنًا في الوقت الفعلي. سيقوم البرنامج التعليمي الذي لدينا هنا بإعادة إنشاء تأثير معين من موقع Firewatch على الويب ، لإنشاء نوع من تأثير المناظر الطبيعية جنبًا إلى جنب مع العناصر المتساقطة للسماح بالكشف الإضافي للمحتوى. يبدو الأمر صعبًا في البداية ، لكن هاميش (مؤلف البرنامج التعليمي) يهتم جيدًا بشرح كل شيء خطوة بخطوة.
مهما كانت متطلباتك ، نشعر أن البرامج التعليمية التي قمنا بإدراجها ستغطي تمامًا جميع الجوانب التي تأتي في اتجاه تصميم الويب الناشئ هذا. من التأثيرات البسيطة ، إلى التأثيرات المحسّنة للأداء ، إلى الأساليب الفريدة لتقديم تجربة محتوى ستبقى في الذاكرة لمدة تزيد عن دقيقتين. يعود الكثير مما يجري في تصميم الويب إلى الإلهام ، وكيفية إلهام المستخدمين والقراء من خلال التحولات الفريدة التي يتم تحقيقها من خلال إتقان التصميم.