كيف أضيف رسوم متحركة لموقعي

بقلم فريق كيف؟

آخر تحديث: 25 أكتوبر 2026 · سياسة التحرير

لوتي فايلز تُختار منها حركة صغيرة لزر لا مشهد يملأ الصفحة

مثال: سهم بجانب زر التسجيل

زر التسجيل يضيع تحت الصورة. تريد حركة صغيرة تشير إليه، وتتوقف أو تحترم إعداد تقليل الحركة.

1. حدد الوظيفة بجملة: الحركة تشير إلى الزر ولا تكرر الشعار في كل الزوايا.
2. ادخل إلى LottieFiles من زر الصفحة. ابحث بكلمة الوظيفة لا بأجمل معاينة في الصفحة الرئيسية.
3. اقرأ رخصة الملف الظاهر قبل التنزيل. الاستخدام التجاري إن كنت تحتاجه يُراجع هناك لا يُفترض.
4. جرّب الملف في صفحة تجريبية. راقب الحجم. الحركة الثقيلة على الجوال تؤخر ظهور الزر نفسه.
5. وفّر بديلًا ثابتًا لمن يفعّل تقليل الحركة في نظامه إن كان موقعك يستطيع ذلك. لا تجعل الفهم معتمدًا على الحركة وحدها.
6. لا تكرر الحركة نفسها في ثلاثة أماكن. سهم واحد يكفي.

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

المكتبة ليست هوية كاملة

لا تملأ الشاشة بحركات متزامنة

تصميم ثابت أو تجربة كود أو قالب فيديو

• كيف أصمم بدون خبرة

  كانفا لصورة أو غلاف ثابت حين لا تحتاج حركة في الواجهة أصلًا.

• كيف أجرب كود HTML و CSS

  كودبن لتجربة حركة تكتبها بنفسك حين لا يناسبك ملف جاهز وتريد أن ترى الكود.

• كيف أصنع فيديو لانستقرام

  فيستا كريت لقالب فيديو جاهز على الشبكات حين لا تحتاج ملف حركة خفيفًا يشرح زرًا داخل الصفحة.

• حركة واحدة بعد أن يُقرأ النص
• قسم التصميم