একক উপাদান লোডার: 3D যাচ্ছে!

আমাদের এই চতুর্থ এবং শেষ নিবন্ধের জন্য একক-উপাদান লোডারে ছোট সিরিজ, আমরা 3D নিদর্শন অন্বেষণ করতে যাচ্ছি. একটি 3D উপাদান তৈরি করার সময়, এটি কল্পনা করা কঠিন যে একটি ঘনক্ষেত্রের ছয়টি মুখের মতো কিছু অনুকরণ করার জন্য শুধুমাত্র একটি HTML উপাদান যথেষ্ট। তবে হয়তো আমরা আরও কিছু কিউব নিয়ে পালিয়ে যেতে পারি-মত পরিবর্তে আকৃতির শুধুমাত্র সামনের তিনটি দিক দেখানোর মাধ্যমে - এটি সম্পূর্ণভাবে সম্ভব এবং আমরা একসাথে এটি করতে যাচ্ছি।

স্প্লিট কিউব লোডার

এখানে একটি 3D লোডার রয়েছে যেখানে একটি ঘনক্ষেত্রকে দুটি অংশে বিভক্ত করা হয়েছে, কিন্তু শুধুমাত্র একটি উপাদান দিয়ে তৈরি করা হয়েছে:

কিউবের প্রতিটি অর্ধেক একটি ছদ্ম-উপাদান ব্যবহার করে তৈরি করা হয়:

শান্ত, তাই না?! আমরা CSS এর সাথে একটি কনিক গ্রেডিয়েন্ট ব্যবহার করতে পারি clip-path উপাদান এর উপর ::before এবং ::after একটি 3D কিউবের তিনটি দৃশ্যমান মুখের অনুকরণ করার জন্য সিউডোস। নেতিবাচক মার্জিন হল যা দুটি ছদ্মকে একসাথে টানে এবং একটি পূর্ণ ঘনককে ওভারল্যাপ করে। আমাদের বাকি কাজটি বেশিরভাগই ঝরঝরে-সুদর্শন লোডার পেতে সেই দুটি অর্ধেককে অ্যানিমেট করছে!

আসুন একটি ভিজ্যুয়াল দেখুন যা এই কিউব-সদৃশ উপাদানটি তৈরি করতে ব্যবহৃত ক্লিপ-পাথ পয়েন্টগুলির পিছনে গণিত ব্যাখ্যা করে:

আমরা আমাদের ভেরিয়েবল এবং একটি সমীকরণ আছে, তাই এর কাজ করা যাক. প্রথমত, আমরা আমাদের ভেরিয়েবল স্থাপন করব এবং প্রধানের জন্য আকার নির্ধারণ করব .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)) }
}

এখানে আবার চূড়ান্ত ডেমো আছে:

অগ্রগতি ঘনক লোডার

একটি 3D অগ্রগতি লোডার তৈরি করতে একই কৌশল ব্যবহার করা যাক। হ্যাঁ, এখনও শুধুমাত্র একটি উপাদান!

লোডারের উচ্চতা এবং আকৃতির অনুপাত পরিবর্তন করা ব্যতীত আমরা আগে যেভাবে কিউবকে সিমুলেট করার মতো কোনও জিনিস পরিবর্তন করছি না। আমরা যে অ্যানিমেশন তৈরি করছি তা একটি আশ্চর্যজনকভাবে সহজ কৌশলের উপর নির্ভর করে যেখানে আমরা বাম দিকের প্রস্থ আপডেট করি যখন ডান দিকটি অবশিষ্ট স্থান পূরণ করে, ধন্যবাদ 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%; }
}

এটাই! আমরা শুধু একটি চতুর কৌশল ব্যবহার করেছি যা সিউডো-এলিমেন্ট, কনিক গ্রেডিয়েন্ট, ক্লিপিং, ব্যাকগ্রাউন্ড ব্লেন্ডিং এবং নেতিবাচক মার্জিন ব্যবহার করে, একটি নয়, কিন্তু দুই মার্কআপে একটি একক উপাদান ছাড়া আর কিছুই নেই এমন মিষ্টি চেহারার 3D লোডার৷

আরো 3D

আমরা এখনও আরও এগিয়ে যেতে পারি এবং একটি উপাদান ব্যবহার করে অসীম সংখ্যক 3D কিউব অনুকরণ করতে পারি — হ্যাঁ, এটা সম্ভব! এখানে কিউবগুলির একটি গ্রিড রয়েছে:

এই ডেমো এবং নিম্নলিখিত ডেমো লেখার সময় সাফারিতে অসমর্থিত।

পাগল, তাই না? এখন আমরা একটি একক উপাদান ব্যবহার করে তৈরি কিউবগুলির একটি পুনরাবৃত্ত প্যাটার্ন তৈরি করছি… এবং কোনও ছদ্মও নেই! আমরা যে গণিত ব্যবহার করছি সে সম্পর্কে আমি সূক্ষ্ম বিশদে যাব না (সেখানে খুব নির্দিষ্ট সংখ্যা রয়েছে) তবে আমরা এখানে কীভাবে এসেছি তা কল্পনা করার জন্য এখানে একটি চিত্র রয়েছে:

আমরা প্রথমে একটি ব্যবহার করি 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 মান রঙের মানগুলি শুধুমাত্র একবার ব্যবহার করা হয়, তাই একটি নতুন রঙের প্যালেটের জন্য সেগুলি আপডেট করুন!

