يقرأ القسم الثابت كصورة مسطحة. امنحها انجرافًا لطيفًا ومتكررًا ونفس العنصر يبدو حيًا. ال امتداد التأثيرات العائمة في ماستر أدونز برو يضيف تلك الحركة المستمرة إلى أي عنصر واجهة مستخدم Elementor، بدون إطارات مفاتيح أو CSS مخصص للكتابة. يشرح هذا الدليل ما يفعله الامتداد، وما يمكنك تحريكه، وكيفية تطبيقه.
ما هو امتداد التأثيرات العائمة؟ #
ال التأثيرات العائمة الامتداد عبارة عن أداة حركة Master Addons Pro تضيف رسومًا متحركة مستمرة ومتكررة إلى عناصر واجهة المستخدم Elementor. يقوم بنقل عنصر واجهة المستخدم بين القيمة من و إلى يترجم, يدور و مقياس يتحول، ثم يعود مرة أخرى، وكل تحويل لديه مدة و تأخير الحقول. يتم تشغيل الحركة على مكتبة Anime.js الصغيرة بسهولة دخول وخروج سلسة. الأقسام والأعمدة والحاويات لا تحصل على اللوحة.
ما يمكنك تحريكه #
تعمل التأثيرات العائمة من خلال ثلاثة أنواع من التحويلات، ويمكنك دمجها مع عناصر التحكم في التوقيت لتشكيل الحركة
- يترجم: ترجمة X وترجمة Y، كل منهما بقيمة من وإلى تتراوح بين -100 و100 بكسل، للطفو الكلاسيكي لأعلى ولأسفل أو جنبًا إلى جنب.
- يدور: قم بتدوير X وY وZ بين -180 و180 درجة، مع تدوير الأداة ذهابًا وإيابًا للحصول على تأثير.
- مقياس: مقياس X ومقياس Y بين 0 و5، مما يؤدي إلى نمو وتقليص الأداة للحصول على نبض ناعم.
- المدة والتأخير: تصل المدة إلى 10000 مللي ثانية (1000 عند تركها فارغة) والتأخير حتى 5000 مللي ثانية. عند تشغيل أكثر من تحويل واحد، فإنهم يتشاركون جدولًا زمنيًا واحدًا، باستخدام توقيت الترجمة أولاً، ثم التدوير، ثم المقياس.
كيفية إضافة التأثيرات العائمة في العنصر #
يتم تطبيق التأثيرات العائمة لكل عنصر واجهة مستخدم من محرر Elementor، بمجرد تمكين الامتداد في الإضافات الرئيسية. باختصار: حدد العنصر الذي تريد تحريكه، وافتح إعداداته، وقم بتشغيل التأثيرات العائمة، واختر التحويل بتوقيته.
- تأكد ماستر أدونز برو مثبت ونشط، ويتم تمكين ملحق Floating Effects في لوحة Master Addons.
- في محرر Elementor، حدد عنصر واجهة المستخدم الذي تريد تحريكه.
- افتح إعدادات العنصر وابحث عن الإضافات الرئيسية التأثيرات العائمة الضوابط، ثم تبديل التأثير على.
- تشغيل يترجم, تدوير أو مقياس، قم بتعيين القيم من وإلى، ثم مدة و تأخير.
- قم بمعاينة الصفحة أو نشرها لرؤية انجراف العنصر على الموقع المباشر.
نصائح لاستخدام التأثيرات العائمة #
- حافظ على الحركة دقيقة. مسافة ترجمة صغيرة ومدة بطيئة للقراءة على أنها مصقولة؛ تبدو الحركة الكبيرة والسريعة مشتتة للانتباه.
- استخدمه على عنصر أو عنصرين لكل عرض. صورة أو أيقونة بطل عائمة واحدة تلفت الأنظار؛ صفحة كاملة متحركة تتنافس مع نفسها.
- إقرانها مع حركة الدخول. الجمع بين التأثيرات العائمة مع الرسوم المتحركة المدخل يتم التمديد بحيث يسهل العنصر أولاً، ثم يحافظ على تعويمه اللطيف.
- التحقق من ذلك على الهاتف المحمول. تأكد من أن الحركة لا تزال تبدو جيدة على الشاشات الصغيرة ولا تدفع المحتوى القريب.
الأسئلة المتداولة #
ما هو امتداد التأثيرات العائمة في الإضافات الرئيسية؟
Floating Effects هو امتداد Master Addons Pro يضيف رسومًا متحركة مستمرة ومتكررة إلى عناصر واجهة المستخدم Elementor. فهو ينقل عنصر واجهة المستخدم ذهابًا وإيابًا بين القيم من وإلى مع تحويلات الترجمة والتدوير والقياس، مع إعدادات المدة والتأخير وبدون CSS أو إطارات مفاتيح مخصصة.
ما هي أنواع الرسوم المتحركة التي يمكن أن تخلقها التأثيرات العائمة؟
وهو يدعم ثلاثة أنواع من التحويلات: الترجمة لتحريك عنصر لأعلى ولأسفل أو جنبًا إلى جنب، والتدوير للحصول على تأرجح لطيف ذهابًا وإيابًا، والتوسع للحصول على تأثير نبضي ناعم. يمكنك الجمع بين التحويل وإعدادات التوقيت لتشكيل الحركة الدقيقة التي تريدها.
هل يمكنني التحكم في سرعة واتجاه الرسوم المتحركة العائمة؟
السرعة، نعم. يحتوي كل تحويل على حقول المدة والتأخير، لكن التحويلات المجمعة تشترك في جدول زمني واحد، باستخدام الترجمة أولاً، ثم التدوير، ثم القياس. لا يوجد إعداد للاتجاه: يتم تشغيل الحركة دائمًا من القيمة من إلى القيمة To والعودة.
هل تعمل التأثيرات العائمة على أي عنصر عنصر؟
يعمل على عناصر واجهة المستخدم فقط، مثل الصورة أو الرمز أو العنوان أو الزر. لا تحصل الأقسام والأعمدة والحاويات على لوحة التأثيرات العائمة، لذا لتعويم مجموعة من العناصر، قم بإضافة التأثير إلى كل عنصر واجهة مستخدم.
هل ستؤدي الرسوم المتحركة العائمة إلى إبطاء موقع الويب الخاص بي؟
يتم تشغيل الحركة من خلال مكتبة Anime.js الصغيرة وتقوم فقط بتحريك تحويلات CSS، والتي تتعامل معها المتصفحات بشكل جيد. للحفاظ على سلاسة الصفحات، استخدمها على عنصر واحد أو عنصرين فقط لكل عرض وحافظ على دقة الحركة بدلاً من تحريك كل شيء على الصفحة مرة واحدة.
هل التأثيرات العائمة مجانية؟
No. Floating Effects هو جزء من Master Addons Pro. يحتوي Free Elementor على رسوم متحركة للمدخل يتم تشغيلها مرة واحدة، ولكن لا يوجد عوامة متكررة.
