জেনারেটিভ ডেটা ইন্টেলিজেন্স

CSS গ্রিড অ্যানিমেটিং (কীভাবে + উদাহরণ)

তারিখ:

আমি যে CSS এর উপর আলোকপাত করতে পেরে আনন্দিত grid-template-rows এবং grid-template-columns বৈশিষ্ট্য হয় এখন সমস্ত প্রধান ওয়েব ব্রাউজারে অ্যানিমেটেবল! ঠিক আছে, সিএসএস গ্রিড দীর্ঘকাল ধরে টেকনিক্যালি অ্যানিমেশন সমর্থন করেছে, যেমনটি সিএসএস গ্রিড লেআউট মডিউল লেভেল 1 স্পেকের মধ্যে বেক করা হয়েছে.

কিন্তু এই গ্রিড বৈশিষ্ট্যগুলিকে অ্যানিমেটিং করা শুধুমাত্র তিনটি প্রধান ব্রাউজার দ্বারা সমর্থিত হয়েছে। সৃজনশীল রস প্রবাহিত পেতে আমরা কি কয়েকটি উদাহরণের দিকে নজর দেব?

সুচিপত্র

উদাহরণ 1: সাইডবার প্রসারিত করা

প্রথমত, আমরা যা বলছি তা হল:

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

আমি জানি আপনি কি ভাবছেন: একটি CSS সম্পত্তি অ্যানিমেটিং? সহজ পিসি, আমি বছরের পর বছর ধরে এটি করছি!" আমিও. যাইহোক, একটি নির্দিষ্ট ব্যবহারের ক্ষেত্রে পরীক্ষা করার সময় আমি একটি আকর্ষণীয় সমস্যায় পড়েছিলাম।

সুতরাং, আমরা গ্রিড নিজেই স্থানান্তর করতে চাই (বিশেষ করে grid-template-columns, যা সেট করা হয় .grid উদাহরণে ক্লাস)। কিন্তু বাম কলাম (.left) হল নির্বাচক যার প্রয়োজন :hover ছদ্ম-শ্রেণী যদিও জাভাস্ক্রিপ্ট এই সমস্যাটি সহজে সমাধান করতে পারে — ধন্যবাদ, কিন্তু ধন্যবাদ না — আমরা একা সিএসএস দিয়ে এটি সম্পন্ন করতে পারি।

এইচটিএমএল দিয়ে শুরু করে পুরো ব্যাপারটা জেনে নেওয়া যাক। সত্যিই সুন্দর মানক জিনিস... দুটি কলাম সহ একটি গ্রিড।

<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>

কসমেটিক সিএসএস একপাশে রেখে, আপনাকে প্রথমে সেট করতে হবে display: grid মূল পাত্রে (.grid).

.grid { display: grid;
}

এর পরে, আমরা ব্যবহার করে দুটি কলামকে সংজ্ঞায়িত এবং আকার দিতে পারি grid-template-columns সম্পত্তি আমরা বাম কলামটিকে অতি সরু করে দেব এবং পরে হোভারে এর প্রস্থ বাড়াব। ডান কলাম বাকি অবশিষ্ট স্থান নেয়, ধন্যবাদ auto শব্দ।

.grid { display: grid; grid-template-columns: 48px auto;
}

আমরা জানি আমরা এই জিনিসটি অ্যানিমেট করতে যাচ্ছি, তাই এর এগিয়ে যান এবং একটি নিক্ষেপ করা যাক transition সেখানে যখন আমরা সেখানে থাকি তাই রাজ্যগুলির মধ্যে পরিবর্তনটি মসৃণ এবং লক্ষণীয়।

.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}

যে জন্য এটা .grid! যা বাকি আছে তা হল হোভার স্টেট প্রয়োগ করা। বিশেষ করে, আমরা ওভাররাইড করতে যাচ্ছি grid-template-columns সম্পত্তি যাতে বাম কলাম হোভারে একটি বৃহত্তর পরিমাণ স্থান নেয়।

এটি একাই আকর্ষণীয় নয়, যদিও এটি দুর্দান্ত যে অ্যানিমেশন এবং রূপান্তরগুলি এখন CSS গ্রিডে সমর্থিত। আরও মজার বিষয় হল আমরা তুলনামূলকভাবে নতুন ব্যবহার করতে পারি :has() ছদ্ম শ্রেণী মূল পাত্রে স্টাইল করতে (.grid) যখন শিশুটি (.left) হোভার করা হয়।

.grid:has(.left:hover) { /* Hover styles */
}

সরল ইংরেজিতে বলা হচ্ছে, “কিছু করো .grid কন্টেইনার যদি এটি নামের একটি উপাদান থাকে .left এর ভিতরে এটি একটি হোভার অবস্থায় রয়েছে।" এই জন্য :has() প্রায়ই একটি "পিতামাতা" নির্বাচক হিসাবে উল্লেখ করা হয়. আমরা অবশেষে এটিতে থাকা শিশুদের উপর ভিত্তি করে একজন অভিভাবক নির্বাচন করতে পারি — কোন জাভাস্ক্রিপ্টের প্রয়োজন নেই!

