Single Element Loader: Going 3D!

برای این چهارمین و آخرین مقاله ما سری کوچک در لودرهای تک عنصری، ما قصد داریم الگوهای سه بعدی را بررسی کنیم. هنگام ایجاد یک عنصر سه بعدی، تصور اینکه فقط یک عنصر 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 پشتیبانی نمی‌شوند.

دیوانه، درست است؟ اکنون ما در حال ایجاد یک الگوی مکرر از مکعب‌ها هستیم که با استفاده از یک عنصر ساخته شده‌اند... و بدون شبه نیز! من به جزئیات دقیق ریاضیات مورد استفاده خود نمی پردازم (اعداد بسیار خاصی در آنجا وجود دارد) اما در اینجا شکلی برای تجسم اینکه چگونه به اینجا رسیدیم وجود دارد:

ابتدا از a استفاده می کنیم 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 لودر اگر به دنبال ایده ها و الهام بیشتر هستید.

---

Single Element Loader: Going 3D! در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://css-tricks.com/single-element-loaders-going-3d/