এখন যেহেতু আমাদের কাছে আরেকটি 3D কৌশল রয়েছে, আসুন বিভিন্ন অ্যানিমেশনের সাথে খেলার মাধ্যমে লোডারের বৈচিত্র্য তৈরি করতে এটি ব্যবহার করি। উদাহরণস্বরূপ, বাম থেকে ডানে অসীমভাবে স্লাইডিং কিউবগুলির পুনরাবৃত্তিমূলক প্যাটার্ন সম্পর্কে কীভাবে?

এই লোডারটি একক সারিতে চারটি ঘনক সংজ্ঞায়িত করে। তার মানে আমাদের --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).

এখানে সম্পূর্ণ জিনিস:

ঠিক আছে, আরও একটি 3D লোডার যা একই রকম কিন্তু কিউবগুলি স্লাইডিংয়ের পরিবর্তে ধারাবাহিকভাবে রঙ পরিবর্তন করে:

আমরা একটি অ্যানিমেটেড ব্যাকগ্রাউন্ডের উপর নির্ভর করতে যাচ্ছি 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%; }
}

আমি শেষ উদাহরণ হিসাবে একই লেআউট তৈরি করতে ব্যবহৃত অতিরিক্ত কোডটি সরিয়ে দিয়েছি, তবে চারটির পরিবর্তে তিনটি কিউব সহ। আমি এখানে যা যোগ করছি তা হল একটি নির্দিষ্ট রঙের সাথে সংজ্ঞায়িত একটি গ্রেডিয়েন্ট যা কনিক গ্রেডিয়েন্টের সাথে মিশে যায়, ঠিক যেমনটি আমরা অগ্রগতি বার 3D লোডারের জন্য আগে করেছি।

সেখান থেকে, এটি ব্যাকগ্রাউন্ড গ্রেডিয়েন্টকে অ্যানিমেট করছে background-position একটি তিন-পদক্ষেপ অ্যানিমেশন হিসাবে কিউবগুলিকে একবারে এক এক করে রঙিন করতে।

আমি যে মানগুলির জন্য ব্যবহার করছি তার সাথে আপনি যদি পরিচিত না হন background-position এবং পটভূমি সিনট্যাক্স, আমি অত্যন্ত সুপারিশ আমার আগের নিবন্ধগুলির মধ্যে একটি এবং এক আমার স্ট্যাক ওভারফ্লো উত্তর. আপনি সেখানে একটি খুব বিশদ ব্যাখ্যা পাবেন।

আমরা কি এটি পরিবর্তনশীল করতে ঘনক্ষেত্রের সংখ্যা আপডেট করতে পারি?

হ্যাঁ, আমি একটি আছে এর জন্য সমাধান, কিন্তু আমি চাই আপনি এটিকে এখানে এম্বেড করার পরিবর্তে এটিতে একটি ফাটল ধরুন। আগের উদাহরণ থেকে আমরা যা শিখেছি তা নিন এবং এটির সাথে একই কাজ করার চেষ্টা করুন — তারপর মন্তব্যে আপনার কাজ ভাগ করুন!

বৈচিত্র্য প্রচুর!

এই সিরিজের অন্য তিনটি নিবন্ধের মতো, আমি আপনাকে এগিয়ে যেতে এবং আপনার নিজস্ব লোডার তৈরি করতে কিছু অনুপ্রেরণা দিতে চাই। এখানে একটি সংগ্রহ রয়েছে যা আমরা একসাথে তৈরি করা 3D লোডারগুলিকে অন্তর্ভুক্ত করে এবং আপনার কল্পনাকে এগিয়ে নিতে আরও কয়েকটি রয়েছে:

যে একটি মোড়ানো

আমি নিশ্চিত আশা করি আপনি গত কয়েক সপ্তাহে আমার সাথে একক উপাদান লোডার তৈরিতে সময় কাটাতে উপভোগ করেছেন। এটা পাগল যে আমরা আপাতদৃষ্টিতে সাধারণ স্পিনার দিয়ে শুরু করেছি এবং তারপর ধীরে ধীরে 3D কৌশল পর্যন্ত নিজেদের কাজ করার জন্য নতুন টুকরা যোগ করেছি যা এখনও মার্কআপে শুধুমাত্র একটি উপাদান ব্যবহার করে। যখন আমরা এর ক্ষমতাগুলি ব্যবহার করি তখন CSS এর মতোই দেখায়: মাপযোগ্য, নমনীয় এবং পুনরায় ব্যবহারযোগ্য।

এই ছোট সিরিজ পড়ার জন্য আবার ধন্যবাদ! আমি আপনাকে মনে করিয়ে দিয়ে সাইন অফ করব যে আমার একটি আছে 500 টিরও বেশি লোডার সংগ্রহ আপনি যদি আরও ধারণা এবং অনুপ্রেরণা খুঁজছেন।

---

একক উপাদান লোডার: 3D যাচ্ছে! মূলত প্রকাশিত সিএসএস-ট্রিকস। তোমার উচিত নিউজলেটার পান.

• Coinsmart. ইউরোপের সেরা বিটকয়েন এবং ক্রিপ্টো এক্সচেঞ্জ।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. বিনামূল্যে এক্সেস.
• ক্রিপ্টোহক। Altcoin রাডার। বিনামূল্যে ট্রায়াল.
• সূত্র: https://css-tricks.com/single-element-loaders-going-3d/