সুতরাং, এর প্রস্থ বৃদ্ধি করা যাক .left কলাম থেকে 30% যখন এটা hover করা হয়. দ্য .right কলাম সমস্ত অবশিষ্ট স্থান গ্রহণ করতে থাকবে:

.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}

আমরা সিএসএস ভেরিয়েবলগুলিও ব্যবহার করতে পারি, যা আপনার ব্যক্তিগত পছন্দগুলির উপর নির্ভর করে পরিষ্কার দেখাতে পারে বা নাও হতে পারে (অথবা আপনি যেভাবেই হোক আপনার প্রকল্পে সিএসএস ভেরিয়েবল ব্যবহার করছেন):

.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}

I ভালবাসা যে সিএসএস গ্রিডগুলি এখন অ্যানিমেটেড করা যেতে পারে, তবে আমরা এই বিশেষ উদাহরণটি সিএসএসের মাত্র নয়টি লাইন দিয়ে তৈরি করতে পারি তা আরও বিস্ময়কর।

এখানে দ্বারা আরেকটি উদাহরণ অলিভিয়া এনজি — অনুরূপ ধারণা, কিন্তু বিষয়বস্তু সহ (নেভি আইকনে ক্লিক করুন):

উদাহরণ 2: প্যানেল প্রসারিত করা

এই উদাহরণটি গ্রিড ধারক (কলামের প্রস্থ) কিন্তু পৃথক কলামগুলি (তাদের পটভূমির রঙ) পরিবর্তন করে। হোভারে আরও কন্টেন্ট প্রদানের জন্য এটি আদর্শ।

এটা মনে রাখা মূল্যবান যে repeat() ফাংশন কখনও কখনও বগি ট্রানজিশন তৈরি করে, তাই আমি প্রতিটি কলামের প্রস্থ পৃথকভাবে সেট করি (যেমন grid-template-columns: 1fr 1fr 1fr).

উদাহরণ 3: সারি এবং কলাম যোগ করা

এই উদাহরণটি অ্যানিমেটেডভাবে গ্রিডে একটি কলাম "যোগ" করে। যাইহোক - আপনি এটি অনুমান করেছেন - এই দৃশ্যেরও একটি ক্ষতি আছে। প্রয়োজনীয়তা হল "নতুন" কলামটি লুকানো উচিত নয় (অর্থাৎ সেট করা display: none), এবং CSS গ্রিডকে এর প্রস্থ সেট করার সময় তার অস্তিত্ব স্বীকার করতে হবে 0fr.

সুতরাং, একটি তিন-কলাম গ্রিডের জন্য - grid-template-columns: 1fr 1fr 0fr (হ্যাঁ, মান হলেও ইউনিট ঘোষণা করতে হবে 0!) মধ্যে রূপান্তর grid-template-columns: 1fr 1fr 1fr সঠিকভাবে, কিন্তু grid-template-columns: 1fr 1fr না পশ্চাদপটে, আমরা যা জানি তা বিবেচনা করে এটি আসলে নিখুঁত বোধগম্য করে তোলে কিভাবে রূপান্তর কাজ করে.

এখানে দ্বারা আরেকটি উদাহরণ মিশেল বার্কার — একই ধারণা, কিন্তু একটি অতিরিক্ত কলাম সহ এবং অনেক আরো pizzazz. এটিকে পূর্ণ-স্ক্রীন মোডে চালানোর বিষয়ে নিশ্চিত করুন কারণ এটি আসলে প্রতিক্রিয়াশীল (কোনও কৌশল নয়, শুধু ভালো ডিজাইন!)

আরও কয়েকটি উদাহরণ

কেন না কেন?

এই "অ্যানিমেটেড মন্ড্রিয়ান" হল অ্যানিমেটেড CSS গ্রিডের ধারণার মূল প্রমাণ ক্রোম ডেভরেল. দ্য grid-rowএর এবং grid-columnব্যবহার করে span লেআউট তৈরি করার জন্য কীওয়ার্ড আপনি আগে দেখেন এবং তারপরে grid-template-rowএবং এর grid-template-columnএর একটি CSS অ্যানিমেশন ব্যবহার করে অ্যানিমেটেড করা হয়। এটি দেখতে যতটা জটিল মনে হয় ততটা কাছাকাছি কোথাও নেই!

একই ধারণা, কিন্তু সেই মিশেল বার্কার পিজাজ আরও সহ। একটি সুন্দর লোডিং স্পিনার করতে পারে?

কিছুটা নস্টালজিয়া (এখানে আমার বয়স দেখানো হচ্ছে) নিয়ে মোড়ানো, খুব বেশি না-জানানো অ্যানিমেটেড CSS গ্রিড অ্যান্ড্রু হার্ভার্ড. আবার — একই ধারণা — এটা ঠিক যে আপনি অন্যান্য গ্রিড আইটেম দেখতে পারবেন না। কিন্তু চিন্তা করবেন না, তারা সেখানে আছে।

স্পট_আইএমজি

সর্বশেষ বুদ্ধিমত্তা

স্পট_আইএমজি

আমাদের সাথে খোস গল্প কর

হাই সেখানে! আপনাকে কিভাবে সাহায্য করতে পারি?