لوادر ذات عنصر واحد: الانتقال ثلاثي الأبعاد!

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

محمل مكعب الانقسام

إليك أداة تحميل ثلاثية الأبعاد حيث يتم تقسيم المكعب إلى جزأين ، ولكن يتم تصنيعه فقط من عنصر واحد:

كل نصف مكعب مصنوع باستخدام عنصر زائف:

رائع ، أليس كذلك ؟! يمكننا استخدام التدرج المخروطي مع CSS clip-path على العنصر ::before و ::after الصور الزائفة لمحاكاة الوجوه الثلاثة المرئية لمكعب ثلاثي الأبعاد. الهامش السالب هو ما يجمع بين الشكلين الزائفين معًا لتداخل مكعب كامل ومحاكاته. يتمثل الجزء المتبقي من عملنا في الغالب في تحريك هذين النصفين للحصول على لوادر أنيقة المظهر!

دعنا نتحقق من الصورة المرئية التي تشرح الرياضيات خلف نقاط مسار القصاصة المستخدمة لإنشاء هذا العنصر الشبيه بالمكعب:

لدينا المتغيرات والمعادلة ، لذا فلنعمل على حلها. أولاً ، سننشئ المتغيرات الخاصة بنا ونحدد حجم المتغير الرئيسي .loader جزء:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

لا شيء مجنون جدا حتى الآن. لدينا 150px مربع تم إعداده كحاوية مرنة. الآن نؤسس صورنا الزائفة:

.loader::before,
.loader::after { content: ""; flex: 1;
}

هذان نصفان في .loader وعاء. نحتاج أن نرسمها ، لذا هذا هو المكان الذي نطرحه فيه التدرج المخروطي ركلات في:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

التدرج موجود ، لكن يبدو غريب. نحتاج إلى قصه إلى العنصر:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

لنتأكد من تداخل النصفين مع a هامش سلبي:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

الآن دعونا نجعلهم يتحركون!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

هذا هو العرض النهائي مرة أخرى:

محمل مكعب التقدم

لنستخدم نفس الأسلوب لإنشاء أداة تحميل تقدم ثلاثية الأبعاد. نعم ، لا يزال هناك عنصر واحد فقط!

نحن لا نغير شيئًا بقدر محاكاة المكعب بالطريقة نفسها التي فعلناها من قبل ، بخلاف تغيير ارتفاع اللودر ونسبة العرض إلى الارتفاع. تعتمد الرسوم المتحركة التي نصنعها على تقنية سهلة بشكل مدهش حيث نقوم بتحديث عرض الجانب الأيسر بينما يملأ الجانب الأيمن المساحة المتبقية ، وذلك بفضل flex-grow: 1.

الخطوة الأولى هي إضافة بعض الشفافية إلى الجانب الأيمن باستخدام opacity:

هذا يحاكي تأثير ملء جانب واحد من المكعب بينما يكون الآخر فارغًا. ثم نقوم بتحديث لون الجانب الأيسر. للقيام بذلك ، إما أن نقوم بتحديث الألوان الثلاثة داخل التدرج المخروطي أو نقوم بذلك عن طريق إضافة لون خلفية بامتداد background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

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

لنحرك عرض الجانب الأيسر للرافعة:

عفوًا ، الرسوم المتحركة غريبة بعض الشيء في البداية! لاحظ كيف يبدأ نوعًا ما خارج المكعب؟ هذا لأننا بدأنا الرسوم المتحركة في 0% العرض. ولكن بسبب clip-path والهامش السالب الذي نستخدمه ، فما علينا فعله بدلاً من ذلك هو البدء من --_d المتغير ، الذي استخدمناه لتعريف clip-path النقاط والهامش السلبي:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

هذا أفضل قليلاً:

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

إنه الوجه السفلي للمكعب! نظرًا لأن العنصر الثاني شفاف ، فنحن بحاجة إلى رؤية الوجه السفلي لذلك المستطيل كما ترون في المثال الأيسر. إنه خفي ، لكن يجب أن يكون هناك!

يمكننا إضافة تدرج إلى العنصر الرئيسي وقصه كما فعلنا مع الصور الزائفة:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

إليك الكود الكامل بمجرد تجميع كل شيء معًا:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

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

المزيد من الأبعاد الثلاثية

لا يزال بإمكاننا المضي قدمًا ومحاكاة عدد لا حصر له من المكعبات ثلاثية الأبعاد باستخدام عنصر واحد - نعم ، هذا ممكن! هذه شبكة من المكعبات:

هذا العرض التوضيحي والعروض التوضيحية التالية غير مدعومة في Safari في وقت كتابة هذا التقرير.

مجنون ، أليس كذلك؟ الآن نقوم بإنشاء نمط متكرر من المكعبات المصنوعة باستخدام عنصر واحد ... ولا توجد أشكال زائفة أيضًا! لن أخوض في تفاصيل دقيقة حول الرياضيات التي نستخدمها (هناك أرقام محددة جدًا هناك) ولكن هنا رقم لتصور كيف وصلنا إلى هنا:

نستخدم أولاً ملف conic-gradient لإنشاء نمط المكعب المتكرر. يتم التحكم في تكرار النمط من خلال ثلاثة متغيرات:

• --size: طبقًا لاسمه ، يتحكم هذا في حجم كل مكعب.
• --m: هذا يمثل عدد الأعمدة.
• --n: هذا هو عدد الصفوف.
• --gap: هذه هي الفجوة أو المسافة بين المكعبات

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

