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

جلب لنا حافظة بهنسي على قيد الحياة مع الرسوم المتحركة المغلق

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Build Your Own Behance-Powered Portfolio.
Styling Our Behance Portfolio Website Using LESS

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

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

الضوء وتأثيرات الحركة

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

هنا هي الأدوات التي نحتاجها لإنجاز هذا:

Magnific منبثقة

نحن ذاهبون إلى الاعتماد على الضوء jQuery البرنامج المساعد دعا المنبثقة Magnific سيمينوف ديمتري. خفيفة الوزن في الحجم، سريع، واستجابة — فقط بالطريقة التي تريدها ونحن.

Animate.css

ونحن سوف تتضمن أيضا الرسوم المتحركة CSS3 للمساعدة في موقعنا ينبض بالحياة. ونحن سوف يكون اعتماد بضع قصاصات من Animate.css، التي توفر مجموعة هائلة من الرسوم المتحركة CSS3 من خلال عدد من فئات المقحمة لتطبيق الحركة على الفور.

دمج Magnific منبثقة

دعونا نبدأ بإضافة ورقة أنماط Magnific منبثقة إلى علامة الرأس.

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

وبعد ذلك، سوف نحتاج إلى إضافة سمة بيانات HTML5، البيانات-المشروع-معرف = "{{this.id}}" إلى عنصر الشكل الذي يلتف صورة الغلاف الحافظة، على النحو التالي.

تحديث الموقع وفحص الموقع من خلال ديفتولس كروم أو الحرائق. وينبغي أن تجد البيانات-المشروع-معرف يحتوي على رقم معرف للحافظة، كما سنرى فيما بعد.

البيانات-المشروع-معرف في العنصر الرقم مع رقم معرف

سوف نستخدم سمة البيانات لاسترداد محتويات الحافظة المحدد مع معرف التي تم تعيينها في وقت لاحق.

وبعد ذلك، سوف نحتاج أيضا لتغيير مظهر المؤشر التكبير في، على النحو التالي:

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

مما يجعل من العمل

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

ثم سوف نحدد المتغيرات التالية:

  • $this، هذا متغير يشير إلى كائن منضم إلى أسلوب.on().
  • وسيتضمن واسطة projectID $this.data('project-id') الذي يستولي على رقم المعرف من سمة معرف بيانات المشروع. سوف نستخدم هذا المعرف لاسترداد المحتوى من خلال API بهنسي.
  • بيبروجيكتكونتينتابي سوف تحتوي على نقاط النهاية بهنسي API لاسترداد محتوى المشروع بهنسي.
  • اسم المفتاح، يشكل هذا المتغير اسم المفتاح الذي يمكننا استخدامه لتخزين البيانات التي تم استردادها من بيهانسي في localStorage. وسيكون شكل اسم بيهانسيبروجيكتيماجيس-ثم متبوعاً برقم معرف المشروع. خلافا لما قمنا به سابقا، ونحن الآن استخدام localStorage لتخزين البيانات بدلاً من استخدام sessionStorage. والسبب هو أن نفترض أن المستخدمين بهنسي نادراً ما تحديث المحتوى مرة واحدة قد تم نشر. لذا، في هذه الحالة، نحن الأفضل استخدام localStorage، كما أنها ستقوم بتخزين البيانات إصرار؛ ستبقى البيانات في المستعرض طالما أننا لا تحذف عمدا فإنه.

ثم نقوم بإنشاء الدالة الرئيسية التي سيتم تنفيذ المنبثقة ماجينيفيك. سنقوم اسم هذه الدالة showGallery(). كما أننا سوف تطبق الخيارات التالية في Magnific المنبثقة:

  • البنود؛ البنود التي مهمة جداً هنا. هذا وسوف تحتوي على قائمة الصور التي سيتم عرضها في Lightbox.
  • معرض؛ Magnific منبثقة عندما نمكن معرض، سوف يضيف الأسهم للتنقل من خلال كل صورة فيه.
  • اكتب؛ سوف نستخدم الصورة لنوع المحتوى فقط المسموح بها في Lightbox.

