Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Waypoints.js
Webdesign

إنشاء رأس تنقل مثبت باستخدام JQuery Waypoints

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

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

إعادة نشر البرنامج التعليمي

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


المقدمة

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

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

ماذا سنفعل

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

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


الخطوة 1: الصندوق

أنا متأكد من أنك على دراية بالعناصر الجديدة المختلفة التي تم تقديمها باستخدام HTML5. في هذا المثال ، سنستخدم اثنين منها: <nav> و <section> . سنبدأ بما يلي:

سنضطر إلى منح شريط التنقل لدينا عرضًا صريحًا. اجعله أكبر بمقدار 28px من الغلاف ، وادفعه إلى مكانه باستخدام الهامس الأيسر السلبي. دعونا أيضاً نعطيها حواف مدورة بلطف باستخدام حدود - * - نصف قطر ، وكذلك بعض الحشو التعسفي.

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

حتى الآن ، يجب أن يكون لديك شيء كهذا:


الخطوة 2: الحواف

الآن ، إذا سمح لنا CSS فقط بتكوين عناصر زائفة متعددة (بمعنى ::: after after after ) ، يمكننا بسهولة استكمال الحواف الدائرية لشريط التنقل بطريقة نظيفة دلالة. لكننا لا نستطيع القيام بذلك ، لذلك سنحتاج إلى إضافة قسمين غير دلاليين في نهاية الملاحة . امنحهم الصفوف من اليسار إلى اليمين و nav-right (أو يمكن أن تسميهم شيئًا مبتكرًا ، مثل Castor و Pollux ). انهم اسعة 14px 14px بواسطة طويل القامة، وتكون المطلق 14px وضع لاي من نهاية الجزء السفلي من الملاحة .

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

يتم إنشاء "الظلال" الصغيرة التي تكمل مظهر شريط شريط التصفح باستخدام after ::  pseudo-elements . كما يتم تحديد عرضها وارتفاعها ، وكذلك نصف قطرها ، باستخدام النسب المئوية.

وننتهي هنا!

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


الخطوة 3: البرنامج النصي

لتحقيق تأثير رأس الصفحة العائم ، سنستخدم إضافة jQuery تسمى Waypoints ، بواسطة Caleb Troughton. الغرض الوحيد منه هو تشغيل الأحداث عندما يقوم المستخدم بالتمرير إلى عنصر معين. كما سترى ، الأمر بسيط للغاية ، ولكنه يوفر الكثير من المرونة - يمكنك إلقاء نظرة على العديد من الأمثلة على صفحته الرئيسية.

تضمين jQuery و Waypoints في صفحتك ، ودعنا نبدأ!

أول ما يجب عليك فعله هو تسجيل نقطة اتصال عن طريق استدعاء .waypoint () طريقة على عنصر. بالطبع ، هذا لا يفعل شيئًا بذاته - سيكون عليك تحديد وظيفة معالج إلى الحدث. أسهل طريقة للقيام بذلك هي تمرير هذه الوظيفة كمعلمة إلى .waypoint () .

جرِّب الآن: أضف ما يلي إلى النص البرمجي وشاهد رسالة منبثقة أثناء التمرير بعد شريط التنقل.

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

في CSS ، أنشئ قاعدة CSS التالية. (عندما تكون في ذلك ، قم بتحريك أي هوامش رأسية قد تكون لدى nav إلى حاوية nav-)

ونحن جاهزون للجزء الجيد! غيّر محتويات النص إلى ما يلي:

حسناً ، من أين أتت كل هذه الأمور؟ حسنًا ، ربما كنت قد برزت أننا نعلق نقطة اتصال على حاوية المعلومات ؛ في هذه المرة فقط ، نفعل ذلك بشكل مختلف. بدلاً من تمرير دالة معالج مباشرة إلى .waypoint () ، نحن نقوم بتغليفه في كائن. منفردا ، هذا لا يحدث أي فرق: كلاهما طرق صالحة تماما للقيام بنفس الشيء. ومع ذلك ، يمكن أن يحتوي الكائن الذي نمر عليه على العديد من قيم الخيارات الأخرى ؛ لذا فإن استخدامه الآن يجعل شفرة أكثر تناسقًا في وقت لاحق.

وتتلقى وظيفة المعالج التي قمنا بتعريفها معلمتين: الأولى هي كائن حدث jQuery القياسي ، وهو قليل الاهتمام هنا. والثاني هو Waypoints-specific: وهي سلسلة تكون قيمتها إما "down" أو "up" اعتمادًا على الطريقة التي كان المستخدم يتنقل بها عند وصوله إلى نقطة الطريق.

الآن ، معرفة الطريقة التي يسير بها المستخدم هي جزء مهم من المعلومات ، لأنه ببساطة يسمح لنا بتنفيذ سلوك مختلف في أي من الاتجاهين. في جسد وظيفة المعالج ، نستخدم نوعًا معروفًا قليلًا نسبياً من jQuery .toggleClass () الطريقة ، مما يجعل الاختزال مفيدًا: في بناء الجملة هذا ، تحدد المعلمة الثانية ما إذا كان سيتم إضافة الفئة إلى العنصر الهدف أو إزالتها منها. عند تمرير المستخدم لأسفل ، يتم تقييم direction === "direction" إلى true ، لذلك يتلقى شريط التنقل التابع لنا الفصل اللزج ، ويلتصق بأعلى إطار العرض. بمجرد أن يقوم المستخدم بالتمرير مرة أخرى مرة أخرى ، تتم إزالة الفصل من شريط التنقل ، الذي يعود إلى مكانه. جربه الآن

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

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

