الكاروسيل ثلاثي الأبعاد هو دائري تتحرك شرائحه عبر العمق وليس عبر مستوى مسطح: تدور أو تتدرج أو تدور بحيث تكون الشرائح غير النشطة خلف الشريحة النشطة بشكل واضح. في Elementor تحصل عليه إما من تخطيط تدفق غطاء عنصر واجهة المستخدم Carousel، أو من تصميم مصمم لهذا الغرض.
أربعة أنماط تستحق وقتك. إنهم يقومون بمهام مختلفة، وواحدة منها ستجعل صفحتك أبطأ دون أي فائدة إذا اخترتها للمحتوى الخطأ. عروض توضيحية مباشرة لكل منها، بالإضافة إلى الإعدادات التي تفصل بين دائري سلس ثلاثي الأبعاد ودوامة متلعثمة.
Coverflow: الذي يقصده معظم الناس
الشريحة المركزية تواجهك بشكل مربع. تدور الشرائح على كلا الجانبين بعيدًا على المحور Y، وتتقلص قليلاً وتعتيم. ليس لعينك مكان تذهب إليه سوى المنتصف.
هذه هي الحيلة برمتها، ولهذا السبب نجا تدفق الغلاف من وفاة iTunes. الشرائح الطرفية مرئية بدرجة كافية لإثبات وجود المزيد، وغير واضحة بدرجة كافية بحيث لا يمكنك قراءتها. ينقر الناس على السهم لحل التوتر.
ثلاثة إعدادات تقوم بمعظم العمل
- تدوير: إلى أي مدى تدور الشرائح الجانبية. أي شيء يتجاوز 50° ويصبح الجيران شظايا غير قابلة للقراءة. 30 إلى 40° هو النطاق الذي يُقرأ على أنه عمق وليس تشويه.
- عمق: إلى أي مدى يجلسون. ادفعه بعيدًا جدًا وتتقلص الشرائح الجانبية إلى صور مصغرة، ويفقد التكوين توازنه.
- الشرائح لكل عرض: يحتاج تدفق التغطية إلى ثلاثة مرئية على الأقل أو لا يوجد تدفق “.” اضبطه على 3 على سطح المكتب، و1 على الهاتف المحمول، وتخطي 2 المحرج.
لا تحتاج إلى Pro لهذا. ال أداة دوارة الصورة المجانية يحتوي على تخطيط تدفق الغلاف مدمج.
جيد ل: دراسات الحالة، وقطع المحفظة، ومجموعات نمط الألبوم.
سيئة ل: أي شيء يحتاج الناس إلى مقارنته. تم تصميم Coverflow ليجعلك تنظر إلى شيء واحد.
الوجه: بطاقات ذات وجهين
تدور البطاقة بزاوية 180° كاملة على محورها الرأسي. الوجه الأمامي للخارج والوجه الخلفي للداخل. كلا الوجهين يحملان محتوى حقيقيًا.
معظم التأثيرات ثلاثية الأبعاد هي زخرفة. هذا ليس كذلك. فهو يضاعف المحتوى لكل شريحة، ولهذا السبب يحصل على مكانه على صفحة الفريق. الصورة والاسم في المقدمة، والدور، والسيرة الذاتية، والروابط في الخلف. نفس البصمة، ضعف المعلومات.
الإعداد الذي يخطئ فيه الناس هو رؤية الوجه الخلفي. اتركه وسترى شبحًا معكوسًا للوجه الأمامي ينزف خلال منتصف الدوران. إنه دقيق بما يكفي لتفويته في المحرر وواضح على شاشة شبكية العين. أطفئه.
الشيء الثاني: إبقاء الوجه أقل من 600 مللي ثانية. الوجه هو كشف، والكشف الذي يستغرق ثانية كاملة يتوقف عن الشعور بالاستجابة ويبدأ في الشعور وكأنه حالة تحميل.
جيد ل: شبكات الفريق، قبل/بعد، بطاقات المواصفات، والتسعير مع عكس التفاصيل.
سيئة ل: أي شيء حيث يكون الوجه الخلفي فارغًا. الوجه بدون أي شيء خلفه هو نقرة ضائعة.
هل تريد نفس الكشف على الوجهين كبطاقة واقفة بدلاً من شريحة دائرية؟ هذا هو عنصر واجهة المستخدم Flipbox'مهمة.
القوس: الشرائح على منحنى
تركب الشرائح حافة الدائرة التي يقع مركزها أسفل الطية. يصل كل واحد في وضع مستقيم إلى أعلى القوس وينحرف بعيدًا أثناء انتقاله.
Arc هو النمط ثلاثي الأبعاد الأقل شيوعًا على مواقع WordPress، وهو الأكثر قيمة. لقد رأى الزائر تدفق الغلاف مائة مرة. لم يروا هذا.
يكلفك ذلك شيئًا في المقابل: حركة الانقلاب تعني أن الشرائح قابلة للقراءة بالكامل فقط في الجزء العلوي من القوس. المحتوى الذي يجب أن يكون مقروءًا في المحيط (الأسعار والتواريخ والمواصفات) سيحارب التصميم. الصور والعناوين القصيرة لن تفعل ذلك.
جيد ل: الكتالوجات وقوائم العينات والقوائم ومجموعات العناصر المماثلة.
سيئة ل: بيانات. إذا كان الأشخاص بحاجة إلى قراءة ثلاث شرائح في وقت واحد، فاستخدم الشبكة.
المدار: حركة دائرية حول المركز
تنتقل العناصر في دائرة كاملة حول مركز ثابت. العنصر الموجود في الأعلى نشط وكامل الحجم؛ يتم تصغير الباقي أثناء مرورهم للخلف.
يقول Orbit شيئًا هيكليًا لا يقوله أي تخطيط آخر: هذه الحلقات. تتم قراءة العملية المكونة من أربع مراحل والتي تعود حقًا إلى بدايتها بشكل مثالي. لا يعد التدفق الداخلي المكون من خمس خطوات والذي ينتهي. تعد الدائرة بالعودة، وإذا لم يعود المحتوى الخاص بك، ينتظر الأشخاص شيئًا لا يأتي أبدًا.
استخدم المدار عندما يكون المحتوى عبارة عن دورة. استخدم تدفق الغلاف عندما تكون قائمة.
جيد ل: عجلات العملية، مخططات النظام البيئي، خرائط القدرات، دورات الخدمة.
سيئة ل: تسلسلات مع بداية ونهاية.
كيفية صنع دائري ثلاثي الأبعاد لا يتلعثم
تعتبر التحويلات ثلاثية الأبعاد رخيصة الثمن على وحدة معالجة الرسومات ومكلفة إذا أخطأت في فهمها. أربعة أشياء تفصل بين دائري سلس ودوامة، بالترتيب الذي ستعضك به
- تحريك التحويل والعتامة فقط. يؤدي تحريك العرض أو الارتفاع أو الجزء العلوي أو الأيسر إلى إعادة حساب التخطيط على كل إطار. التحويل والعتامة يذهبان مباشرة إلى المؤلف. كل تصميم هنا يلتزم بهذين الاثنين.
- غطاء حجم الصورة. يحتوي الرف الدائري ثلاثي الأبعاد على عدة شرائح في الذاكرة مرة واحدة لأنها كلها مرئية. ستة شرائح بحجم 400 كيلو بايت لكل منها 2.4 ميجا بايت قبل أن يتحرك أي شيء. احصل عليها بأقل من 200 كيلو بايت وتخدم WebP.
- لا تكدس 3D داخل 3D. تقوم البطاقة القابلة للطي داخل مسار تدفق الغلاف بإنشاء سياقات ثلاثية الأبعاد متداخلة، وتتعامل المتصفحات مع ذلك بشكل غير متسق. يقوم Safari على وجه الخصوص بتسوية التحويل الداخلي في لحظات غير متوقعة. اختر واحدا.
- احترام انخفاض الحركة. يعاني بعض الأشخاص من اضطرابات دهليزية، وتعد الرسوم المتحركة العميقة محفزًا شائعًا. كل تصميم هنا ينخفض إلى التلاشي البسيط عندما
prefers-reduced-motionتم تعيينه. إذا قمت ببناء بنفسك، فافعل الشيء نفسه.
اختبر على هاتف Android متوسط المدى، وليس في محاكي جهاز المتصفح. يقوم المحاكي بتغيير حجم إطار العرض ولكنه يحتفظ بوحدة معالجة الرسومات الخاصة بسطح المكتب. ومن هنا جاءت “it على ما يرام على جهازي.
هل يضر الكاروسيل ثلاثي الأبعاد بسرعة الصفحة؟
ليس في حد ذاته. تعمل الرسوم المتحركة المستندة إلى التحويل على مؤشر الترابط المركب ولا تمنع مؤشر الترابط الرئيسي، لذلك لن تنقل التفاعل الخاص بك إلى Next Paint كثيرًا.
ما يضر: الصور. الرف الدائري الموجود فوق الطية والذي يحتوي على ست شرائح كاملة الحجم هو ستة طلبات صور تحجب العرض تتنافس مع أكبر طلاء مثير للمحتوى. قم بتحميل كل شيء بعد الشريحة الأولى، وقم بتعيين عرض وارتفاع واضحين حتى لا يتغير شيء، واحتفظ بصورة الشريحة الأولى أقل من 150 كيلو بايت.
3d ليست مشكلتك. الحمولة هي.
إذا لم يكن الكاروسيل متحركًا على الإطلاق، بدلاً من أن يكون متحركًا بشكل سيئ، فعادةً ما يكون ذلك بمثابة فشل Swiper في التهيئة بدلاً من مشكلة التحويل. دليل استكشاف أخطاء Swiper وإصلاحها يغطي ما يوقف تحميله.
الأسئلة المتداولة
هل يحتوي Elementor على دائري ثلاثي الأبعاد؟
ليس أصليا. يتميز Elementor's Media Carousel (Pro) بجلد تدفق الغطاء الذي يعطي تأثيرًا ثلاثي الأبعاد خفيفًا، ولكن لا يوجد خيار الوجه أو القوس أو المدار. لأولئك الذين يحتاجون إلى ملحق. إضافات رئيسية مجانية صورة دائري يتضمن تخطيط تدفق الغلاف، وتغطي تصميمات Pro الأربعة الموجودة في هذه الصفحة الباقي.
كيف يمكنني صنع دائري ذو تدفق مغطى في Elementor؟
إسقاط القطعة الدائرية الصورة أضف صورك إلى الصفحة، ثم ضمن تبديل إعدادات الكاروسيل التخطيط من Standard إلى Coverflow. قم بتعيين الشرائح لكل عرض على 3، ثم قم بتدويرها إلى حوالي 35°، وقم بتشغيل الشرائح المركزية بحيث تكون الصورة النشطة في المنتصف بدلاً من تدفقها إلى اليسار.
ما الفرق بين تدفق الغطاء والدوامة ثلاثية الأبعاد؟
يعد Coverflow أحد أنواع الدوارات ثلاثية الأبعاد: النوع الذي تدور فيه الشرائح الجانبية على المحور Y وتنحسر. الوجه والقوس والمدار هي أيضًا دوارات ثلاثية الأبعاد؛ إنهم يستخدمون فقط محاور ومسارات مختلفة. جميع الشرائح الأربعة تتحرك عبر العمق وليس عبر مستوى مسطح.
هل تعمل الدوارات ثلاثية الأبعاد على الهاتف المحمول؟
نعم مع التعديلات. يجب أن ينخفض تدفق الغطاء إلى شريحة واحدة لكل عرض أقل من 768 بكسل أو تصبح الألواح الجانبية شظايا غير قابلة للاستخدام. يعمل الوجه دون تغيير. يحتاج القوس والمدار إلى منفذ عرض أوسع للقراءة بشكل صحيح، لذلك يعود كلاهما إلى الشريحة الأفقية القياسية على الهواتف.
لماذا يومض دائري ثلاثي الأبعاد في سفاري؟
دائمًا ما تكون رؤية الوجه الخلفي. يعرض Safari عكس العنصر الذي تم تدويره ما لم تقم بإخفائه بشكل صريح، والذي يظهر على شكل وميض أو صورة معكوسة شبحية في منتصف الدوران. تعيين backface-visibility: hidden على العنصر الدوار ويتوقف.
أي واحد لاختيار
تدفق الغلاف إذا لم تكن متأكدا. إنه الأسلوب الذي يفهمه الأشخاص بالفعل، وتعطيه لك أداة Image Carousel المجانية بدون ترخيص. قم بالقلب إذا كان المحتوى الخاص بك له جانبان حقًا. قوس إذا كنت تريد شيئًا لا يمتلكه أي شخص آخر في الصفحة الأولى لمكانك. المدار فقط إذا كان الشيء الذي تعرضه بالفعل عبارة عن حلقات. إذا كان القسم قد لا يريد دائرياً على الإطلاق دائري مقابل المنزلق يستقر ذلك قبل أن يكون أسلوب الحركة مهمًا.
إذا كان الشيء الذي تريد تدويره هو أحدث منشوراتك، فقم بتصميم Marquee في موقعنا قوالب مدونة العنصر يضع منشورًا دائريًا مميزًا في أعلى صفحة المدونة.
ثمانية من التصاميم العشرين في المجموعة استيراد على البرنامج المساعد المجاني. لا يوجد أي من الثمانية المجانية ثلاثية الأبعاد، على الرغم من أن Keystone Features Slider يقترب: يؤدي الترويج لعنصر ما إلى تشغيل الرسوم المتحركة لموضع FLIP بدلاً من تحويل العمق.
تم بناء جميع التصاميم العشرين باستخدام منشئ القطعة، وهي أيضًا الأداة التي ستستخدمها لبناء أداة خاصة بك. إذا كنت تزن الترخيص، فإن صفحة التسعير يسرد ما يفتحه كل مستوى.
الأربعة لديهم عروض توضيحية حية على الحاجيات الدائرية العنصر الصفحة، إلى جانب التصاميم الستة عشر الأخرى. إذا كنت تفضل رؤية المجموعة الكاملة جنبًا إلى جنب أولاً، جميع قوالب المنزلق العشرين يتم جمعها في مكان واحد بنفس المعاملة.
كل واحد من العشرين هو أ عنصر واجهة المستخدم أو الامتداد الرئيسي للإضافات، لذلك يقومون بتثبيت نفس الطريقة التي تقوم بها عناصر واجهة المستخدم الخاصة بالمخزون. ل معرض شريط الصور المصغرة بدلاً من المسار ثلاثي الأبعاد، معرض القطعة المنزلق هو الخيار الجاهز.