هذه القطعة الأخيرة أمر لا مفر منه؛ سيكون لدينا لإضافة.magnificPopup('open') حتى يفتح الضوء الفور بعد التهيئة.

سوف نقوم فقط بتنفيذ showGallery() تحت شروط معينة. إذا كانت بيانات حافظة المحدد متوفراً في localStorage، الذهاب الحصول عليها وتنفيذ showGallery() وخلاف ذلك الحصول على البيانات من API مع $.getJSON() الأولى، ثم تنفيذ showGallery() وتخزين البيانات في localStorage للاستخدام في المستقبل. كما فعلنا سابقا، لدينا لاستخدام JSON.stringify() لتحويل البيانات إلى سلسلة حيث يمكن حفظه في localStorage، ثم سوف نستخدم JSON.parse() لتنسيق البيانات مرة أخرى إلى JSON.

التحقق من الصور

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

هنا هو السيناريو كله، في النهاية.

الآن، عند النقر فوق الصورة، فإنه ينبغي أن التكبير في وعرض أزياء الضوء:

إذا كنت تفقد الموقع مع "ديفتولس كروم"، يجب عليك الآن البحث عن المحتوى المخزنة في localStorage.

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

دمج Animate.css

أولاً وقبل كل شيء، أننا سوف تحتاج إلى إضافة مينكلاس: 'الرسوم المتحركة' وريموفالديلاي: 350 لأن الدالة ماجنيفيكبوبوب.

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

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

تكييف أنماط Keyframe

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

دعونا نبدأ مع الإطارات المفتاحية.

وأضاف لدينا عدة إطارات مفتاحية المسمى فادينرايت، فادينليفت، فاديوترايت، فاديوتليفت، فاديندوون، وفاديوتدوون التي ترجمت إلى شكل أقل مع.keyframes() ليست Mixins.

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

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

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

وعلاوة على ذلك، سوف تنتج المنبثقة Magnific مجموعة من فئات جديدة لاستهداف دول مختلفة؛ على سبيل المثال، عند ظهور الضوء الكامل، فإنه سيضيف الفئة mfp جاهزة. في هذه الحالة، لقد حددنا العتامة إلى 0.8. كما أننا قمت بضبط عملية الانتقال، فإنه سوف يعطينا تأثير الحركة؛ وسوف ينقل العتامة من 0 إلى 0.8 في 350ms.

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

أدناه قواعد الأنماط التي تبث الضوء المحتوى.

مثل تراكب الخلفية، نحن أيضا تعيين مدة الانتقال للمحتوى في 350ms. ونحن أيضا تطبيق الإطارات المفتاحية مع.animation-name() Mixins. هنا لقد حددنا المحتوى لتتلاشى في وفي نفس الوقت الشريحة أسفل عندما يظهر، ثم الشريحة إلى الأسفل وتتلاشى عندما يختفي.

تحريك أسهم التنقل

وأخيراً، سوف نضيف الرسوم المتحركة للأسهم الإليكتروني لدينا.

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

الاستنتاج

لقد كان سلسلة طويلة جداً البرنامج تعليمي! ونحن بني نجاح موقع شخصي حافظة عاملة من الألف إلى الياء مع API بهنسي كمصدر للبيانات. لبناء موقع الويب الخاص بنا، لقد استخدمت أيضا عددا من الأدوات الحديثة مثل أقل، هاندليبارسجس، و Animate.css. جميلة سهلة لنشر الموقع، نظراً لأنها فقط HTML ثابتة--في الواقع، لدينا التجريبي يتم استضافتها كصفحة ثابتة GitHub. وبدلاً من ذلك، يمكنك تحميل باستخدام بروتوكول نقل الملفات إلى ملقم ويب.

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

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.