So there it is! لقد حصلنا على شريط تنقل ثابت وجميل ، تمامًا كما تفعل العديد من المواقع الأخرى. العرض أكثر من ...

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


الخطوة 4: الإزاحات الرأسية

إذا فكرت في الأمر ، فهناك العديد من الحالات التي لا يؤدي فيها تشغيل حدث عندما يصل العنصر إلى حافة منفذ عرض المتصفح إلى ما تريد فعله. لحسن الحظ ، توفر Waypoints خيارًا مناسبًا لذلك: الإزاحة. إليك ما يبدو عليه:

يسمح لك الإزاحة بإنشاء نقطة الطريق الفعلية على مسافة متغيرة من أعلى العنصر. تؤدي القيمة الموجبة إلى تشغيل نقطة الطريق عندما يكون الجزء العلوي من العنصر على مسافة محددة أسفل قمة إطار العرض ، وتؤدي القيمة السالبة إلى تشغيل نقطة الطريق عندما يكون العنصر أعلى بكثير من أعلى إطار العرض (أي أن المستخدم قد مرر بشكل جيد ).

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

أول ما يتبادر إلى الذهن هو إضافة بعض المساحة فوق العنصر اللزج. باستخدام المتغير الإزاحي ، يكون الأمر سهلاً: للحصول على تخالف بمقدار 15 بكسل من الأعلى ، أضف الإزاحة: 15 بكسل إلى .waypoint () الخيارات ، وقم بتغيير أعلى: 0px إلى أعلى: 15 بكسل في قاعدة .stickyCSS.

إذا كان التصميم الخاص بك يستدعي ذلك ، فإن التدرج الصغير فوق شريط التنقل قد يكون أيضًا لمسة لطيفة.  يتم إنجاز ذلك بسهولة بإضافة div آخر داخل nav ، وكتابة القليل من CSS:

هذه القطعة الصغيرة جدا من حلوى العين ستعمل بشكل رائع في التصميمات البسيطة.


الخطوة 5: وظائف الأوفست

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

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

ملاحظة: يتم إعادة حساب هذه الإزاحات المولدة من الناحية الإجرائية (بالإضافة إلى تلك المعطاة كنسب مئوية) في كل مرة يتم فيها تغيير حجم النافذة أو إضافة نقاط طريق جديدة أو تعديل خيارات نقطة الطريق. إذا كنت تفعل شيئًا آخر قد يؤثر على مواضع نقاط الطريق (مثل تغيير DOM أو تخطيط الصفحة) ، فتأكد من الاتصال بـ $ .waypoints ('تحديث') بعد ذلك لإعادة حساب المواضع.

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

ليس رث جدا! إنها جميع أجرة jQuery القياسية: بمجرد إضافة أو إزالة فئة لزجة إلى nav، نتخطى الموضع الرأسي للعنصر باستخدام .css () ، ثم .animate () إلى ما ينبغي أن يكون. و .stop () يعمل على منع العيوب المحتملة عن طريق مسح قائمة انتظار الحدث مسج ل.

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

يمكنك بالتأكيد تحقيق تأثير مماثل مع CSSkeyframes بدلاً من ذلك ، ولكن هناك دعم أقل بكثير (والكثير من بادئات البائعين) ، فهي أقل مرونة ، وستكون "الرسوم المتحركة" الأعلى غير كبيرة. نظرًا لأننا لا نترك مسار التحسين التدريجي ، فلا يوجد سبب لعدم الالتزام بالوظائف القوية في jQuery.


الخطوة 6: تسليط الضوء والتمرير السلس

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

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

إن الشفرة التي سنستخدمها في وظيفة معالجنا أقل وضوحا من حيث الوضوح. ها هو:

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

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

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

(بالطبع ، هذا الرمز يذهب فوق قوس ملتوية الماضي!)

على الرغم من وجود طرق أفضل لربط وظيفة للنقر على الأحداث ، فإننا سنلتزم بأكثر الطرق البسيطة: .click (). يتم استدعاء الأسلوب .scrollTo () بطريقة تشبه إلى حد كبير .waypoint (). يحتاج الأمر إلى معلمتين - هدف التمرير وكائن يحتوي على خيارات مختلفة ، والتي ، في هذه الحالة ، تشرح نفسها بنفسها. تعمل سمة href للرابط الذي تم النقر عليه بشكل رائع كهدف تمرير ، ويضع التعبير المستخدم كإزاحة أعلى الهدف عند 15٪ من ارتفاع إطار العرض.


استنتاج

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

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

بسبب طريقة عمل z-index ، يبدو أنه لا توجد طريقة بسيطة لحل هذا الصراع ، باستثناء تجنبه في المقام الأول. ومع ذلك ، فمع بعض الخيال ، بالإضافة إلى معرفة أساسية عن jQuery ، يمكنك هندسة طريقة لإخراج هذه العناصر من طريقة الشريط عند الاقتراب منها. القيام بذلك خارج نطاق هذا البرنامج التعليمي ، على الرغم من ؛ نأمل أن أتمكن من عرضه لك عاجلاً أم آجلاً على شكل نصيحة سريعة ، إما هنا أو على Nettuts +. ترقب!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.