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

كيفية إضافة "Microinteractions" إلى موقع الويب الخاص بك بشكل سريع

by
Difficulty:BeginnerLength:ShortLanguages:

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

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

شاهد مقطع فيديو عن Micron.js

1-الحصول على micron.js

تفضل بزيارة صفحة "micron.js" الرئيسية وستجد ، إلى جانب بعض العروض التوضيحية ، رابطًا إلى الريبو. لتبدأ ، ستحتاج إلى ملف "CSS "وملف "جافا سكريبت" ، روابط "CDN" التي تبدو كالتالي:

إما أن تضيفها إلى صفحتك كما تراها ، أو إذا كنت تستخدم قلم CodePen ، أضف الارتباطات إلى علامات تبويب CSS و JavaScript في إعدادات القلم.

2-إضافة "Microinteraction"

ويستخدمان عنصر ارتساء كمثال. خذ ما يلي:

النقر على مرساة كهذه لن يفعل شيئًا على الإطلاق. ومع ذلك ، بإضافة سمة بيانات من خلال اسم data-micron ، يمكننا إضافة بعض الذوق إلى المرساة لدينا.

 سترى هنا أننا أضفنا القيمة shake إلى سمتنا. كان من الممكن أن يكون هذا واحدًا من عدد من القيم ، كل ذلك يمنحنا تفاعلًا مختلفًا:

  • shake
  • fade
  • jelly
  • bounce
  • tada
  • groove
  • swing
  • squeeze
  • flicker
  • jerk
  • blink
  • pop

الآن عندما تنقر على نقطة الارتساء ، سترى بعض التعليقات المرئية في شكل "microinteraction" الخاص بنا.

3-ضبط مدة الرسوم المتحركة

ستسمح لنا إضافة سمة بيانات أخرى بتغيير مدة الرسوم المتحركة:

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

4-ضبط تخفيف الدالة

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

مرة أخرى ، يتم دعم عدد من القيم المألوفة هنا:

  • linear
  • ease-in
  • ease-out
  • ease-in-out

5-ربط عنصر آخر

يمكننا استخدام micron.js لاستهداف عناصر بخلاف ما يتم النقر عليه ، وهذه المرة مع اثنين من سمات البيانات:

وفي هذه الحالة نقول أن الربط true، وأن كنا نريد للحركة بأن تصبح نافذة المفعول على عنصر مع معرفة target.

تحقق من العرض التوضيحي أدناه للحصول على مجموعة من كل هذه الأمثلة ، بما في ذلك الربط (انقر فوق الزر المندمج- bound ومشاهدة تحريك div الأحمر):

الاستنتاج

تقدّم Micron.js قدرًا أكبر من التفاعلات الجزئية مقارنةً مع ما شرحناه في هذا البرنامج التعليمي ، ونزور الموقع الإلكتروني ، ونلعب ، وترى بنفسك!

التعرف على المزيد

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.