يقرأ القسم الثابت كصورة مسطحة. امنحها انجرافًا لطيفًا ومتكررًا ونفس العنصر يبدو حيًا. ال التأثيرات العائمة تمديد في الإضافات الرئيسية للعنصر يضيف تلك الحركة المستمرة إلى أي عنصر، ولا توجد إطارات رئيسية أو CSS مخصصة للكتابة. يشرح هذا الدليل ما يفعله الامتداد، وما يمكنك تحريكه، وكيفية تطبيقه.
ما هو امتداد التأثيرات العائمة؟ #
ال التأثيرات العائمة الامتداد عبارة عن أداة حركة الإضافات الرئيسية لـ Elementor التي تضيف رسومًا متحركة مستمرة ومتكررة إلى أي عنصر أو قسم أو عمود أو عنصر واجهة مستخدم. يقوم بتحريك العنصر باستخدام يترجم, يدور، و مقياس يتحول، ويتيح لك التحكم في مدة, تأخير، و اتجاه من الحركة. نظرًا لأن التأثير يعتمد على CSS، فإن العنصر يستمر في الانجراف من تلقاء نفسه بدون مكتبة رسوم متحركة JavaScript ثقيلة.
ما يمكنك تحريكه #
تعمل التأثيرات العائمة من خلال ثلاثة أنواع من التحويلات، ويمكنك دمجها مع عناصر التحكم في التوقيت لتشكيل الحركة
- يترجم 4- يحرك العنصر على طول المحور X أو Y، وهو العوامة الكلاسيكية لأعلى ولأسفل أو جنبًا إلى جنب.
- تدوير يقوم 2000 بتدوير العنصر قليلاً ذهابًا وإيابًا للحصول على تأثير لطيف.
- مقياس up ينمو ويقلص العنصر للحصول على تأثير نبضي ناعم.
- المدة والتأخير والاتجاه 30 اضبط المدة التي تستغرقها الدورة الواحدة، ومدة الانتظار قبل أن تبدأ، والطريقة التي تسير بها الحركة، بحيث تتطابق الرسوم المتحركة مع وتيرة القسم.
كيفية إضافة التأثيرات العائمة في العنصر #
يتم تطبيق التأثيرات العائمة لكل عنصر من محرر Elementor، بمجرد تمكين الامتداد في الإضافات الرئيسية. باختصار: حدد العنصر الذي تريد تحريكه، وافتح إعداداته، وقم بتشغيل التأثيرات العائمة، واختر التحويل بتوقيته.
- تأكد الإضافات الرئيسية للعنصر مثبت ونشط، ويتم تمكين ملحق Floating Effects في لوحة Master Addons.
- في محرر Elementor، حدد القسم أو العمود أو عنصر واجهة المستخدم الذي تريد تحريكه.
- افتح إعدادات العنصر وابحث عن الإضافات الرئيسية التأثيرات العائمة الضوابط، ثم تبديل التأثير على.
- اختر تحويلاً 2 يترجم, تدوير، أو مقياس ing وضبط مدة, تأخير، و اتجاه.
- قم بمعاينة الصفحة أو نشرها لرؤية انجراف العنصر على الموقع المباشر.
نصائح لاستخدام التأثيرات العائمة #
- حافظ على الحركة دقيقة. مسافة ترجمة صغيرة ومدة بطيئة للقراءة على أنها مصقولة؛ تبدو الحركة الكبيرة والسريعة مشتتة للانتباه.
- استخدمه على عنصر أو عنصرين لكل عرض. صورة أو أيقونة بطل عائمة واحدة تلفت الأنظار؛ صفحة كاملة متحركة تتنافس مع نفسها.
- إقرانها مع حركة الدخول. الجمع بين التأثيرات العائمة مع الرسوم المتحركة المدخل يتم التمديد بحيث يسهل العنصر أولاً، ثم يحافظ على تعويمه اللطيف.
- التحقق من ذلك على الهاتف المحمول. تأكد من أن الحركة لا تزال تبدو جيدة على الشاشات الصغيرة ولا تدفع المحتوى القريب.
الأسئلة المتداولة #
ما هو امتداد التأثيرات العائمة في الإضافات الرئيسية؟
التأثيرات العائمة عبارة عن إضافات رئيسية لامتداد حركة Elementor الذي يضيف رسومًا متحركة مستمرة ومتكررة إلى أي عنصر Elementor. يستخدم تحويلات الترجمة والتدوير والقياس ويتيح لك التحكم في مدة الحركة وتأخيرها واتجاهها، كل ذلك دون كتابة CSS أو إطارات مفاتيح مخصصة.
ما هي أنواع الرسوم المتحركة التي يمكن أن تخلقها التأثيرات العائمة؟
وهو يدعم ثلاثة أنواع من التحويلات: الترجمة لتحريك عنصر لأعلى ولأسفل أو جنبًا إلى جنب، والتدوير للحصول على تأرجح لطيف ذهابًا وإيابًا، والتوسع للحصول على تأثير نبضي ناعم. يمكنك الجمع بين التحويل وإعدادات التوقيت لتشكيل الحركة الدقيقة التي تريدها.
هل يمكنني التحكم في سرعة واتجاه الرسوم المتحركة العائمة؟
نعم. يكشف كل تأثير عن عناصر التحكم في المدة والتأخير والاتجاه. تحدد المدة المدة التي تستغرقها دورة واحدة، ويحدد التأخير مدة الانتظار قبل بدء الحركة، ويحدد الاتجاه الاتجاه الذي تعمل به الرسوم المتحركة، حتى تتمكن من مطابقة العوامة مع وتيرة القسم.
هل تعمل التأثيرات العائمة على أي عنصر عنصر؟
نعم. ينطبق الامتداد على أقسام وأعمدة وعناصر واجهة المستخدم الخاصة بـ Elementor، حتى تتمكن من تعويم صورة أو أيقونة أو عنوان أو زر أو قسم كامل. يمكنك تمكينه لكل عنصر من محرر Elementor بمجرد تشغيل الامتداد في لوحة Master Addons.
هل ستؤدي الرسوم المتحركة العائمة إلى إبطاء موقع الويب الخاص بي؟
يعتمد التأثير على CSS، لذا فهو خفيف الوزن مقارنة بمكتبات الرسوم المتحركة JavaScript الثقيلة. للحفاظ على سلاسة الصفحات، استخدمه على عنصر واحد أو عنصرين فقط لكل عرض وحافظ على دقة الحركة بدلاً من تحريك كل شيء على الصفحة مرة واحدة.