ثم نطبق طبقة قناع باستخدام نمط آخر له نفس الحجم. هذا هو الجزء الأصعب من هذه الفكرة. باستخدام مزيج من أ linear-gradient و conic-gradient سنقطع أجزاء قليلة من عنصرنا لإبقاء أشكال المكعبات مرئية فقط.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

قد يبدو الرمز معقدًا بعض الشيء ولكن بفضل متغيرات CSS ، كل ما نحتاج إليه هو تحديث بعض القيم للتحكم في مصفوفة المكعبات. هل تحتاج إلى شبكة 10-10؟ قم بتحديث ملف --m و --n المتغيرات 10. هل تحتاج إلى فجوة أكبر بين المكعبات؟ قم بتحديث ملف --gap القيمة. يتم استخدام قيم الألوان مرة واحدة فقط ، لذا قم بتحديثها للحصول على لوحة ألوان جديدة!

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

يحدد هذا اللودر أربعة مكعبات في صف واحد. هذا يعني لدينا --n القيمة 4 و --m مساوي ل 1 . بمعنى آخر ، لم نعد بحاجة إلى هؤلاء!

بدلاً من ذلك ، يمكننا العمل مع --size و --gap المتغيرات في حاوية الشبكة:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

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

لنتأكد من أن نمط المكعب معد لعرض أربعة مكعبات. سنفعل هذا على الحاوية ::before العنصر الزائف:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

الآن بعد أن أصبح لدينا أربعة مكعبات في حاوية مكونة من ثلاثة مكعبات ، يمكننا تبرير نمط المكعب في نهاية حاوية الشبكة لتجاوزه ، وإظهار المكعبات الثلاثة الأخيرة:

.loader { /* same as before */ justify-content: end;
}

هذا ما لدينا حتى الآن ، مع مخطط أحمر لإظهار حدود حاوية الشبكة:

الآن كل ما يتعين علينا القيام به هو تحريك العنصر الزائف إلى اليمين عن طريق إضافة الرسوم المتحركة الخاصة بنا:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

هل حصلت على خدعة الرسوم المتحركة؟ لننهي هذا عن طريق إخفاء نموذج المكعب الفائض وإضافة لمسة من الإخفاء لإنشاء تأثير التلاشي الذي يمثل البداية والنهاية:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

يمكننا أن نجعل هذا أكثر مرونة من خلال إدخال متغير ، --n، لتعيين عدد المكعبات التي يتم عرضها في الحاوية مرة واحدة. وبما أن العدد الإجمالي للمكعبات في النموذج يجب أن يكون أكثر من واحد --n، يمكننا التعبير عن ذلك على أنه calc(var(--n) + 1).

هذا هو الشيء الكامل:

حسنًا ، هناك محمل ثلاثي الأبعاد آخر مشابه ولكن له مكعبات يتغير لونها بالتتابع بدلاً من الانزلاق:

سوف نعتمد على خلفية متحركة مع background-blend-mode لهذا الواحد:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

لقد أزلت الكود الزائد المستخدم لإنشاء نفس التخطيط مثل المثال الأخير ، ولكن بثلاثة مكعبات بدلاً من أربعة. ما أقوم بإضافته هنا هو تدرج محدد بلون معين يمتزج مع التدرج المخروطي ، تمامًا كما فعلنا سابقًا لمحمل شريط التقدم ثلاثي الأبعاد.

من هناك ، يتم تحريك تدرج الخلفية background-position كرسوم متحركة من ثلاث خطوات لجعل المكعبات تومض بألوان واحدة تلو الأخرى.

إذا لم تكن معتادًا على القيم التي أستخدمها background-position وبناء جملة الخلفية ، أوصي بشدة إحدى مقالاتي السابقة واحدة من أجوبتي على Stack Overflow. ستجد شرحًا مفصلاً للغاية هناك.

هل يمكننا تحديث عدد المكعبات لجعلها متغيرات؟

نعم ، لدي ملف حل لذلك، ولكني أود منك أن تتصدى لها بدلاً من تضمينها هنا. خذ ما تعلمناه من المثال السابق وحاول أن تفعل الشيء نفسه مع هذا المثال - ثم شارك عملك في التعليقات!

تباينات وافرة!

مثل المقالات الثلاثة الأخرى في هذه السلسلة ، أود أن أترك لك بعض الإلهام للمضي قدمًا وإنشاء اللوادر الخاصة بك. فيما يلي مجموعة تتضمن اللوادر ثلاثية الأبعاد التي صنعناها معًا ، بالإضافة إلى عدد قليل من اللوادر الأخرى لتحريك خيالك:

هذا هو التفاف

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

شكرا مرة أخرى لقراءة هذه السلسلة الصغيرة! سأقوم بتسجيل الخروج بتذكيرك بأن لدي ملف جمع أكثر من 500 لوادر إذا كنت تبحث عن المزيد من الأفكار والإلهام.

---

لوادر ذات عنصر واحد: الانتقال ثلاثي الأبعاد! نشرت أصلا في حيل CSS. يجب احصل على النشرة الإخبارية.

• كوينسمارت. أفضل بورصة للبيتكوين والعملات المشفرة في أوروبا.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. دخول مجاني.
• كريبتوهوك. الرادار. تجربة مجانية.
• المصدر: https://css-tricks.com/single-element-loaders-going-3d/