মই শেহতীয়াকৈ মোৰ ৱেবছাইটত এনিমেটেড গ্রাফিক্সসমূহ এটা নতুন থিম আৰু অগ্ৰণী চৰিত্ৰৰ এটা দলেৰে সতেজ কৰিছো, এই ধাৰাবাহিকখনত মই শ্বেয়াৰ কৰা বহুতো কৌশল বাস্তৱায়িত কৰিছো। মোৰ কেইটামান এনিমেচনৰ ৰূপ সলনি হয় যেতিয়া কোনোবাই তেওঁলোকৰ সৈতে বা দিনৰ বিভিন্ন সময়ত যোগাযোগ কৰে।
মোৰ ব্লগ পেজৰ ওপৰৰ গ্রাফিকত থকা ৰংবোৰ প্ৰতিদিনে ৰাতিপুৱাৰ পৰা ৰাতিলৈকে সলনি হয়। তাৰ পিছত, আছে স্নো মোড, যিয়ে ঠাণ্ডা ৰং আৰু এটা শীতকালীন থিম যোগ কৰে, এটা অভাৰলে স্তৰ আৰু এটা মিশ্ৰণ মোডৰ সৌজন্যত৷
ইয়াৰ ওপৰত কাম কৰি থাকোঁতে মই ভাবিবলৈ আৰম্ভ কৰিলোঁ যে CSS আপেক্ষিক ৰঙৰ মানসমূহে মোক অধিক নিয়ন্ত্ৰণ দিব পাৰে নেকি আৰু লগতে প্ৰক্ৰিয়াটো সৰল কৰিব পাৰে নেকি। টোকা: এই টিউটোৰিয়েলত মই আপেক্ষিক ৰঙৰ মান আৰু থিমিং গ্ৰাফিক্স আৰু এনিমেচনৰ বাবে OKLCH ৰঙৰ স্থানৰ ওপৰত গুৰুত্ব দিম। যদি আপুনি আপেক্ষিক ৰঙৰ গভীৰতালৈ ডুব যাব বিচাৰে তেন্তে আহমদ শ্বাদীদে এটা চমৎকাৰ ইন্টাৰেক্টিভ গাইড তৈয়াৰ কৰিছে। ৰঙৰ স্থান, গেমট, আৰু অ’কেএলচিএইচৰ কথা ক’বলৈ গ’লে আমাৰ নিজৰ জিঅফ গ্ৰেহামে সেইবোৰৰ বিষয়ে লিখিছিল।
উপাদানৰ বাৰে বাৰে ব্যৱহাৰ কৰাটো আছিল মূল কথা। সম্ভৱ হ'লে পটভূমি পুনৰ ব্যৱহাৰ কৰা হৈছিল, জুম আৰু অভাৰলেই একেটা শিল্পকৰ্মৰ পৰা নতুন দৃশ্য নিৰ্মাণ কৰাত সহায় কৰিছিল। ইয়াৰ জন্ম প্ৰয়োজনীয়তাৰ পৰাই হৈছিল যদিও ই ব্যক্তিগত দৃশ্যতকৈ ধাৰাবাহিকৰ দিশৰ পৰাও চিন্তা কৰিবলৈ উৎসাহিত কৰিছিল। ৰঙৰ পেলেটসমূহ হস্তচালিতভাৱে আপডেইট কৰাৰ সমস্যা মোৰ প্ৰত্যাহ্বানৰ ওচৰলৈ পোনে পোনে যাওঁ আহক৷ এইটোৰ দৰে টুন টাইটেলছত — ১৯৫৯ চনৰ যোগী বিয়াৰ শ্ব'ৰ খণ্ড “লুলাবাই-বাই বিয়াৰ”ৰ ওপৰত ভিত্তি কৰি — আৰু মোৰ কাম সাধাৰণতে, পেলেটসমূহ নিৰ্বাচিত কেইটামান ৰঙত সীমাবদ্ধ।
মই মোৰ “ফাউণ্ডেশ্যন” ৰঙৰ পৰা শ্বেড আৰু টিণ্ট তৈয়াৰ কৰো যাতে পেলেটটো অধিক ৰং যোগ নকৰাকৈ সম্প্ৰসাৰিত হয়।
স্কেচত মই HSL ৰঙৰ স্থানত কাম কৰো, গতিকে এই প্ৰক্ৰিয়াত মোৰ ফাউণ্ডেচন ৰঙৰ লঘুতাৰ মান বৃদ্ধি বা হ্ৰাস কৰাটো জড়িত হৈ থাকে। সঁচা কথা ক’বলৈ গ’লে, ই কোনো কষ্টকৰ কাম নহয় — কিন্তু এটা বেলেগ ফাউণ্ডেশ্যন ৰং বাছি ল’বলৈ হ’লে শ্বেড আৰু টিণ্টৰ এটা সম্পূৰ্ণ নতুন ছেট সৃষ্টি কৰিব লাগিব৷ সেইটো হাতেৰে কৰাটো, বাৰে বাৰে, সোনকালে কষ্টকৰ হৈ পৰে।
মই HSL — H (hue), S (saturation), আৰু L (lightness) — ৰঙৰ স্থানৰ কথা উল্লেখ কৰিলোঁ, কিন্তু সেয়া ৰং বৰ্ণনা কৰাৰ কেইবাটাও উপায়ৰ ভিতৰত এটা মাত্ৰ। RGB — R (ৰঙা), G (সেউজীয়া), B (নীলা) — সম্ভৱতঃ আটাইতকৈ চিনাকি, অন্ততঃ ইয়াৰ Hex ৰূপত। ইয়াৰ উপৰিও LAB — L (পাতলতা), A (সেউজীয়া–ৰঙা), B (নীলা–হালধীয়া) — আৰু নতুন, কিন্তু এতিয়া বহুলভাৱে সমৰ্থিত LCH — L (পাতলতা), C (ক্ৰ’মা), H (ৰঙ) — মডেলটো ইয়াৰ OKLCH ৰূপত আছে। LCH ৰ সৈতে — বিশেষকৈ CSS ত OKLCH — মই মোৰ ভেটিৰ ৰঙৰ লঘুতা মান সামঞ্জস্য কৰিব পাৰো।
বা মই ইয়াৰ ক্ৰ’মা সলনি কৰিব পাৰো। এল চি এইচ ক্ৰ'মা আৰু এইচ এছ এল চেচুৰেচন দুয়োটাই এটা ৰঙৰ তীব্ৰতা বা সমৃদ্ধি বৰ্ণনা কৰে, কিন্তু ইহঁতে বেলেগ ধৰণে কৰে। LCH এ মোক ৰঙৰ মাজত বহল পৰিসৰ আৰু অধিক ভৱিষ্যদ্বাণীযোগ্য মিশ্ৰণ দিয়ে।
মই ৰং সলনি কৰি একে ধৰণৰ লঘুতা আৰু ক্ৰ'মা মান ভাগ কৰা ৰঙৰ পেলেট এটাও সৃষ্টি কৰিব পাৰো। এইচ এছ এল আৰু এল চি এইচ দুয়োটাতে ৰঙৰ বৰ্ণালী ৰঙা পৰা আৰম্ভ হয়, সেউজীয়া আৰু নীলাৰ মাজেৰে গতি কৰে আৰু ৰঙালৈ ঘূৰি আহে।
কিয় OKLCH এ সলনি কৰিলে মই ৰঙৰ বিষয়ে কেনেকৈ ভাবো OKLCH ৰঙৰ স্থানৰ বাবে ব্ৰাউজাৰ সমৰ্থন এতিয়া ব্যাপক, যদিও ডিজাইন সঁজুলিসমূহে — Sketch অন্তৰ্ভুক্ত কৰি — ধৰিব পৰা নাই। সৌভাগ্যক্ৰমে, ই আপোনাক OKLCH ব্যৱহাৰ কৰাত বাধা দিব নালাগে। ব্ৰাউজাৰসমূহে আপোনাৰ বাবে Hex, HSL, LAB, আৰু RGB মানসমূহক OKLCH লৈ আনন্দৰে ৰূপান্তৰ কৰিব। আপুনি যিকোনো স্থানত এটা ভেটি ৰঙৰ সৈতে এটা CSS স্বনিৰ্বাচিত বৈশিষ্ট্য সংজ্ঞায়িত কৰিব পাৰে, Hex অন্তৰ্ভুক্ত কৰি: /* ভেটিৰ ৰং */ --ভেটি: #5accd6;
ইয়াৰ পৰা আহৰণ কৰা যিকোনো ৰং স্বয়ংক্ৰিয়ভাৱে OKLCH লৈ ৰূপান্তৰ কৰা হ'ব: --ভেটি-পোহৰ: oklch(var(--ভেটি)ৰ পৰা [...]; } --ভেটি-মিড: oklch(var(--ভেটি)ৰ পৰা [...]; } --ভেটি-অন্ধকাৰ: oklch(var(--ভেটি)ৰ পৰা [...]; }
ডিজাইন ব্যৱস্থা হিচাপে আপেক্ষিক ৰং আপেক্ষিক ৰঙৰ কথা ভাবিব যেনে: “এই ৰংটো লওক, ইয়াক টুইক কৰক, তাৰ পিছত মোক ফলাফলটো দিয়ক।” ৰং এটা সামঞ্জস্য কৰিবলৈ দুটা উপায় আছে: নিৰপেক্ষ পৰিৱৰ্তন আৰু আনুপাতিক পৰিৱৰ্তন। ক'ডত ইহঁত দেখাত একে, কিন্তু আপুনি এবাৰ ফাউণ্ডেচনৰ ৰং শ্বেপিং আৰম্ভ কৰিলে ই বহুত বেলেগ আচৰণ কৰে। সেই পাৰ্থক্য বুজি পোৱাটোৱেই আপেক্ষিক ৰং ব্যৱহাৰক এটা ব্যৱস্থালৈ ৰূপান্তৰিত কৰিব পাৰে। /* ভেটিৰ ৰং */ --ভেটি: #5accd6;
উদাহৰণস্বৰূপে, মোৰ ফাউণ্ডেচন ৰঙৰ লাইটনেছ মান ০.৭৮৩৭, আনহাতে গাঢ় সংস্কৰণৰ মান ০.৫৮৩৭। পাৰ্থক্য গণনা কৰিবলৈ, মই উচ্চটোৰ পৰা নিম্ন মান বিয়োগ কৰো আৰু এটা calc() ফাংচন ব্যৱহাৰ কৰি ফলাফল প্ৰয়োগ কৰো: --ভেটি-অন্ধকাৰ: oklch(var(--ভেটিৰ পৰা) calc(l - ০.২০) c h);
পাতল ৰং লাভ কৰিবলৈ মই ইয়াৰ পৰিৱৰ্তে পাৰ্থক্যটো যোগ কৰো: --ভেটি-পোহৰ: oklch(var(--ভেটিৰ পৰা) calc(l + ০.১০) c h);
ক্ৰ'মাসামঞ্জস্যসমূহেও একে প্ৰক্ৰিয়া অনুসৰণ কৰে। মোৰ ফাউণ্ডেচনৰ ৰঙৰ তীব্ৰতা ০.১০৩৫ৰ পৰা ০.০০৩৫লৈ হ্ৰাস কৰিবলৈ মই এটা মান আনটোৰ পৰা বিয়োগ কৰো: oklch(var(--ভেটিৰ পৰা) l calc(c - ০.১০) ঘন্টা);
ৰঙৰ পেলেট এটা সৃষ্টি কৰিবলৈ মই মোৰ ফাউণ্ডেচন ৰঙৰ ৰং (২০০) আৰু মোৰ নতুন ৰঙৰ (২৬০) ৰঙৰ মাজৰ পাৰ্থক্য গণনা কৰো: oklch(var(--ভেটিৰ পৰা) l c calc(h + ৬০));
সেই হিচাপবোৰ নিৰপেক্ষ। যেতিয়া মই এটা নিৰ্দিষ্ট পৰিমাণ বিয়োগ কৰো, তেতিয়া মই ফলপ্ৰসূভাৱে কৈছো, “সদায় এইখিনি বিয়োগ কৰক।” স্থিৰ মান যোগ কৰাৰ সময়তো একেই প্ৰযোজ্য: calc(c - ০.১০) calc(c + ০.১০)
এই পন্থাৰ সীমা কঠিন পথেৰে শিকিলোঁ। যেতিয়া মই নিৰ্দিষ্ট ক্ৰ’মা মান বিয়োগ কৰাৰ ওপৰত নিৰ্ভৰ কৰিছিলো, তেতিয়া ভেটি সলনি কৰাৰ লগে লগে ৰংবোৰ ধূসৰৰ ফালে ভাঙি গৈছিল। এটা ৰঙৰ বাবে কাম কৰা এটা পেলেট আন এটা ৰঙৰ বাবে ছিন্নভিন্ন হৈ পৰিল। গুণনৰ আচৰণ বেলেগ। যেতিয়া মই ক্ৰ’মাক গুণ কৰিম, তেতিয়া মই ব্ৰাউজাৰক কৈছো: “এই ৰঙৰ তীব্ৰতা এটা অনুপাতে হ্ৰাস কৰক।” ৰঙৰ মাজৰ সম্পৰ্ক অক্ষত থাকে, আনকি ভেটি সলনি হ’লেও: calc(c * ০.১০)
মোৰ মুভ ইট, স্কেল ইট, ৰটেট ইট ৰুলছ
লঘুতা গতি কৰক (যোগ বা বিয়োগ), স্কেল ক্ৰ'মা (গুণ কৰা), ৰং ঘূৰাওক (ডিগ্ৰী যোগ বা বিয়োগ কৰক)।
মই ক্ৰ’মা স্কেল কৰো কাৰণ মই বিচাৰো যে তীব্ৰতাৰ পৰিৱৰ্তন ভিত্তি ৰঙৰ সমানুপাতিক হৈ থাকে। ৰঙৰ সম্পৰ্ক ঘূৰ্ণনীয়, গতিকে ৰং গুণ কৰাৰ কোনো যুক্তি নাই। লঘুতা ধাৰণাৰ আৰু নিৰপেক্ষ — ইয়াক গুণ কৰিলে প্ৰায়ে অদ্ভুত ফলাফল পোৱা যায়।
এটা ৰঙৰ পৰা এটা সম্পূৰ্ণ থিমলৈকে আপেক্ষিক ৰঙে মোক এটা ভেটি ৰং সংজ্ঞায়িত কৰিবলৈ আৰু ইয়াৰ পৰা মোৰ প্ৰয়োজনীয় আন প্ৰতিটো ৰং সৃষ্টি কৰিবলৈ অনুমতি দিয়ে — ভৰোৱা, ষ্ট্ৰ'ক, গ্ৰেডিয়েণ্ট ষ্টপ, ছাঁ। সেই সময়ত, ৰং এটা পেলেট হোৱা বন্ধ হয় আৰু এটা চিস্টেম হ'বলৈ আৰম্ভ কৰে। SVG চিত্ৰকল্পসমূহে পূৰণ, ষ্ট্ৰ'ক, আৰু গ্ৰেডিয়েন্টসমূহৰ মাজেৰে একে কেইটামান ৰং পুনৰ ব্যৱহাৰ কৰাৰ প্ৰৱণতা থাকে। আপেক্ষিক ৰঙে আপোনাক সেই সম্পৰ্কসমূহ এবাৰ সংজ্ঞায়িত কৰিবলৈ দিয়ে আৰু সকলোতে পুনৰ ব্যৱহাৰ কৰিবলৈ দিয়ে — যিদৰে এনিমেটৰসকলে নতুন দৃশ্য সৃষ্টি কৰিবলৈ পটভূমিসমূহ পুনৰ ব্যৱহাৰ কৰিছিল।
ফাউণ্ডেচনৰ ৰং এবাৰ সলনি কৰক, আৰু প্ৰতিটো ব্যুৎপন্ন ৰং স্বয়ংক্ৰিয়ভাৱে আপডেট হয়, হাতেৰে একো পুনৰ গণনা নকৰাকৈ। এনিমেটেড গ্ৰাফিক্সৰ বাহিৰত, মই এই একে পদ্ধতি ব্যৱহাৰ কৰি বুটাম আৰু লিংকৰ দৰে পাৰস্পৰিক উপাদানৰ অৱস্থাৰ বাবে ৰং সংজ্ঞায়িত কৰিব পাৰিলোঁ। মোৰ “লুলাবাই-বাই বিয়াৰ” টুন টাইটলত ব্যৱহাৰ কৰা ফাউণ্ডেচনৰ ৰংটো চাইন দেখা নীলা। পটভূমি মোৰ ফাউণ্ডেচন আৰু গাঢ় সংস্কৰণৰ মাজৰ ৰেডিয়েল গ্ৰেডিয়েণ্ট।
সম্পূৰ্ণ ভিন্ন মুডৰ সৈতে বিকল্প সংস্কৰণ সৃষ্টি কৰিবলৈ, মই কেৱল ফাউণ্ডেচনৰ ৰং সলনি কৰিব লাগিব: --ভেটি: #5accd6; --গ্ৰেড-এণ্ড: var(--ভেটি); --grad-start: oklch(var(--ভেটিৰ পৰা) calc(l - ০.২৩৫৭) calc(c * ০.৮৩৩) ঘন্টা);
ৰঙৰ মানসমূহৰ নকল নকৰাকৈ সেই স্বনিৰ্বাচিত বৈশিষ্ট্যসমূহক মোৰ SVG গ্ৰেডিয়েণ্টলৈ বান্ধিবলৈ, মই হাৰ্ড-ক'ড কৰা ষ্টপ-ৰঙ মানসমূহক ইনলাইন শৈলীসমূহৰ সৈতে সলনি কৰিলোঁ:
<পথ পূৰণ="url(#bg-grad)" fill="#5DCDD8" d="[...]"/>
ইয়াৰ পিছত, মই নিশ্চিত কৰিব লাগিছিল যে মোৰ টুন টেক্সট সদায় মই বাছি লোৱা যিকোনো ফাউণ্ডেচন ৰঙৰ সৈতে কনট্ৰাষ্ট হয়। 180deg ৰঙৰ ঘূৰণে এটা পৰিপূৰক ৰং উৎপন্ন কৰে যি নিশ্চিতভাৱে পপ কৰে — কিন্তু অস্বস্তিকৰভাৱে কম্পন কৰিব পাৰে: .টেক্সট-লাইট { ভৰোৱা: oklch(var(--ভেটিৰ পৰা) l c calc(h + ১৮০)); }
৯০° স্থানান্তৰে সম্পূৰ্ণ পৰিপূৰক নহৈ এটা প্ৰাঞ্জল গৌণ ৰং উৎপন্ন কৰে: .টেক্সট-লাইট { ভৰোৱা: oklch(var(--ভেটিৰ পৰা) l c calc(h - ৯০)); }
কুইক ড্ৰ’ মেকগ্ৰাৰ ১৯৫৯ চনৰ টুন টাইটেল “এল কাবং“ৰ মোৰ বিনোদনে একে কৌশল ব্যৱহাৰ কৰে কিন্তু অধিক বৈচিত্ৰময় পেলেটৰ সৈতে। উদাহৰণস্বৰূপে, ভেটিৰ ৰং আৰু গাঢ় ছাঁৰ মাজত আন এটা ৰেডিয়েল গ্ৰেডিয়েণ্ট আছে।
পটভূমিত থকা অট্টালিকা আৰু গছজোপা কেৱল একেটা ভেটিৰ ৰঙৰ বেলেগ বেলেগ ছাঁ। সেই পথবোৰৰ বাবে মোক অতিৰিক্ত দুটা ভৰোৱা ৰঙৰ প্ৰয়োজন হৈছিল: .bg-mid { ভৰোৱা: oklch(var(--ভেটিৰ পৰা) calc(l - ০.০৪) calc(c * ০.৯১) ঘন্টা); }
.bg-ডাৰ্ক { ভৰোৱা: oklch(var(--ভেটিৰ পৰা) calc(l - ০.১২) calc(c * ০.৬৪) ঘন্টা); }
যেতিয়া ভেটিবোৰ গতি কৰিবলৈ আৰম্ভ কৰে এতিয়ালৈকে মই দেখুওৱা সকলোবোৰেই স্থিতিশীল হৈ আছে৷ আনকি যেতিয়া কোনোবাই ফাউণ্ডেচনৰ ৰং সলনি কৰিবলৈ ৰং পিকাৰ ব্যৱহাৰ কৰে, তেতিয়াও সেই পৰিৱৰ্তন নিমিষতে ঘটে। কিন্তু এনিমেটেড গ্ৰাফিক্স খুব কমেইহে থিয় হৈ থাকে — সূত্ৰটো নামটোতেই আছে। গতিকে, যদি ৰং ব্যৱস্থাটোৰ অংশ হয়, তেন্তে ইও এনিমেট কৰিব নোৱাৰাৰ কোনো কাৰণ নাই। ফাউণ্ডেচনৰ ৰংটো এনিমেট কৰিবলৈ মই প্ৰথমে ইয়াক ইয়াৰ OKLCH চেনেলসমূহত বিভক্ত কৰিব লাগিব— লঘুতা, ক্ৰম, আৰু ৰং। কিন্তু এটা গুৰুত্বপূৰ্ণ অতিৰিক্ত পদক্ষেপ আছে: মই সেই মানসমূহ টাইপ কৰা কাষ্টম বৈশিষ্ট্য হিচাপে পঞ্জীয়ন কৰিব লাগিব। কিন্তু তাৰ অৰ্থ কি? অবিকল্পিতভাৱে, এটা ব্ৰাউজাৰে নাজানে যে এটা CSS স্বনিৰ্বাচিত বৈশিষ্ট্য মান এটা ৰং, দৈৰ্ঘ্য, সংখ্যা, বা আন কিবা এটা সম্পূৰ্ণৰূপে প্ৰতিনিধিত্ব কৰে নেকি। তাৰ অৰ্থ হ’ল এনিমেচনৰ সময়ত সিহঁতক মসৃণভাৱে ইন্টাৰপ’লেট কৰিব নোৱাৰি, আৰু এটা মানৰ পৰা আনটো মানলৈ জপিয়াই পৰে। এটা স্বনিৰ্বাচিত বৈশিষ্ট্য পঞ্জীয়ন কৰিলে ব্ৰাউজাৰক ই প্ৰতিনিধিত্ব কৰা মানৰ ধৰণ আৰু সময়ৰ লগে লগে ই কেনে আচৰণ কৰিব লাগে সেই বিষয়ে কয়। এই ক্ষেত্ৰত মই বিচাৰো যে ব্ৰাউজাৰে মোৰ ৰঙৰ চেনেলবোৰক সংখ্যা হিচাপে গণ্য কৰক যাতে সিহঁতক মসৃণভাৱে এনিমেট কৰিব পৰা যায়। @সম্পদ --f-l { বাক্যবিন্যাস: "<সংখ্যা>"; উত্তৰাধিকাৰী: সত্য; প্ৰাৰম্ভিক-মান: ০.৪০; }
@সম্পত্তি --f-c { বাক্যবিন্যাস: "<সংখ্যা>"; উত্তৰাধিকাৰী: সত্য; প্ৰাৰম্ভিক-মান: ০.১১; }
@সম্পদ --f-h { বাক্যবিন্যাস: "<সংখ্যা>"; উত্তৰাধিকাৰী: সত্য; প্ৰাৰম্ভিক-মান: ৩০৫; }
এবাৰ পঞ্জীয়ন কৰিলে, এই স্বনিৰ্বাচিত বৈশিষ্ট্যসমূহে স্থানীয় CSS ৰ দৰে আচৰণ কৰে। ব্ৰাউজাৰে সেইবোৰ ফ্ৰেম-বাই-ফ্ৰেম ইন্টাৰপ’ল কৰিব পাৰে। তাৰ পিছত মই সেই চেনেলবোৰৰ পৰা ভেটিৰ ৰং পুনৰ নিৰ্মাণ কৰো: --ভেটি: oklch(var(--f-l) var(--f-c) var(--f-h));
ইয়াৰ ফলত ভেটিৰ ৰংটো আন যিকোনো সংখ্যাগত মানৰ দৰে এনিমেটেবল হৈ পৰে। ইয়াত এটা সহজ “শ্বাস-প্ৰশ্বাস” এনিমেচন আছে যিয়ে সময়ৰ লগে লগে লঘুতাক লাহে লাহে সলনি কৰে: @keyframes উশাহ লোৱা { ০%, ১০০% { --f-l: ০.৩৬; } ৫০% { --f-l: ০.৪৬; } }
.টুন-শিৰোনাম { এনিমেচন: 10s সহজ-ইন-আউট অসীম উশাহ; }
কাৰণ ফিল, গ্ৰেডিয়েন্ট, আৰু ষ্ট্ৰ'কসমূহৰ অন্য প্ৰতিটো ৰং --foundation ৰ পৰা আহৰণ কৰা হৈছে, সিহঁতে সকলোৱে একেলগে এনিমেট কৰে, আৰু একোকে হস্তচালিতভাৱে আপডেইট কৰাৰ প্ৰয়োজন নাই। এটা এনিমেটেড ৰং, বহুতো প্ৰভাৱ এই প্ৰক্ৰিয়াৰ আৰম্ভণিতে মই ভাবিছিলো যে CSS আপেক্ষিক ৰঙৰ মানসমূহে অধিক সম্ভাৱনা প্ৰদান কৰিব পাৰে নেকি আৰু লগতে ইয়াক প্ৰণয়ন কৰাটোও সহজ কৰি তুলিব পাৰে নেকি। শেহতীয়াকৈ মই মোৰ ৱেবছাইটৰ যোগাযোগ পৃষ্ঠাত এটা নতুন সোণৰ খনিৰ পটভূমি যোগ কৰিছো, আৰু প্ৰথম পুনৰাবৃত্তিত জিলিকি থকা আৰু দোল খাই থকা তেলৰ লেম্প অন্তৰ্ভুক্ত কৰা হৈছিল।
মই অন্বেষণ কৰিব বিচাৰিছিলো যে কেনেকৈ চি এছ এছৰ আপেক্ষিক ৰং এনিমেট কৰিলে খনিৰ ভিতৰৰ অংশটোক লেম্পৰ পৰা ৰঙেৰে টিণ্ট কৰি অধিক বাস্তৱিক কৰি তুলিব পাৰি। মই বিচাৰিছিলো যে তেওঁলোকে তেওঁলোকৰ চাৰিওফালৰ জগতখনক প্ৰভাৱিত কৰক, প্ৰকৃত পোহৰে যিদৰে প্ৰভাৱিত কৰে। গতিকে, একাধিক ৰং এনিমেট কৰাৰ পৰিৱৰ্তে মই এটা সৰু লাইটিং চিষ্টেম নিৰ্মাণ কৰিলোঁ যিয়ে মাত্ৰ এটা ৰং এনিমেট কৰে।
মোৰ প্ৰথম কাম আছিল পটভূমি আৰু মোৰ লেম্পৰ মাজত এটা অভাৰলে স্তৰ স্লট কৰা: <পথ id="অভাৰলে" fill="var(--অভাৰলে-টিন্ট)" [...] style="মিশ্ৰণ-মিশ্ৰণ-ম'ড: ৰং" />
মই মিক্স-ব্লেণ্ড-ম’ড ব্যৱহাৰ কৰিলোঁ: ৰং কাৰণ ইয়াৰ তলত থকাখিনি টিণ্ট কৰি দিয়ে আৰু লগতে অন্তৰ্নিহিত লুমিনেন্স সংৰক্ষণ কৰে। যিহেতু মই কেৱল এনিমেচনসমূহ অন কৰাৰ সময়ত অভাৰলে দৃশ্যমান হোৱাটো বিচাৰো, মই অভাৰলে অপ্ট-ইন কৰিলোঁ: .svg-mine #অভাৰলে { প্ৰদৰ্শন: কোনো নাই; }
@media (পছন্দ-হ্ৰাস-গতি: কোনো-পছন্দ) { .svg-mine[ডাটা-এনিমেচন=অন] #অভাৰলে { প্ৰদৰ্শন: ব্লক; অস্পষ্টতা: ০.৫; } }
ওভাৰলেটো ঠাইতে আছিল, কিন্তু এতিয়াও লেম্পবোৰৰ লগত সংযোগ হোৱা নাছিল। মোক পোহৰৰ উৎসৰ প্ৰয়োজন আছিল। মোৰ লেম্পবোৰ সহজ, আৰু প্ৰতিটোতে এটা বৃত্তৰ উপাদান থাকে যিটো মই ফিল্টাৰেৰে ম্লান কৰিলোঁ। ফিল্টাৰে সমগ্ৰ বৃত্তটোৰ ওপৰত অতি কোমল ব্লাৰ সৃষ্টি কৰে।
অভাৰলে আৰু লেম্পবোৰ পৃথকে পৃথকে এনিমেট কৰাৰ পৰিৱৰ্তে মই এটা “শিখা” ৰঙৰ টোকেন এনিমেট কৰো আৰু তাৰ পৰাই বাকী সকলো উলিয়াওঁ। প্ৰথমে, মই OKLCH চেনেলসমূহৰ বাবে তিনিটা টাইপ কৰা স্বনিৰ্বাচিত বৈশিষ্ট্য পঞ্জীয়ন কৰোঁ: @সম্পদ --fl-l { বাক্যবিন্যাস: "<সংখ্যা>"; উত্তৰাধিকাৰী: সত্য; প্ৰাৰম্ভিক-মান: ০.৮৬; } @সম্পদ --fl-c { বাক্যবিন্যাস: "<সংখ্যা>"; উত্তৰাধিকাৰী: সত্য; প্ৰাৰম্ভিক-মান: ০.১২; } @সম্পদ --fl-h { বাক্যবিন্যাস: "<সংখ্যা>"; উত্তৰাধিকাৰী: সত্য; প্ৰাৰম্ভিক-মান: ৯৫; }
মই সেই চেনেলবোৰ এনিমেট কৰিলোঁ, ইচ্ছাকৃতভাৱে কেইটামান ফ্ৰেম কমলা ৰঙৰ ফালে ঠেলি দিলোঁ যাতে ফ্লিকাৰটোৱে ফায়াৰলাইট হিচাপে স্পষ্টকৈ পঢ়িব পাৰে:
@keyframes শিখা { ০%, ১০০% { --fl-l: ০.৮৬; --fl-c: ০.১২; --fl-h: ৯৫; } ৬% { --fl-l: ০.৯১; --fl-c: ০.১০; --fl-h: ৯২; } ১২% { --fl-l: ০.৮৩; --fl-c: ০.১৪; --fl-h: ১০০; } ১৮% { --fl-l: ০.৮৮; --fl-c: ০.১১; --fl-h: ৯৪; } ২৪% { --fl-l: ০.৮২; --fl-c: ০.১৬; --fl-h: ৮২; } ৩০% { --fl-l: ০.৯০; --fl-c: ০.১২; --fl-h: ৯০; } ৩৬% { --fl-l: ০.৭৯; --fl-c: ০.১৭; --fl-h: ৭৬; } ৪৪% { --fl-l: ০.৮৭; --fl-c: ০.১২; --fl-h: ৯৬; } ৫২% { --fl-l: ০.৮১; --fl-c: ০.১৫; --fl-h: ১০২; } ৬০% { --fl-l: ০.৮৯; --fl-c: ০.১১; --fl-h: ৯৩; } ৬৮% { --fl-l: ০.৮৩; --fl-c: ০.১৬; --fl-h: ৮৫; } ৭৬% { --fl-l: ০.৯১; --fl-c: ০.১০; --fl-h: ৯১; } ৮৪% { --fl-l: ০.৮৫; --fl-c: ০.১৪; --fl-h: ৯৮; } ৯২% {--fl-l: ০.৮০; --fl-c: ০.১৭; --fl-h: ৭৪; } }
তাৰ পিছত মই সেই এনিমেচনটো SVG লৈ স্কোপ কৰিলোঁ, গতিকে অংশীদাৰী চলকসমূহ লেম্প আৰু মোৰ অভাৰলে দুয়োটাৰে বাবে উপলব্ধ:
@media (পছন্দ-হ্ৰাস-গতি: কোনো-পছন্দ) { .svg-mine[ডাটা-এনিমেচন=অন] { এনিমেচন: শিখা 3.6s অসীম ৰৈখিক; পৃথকীকৰণ: পৃথক কৰা;
/* এনিমেটেড চেনেলৰ পৰা এটা শিখা ৰং নিৰ্মাণ কৰক */ --শিখা: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* শিখাৰ পৰা আহৰণ কৰা লেম্পৰ ৰং */ --লেম্প-কোৰ: oklch(var(--শিখাৰ পৰা) calc(l + 0.05) calc(c * 0.70) h);
/* একে শিখাৰ পৰা আহৰণ কৰা ওভাৰলে টিন্ট */ --overlay-tint: oklch(var(--শিখাৰ পৰা) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
শেষত, মই সেই ব্যুৎপন্ন ৰংবোৰ গ্লয়িং লেম্প আৰু ইয়াৰ প্ৰভাৱত থকা অভাৰলেত প্ৰয়োগ কৰিলোঁ: @media (পছন্দ-হ্ৰাস-গতি: কোনো-পছন্দ) { .svg-mine[ডাটা-এনিমেচন=অন] #mine-lamp-1 > বৃত্ত, .svg-mine[ডাটা-এনিমেচন=অন] #mine-lamp-2 > circle { ভৰোৱা: var(--লেম্প-কোৰ); }
.svg-mine[ডাটা-এনিমেচন=অন] #অভাৰলে { প্ৰদৰ্শন: ব্লক; ভৰোৱা: var(--অভাৰলে-টিন্ট); অস্পষ্টতা: ০.৫; } }
যেতিয়া শিখা কমলা ৰঙৰ ফালে স্থানান্তৰিত হয়, তেতিয়া লেম্পবোৰ গৰম হৈ পৰে আৰু ইয়াৰ লগে লগে দৃশ্যটো গৰম হৈ পৰে। শিখা ঠাণ্ডা হ’লে সকলো একেলগে থিতাপি লয়। আটাইতকৈ ভাল কথাটো হ’ল একোৱেই হাতেৰে লিখা নহয়। যদি মই ফাউণ্ডেচনৰ ৰং সলনি কৰো বা ফ্লেম এনিমেচন ৰেঞ্জসমূহ টুইক কৰো, গোটেই লাইটিং চিষ্টেমটো একেলগে আপডেট হয়। চূড়ান্ত ফলাফল মোৰ ৱেবচাইটত চাব পাৰিব। পুনৰ ব্যৱহাৰ, পুনৰ উদ্দেশ্য, পুনৰ ভ্ৰমণ কৰা সেই হান্না-বাৰ্বেৰা এনিমেটৰসকলে প্ৰয়োজনীয়তাৰ বাবে উপাদানসমূহ পুনৰ উদ্দেশ্য কৰিবলৈ বাধ্য হৈছিল, কিন্তু মই ৰং পুনৰ ব্যৱহাৰ কৰো কাৰণ ই মোৰ কামক অধিক সামঞ্জস্যপূৰ্ণ আৰু ৰক্ষণাবেক্ষণ কৰাত সহজ কৰি তোলে। CSS আপেক্ষিক ৰঙৰ মানসমূহে মোক অনুমতি দিয়ে:
এটা ভেটিৰ ৰং সংজ্ঞায়িত কৰক, ইয়াৰ লগত আন ৰংবোৰ কেনেদৰে সম্পৰ্কিত বৰ্ণনা কৰা, সেই সম্পৰ্কবোৰ সকলোতে পুনৰ ব্যৱহাৰ কৰক, আৰু... এটা মান সলনি কৰি ব্যৱস্থাপ্ৰণালীক সজীৱ কৰক।
আপেক্ষিক ৰঙে কেৱল থিমিং সহজ কৰি তোলাই নহয়। ই এনে এটা চিন্তাধাৰাক উৎসাহিত কৰে য’ত গতিৰ দৰে ৰং ইচ্ছাকৃত — আৰু য’ত এটা মূল্য সলনি কৰিলে ইয়াৰ তলৰ কামটো পুনৰ লিখা নোহোৱাকৈ এটা সম্পূৰ্ণ দৃশ্যক ৰূপান্তৰিত কৰিব পাৰি।
