আমি সম্প্রতি আমার ওয়েবসাইটে অ্যানিমেটেড গ্রাফিক্স রিফ্রেশ করেছি একটি নতুন থিম এবং একদল অগ্রগামী চরিত্রের সাথে, এই সিরিজে আমি যে কৌশলগুলি ভাগ করেছি তার প্রচুর অনুশীলন করে৷ আমার কয়েকটি অ্যানিমেশন চেহারা পরিবর্তন করে যখন কেউ তাদের সাথে যোগাযোগ করে বা দিনের বিভিন্ন সময়ে।
আমার ব্লগ পৃষ্ঠাগুলির উপরে গ্রাফিকের রং প্রতিদিন সকাল থেকে রাত পর্যন্ত পরিবর্তিত হয়। তারপরে, স্নো মোড রয়েছে, যা একটি ওভারলে লেয়ার এবং একটি মিশ্রন মোডের সৌজন্যে শীতল রঙ এবং একটি শীতকালীন থিম যোগ করে।
এটিতে কাজ করার সময়, আমি ভাবতে শুরু করি যে প্রক্রিয়াটিকে সহজ করার সময় CSS আপেক্ষিক রঙের মানগুলি আমাকে আরও নিয়ন্ত্রণ দিতে পারে কিনা। দ্রষ্টব্য: এই টিউটোরিয়ালে, আমি থিমিং গ্রাফিক্স এবং অ্যানিমেশনের জন্য আপেক্ষিক রঙের মান এবং OKLCH রঙের স্থানের উপর ফোকাস করব। আপনি যদি আপেক্ষিক রঙের গভীরে ডুব দিতে চান, আহমেদ শাদেদ একটি দুর্দান্ত ইন্টারেক্টিভ গাইড তৈরি করেছেন। রঙের স্থান, গামুট এবং ওকেএলসিএইচের জন্য, আমাদের নিজস্ব জিওফ গ্রাহাম তাদের সম্পর্কে লিখেছেন।
উপাদানের বারবার ব্যবহার মূল ছিল. জুম এবং ওভারলে একই আর্টওয়ার্ক থেকে নতুন দৃশ্য নির্মাণে সহায়তা করে যখনই সম্ভব পটভূমিগুলি পুনরায় ব্যবহার করা হয়েছিল। এটি প্রয়োজনীয়তার জন্ম হয়েছিল, তবে এটি পৃথক দৃশ্যের পরিবর্তে সিরিজের ক্ষেত্রে চিন্তাভাবনাকে উত্সাহিত করেছিল। ম্যানুয়ালি কালার প্যালেট আপডেট করার সমস্যা আসুন সরাসরি আমার চ্যালেঞ্জে যাই। এই রকম টুন শিরোনামে — 1959 সালের যোগী বিয়ার শো পর্বের উপর ভিত্তি করে “লুলাবি-বাই বিয়ার” — এবং আমার কাজ সাধারণত, প্যালেটগুলি কয়েকটি নির্বাচিত রঙের মধ্যে সীমাবদ্ধ।
আমি আমার "ফাউন্ডেশন" কালার থেকে শেড এবং টিন্ট তৈরি করি যাতে প্যালেটটি আরও বেশি রঙ যোগ না করে প্রসারিত হয়।
স্কেচে, আমি এইচএসএল কালার স্পেসে কাজ করি, তাই এই প্রক্রিয়ার সাথে আমার ফাউন্ডেশনের রঙের হালকাতা মান বাড়ানো বা কমানো জড়িত। সত্যি কথা বলতে কি, এটা কোনো কঠিন কাজ নয় — তবে ভিন্ন ফাউন্ডেশনের রঙ বেছে নেওয়ার জন্য শেড এবং টিন্টের সম্পূর্ণ নতুন সেট তৈরি করতে হবে। ম্যানুয়ালি করা, বারবার, দ্রুত শ্রমসাধ্য হয়ে ওঠে।
আমি এইচএসএল - এইচ (হিউ), এস (স্যাচুরেশন), এবং এল (লাইটনেস) - রঙের স্থান উল্লেখ করেছি, তবে এটি রঙ বর্ণনা করার কয়েকটি উপায়ের মধ্যে একটি মাত্র। RGB — R (লাল), G (সবুজ), B (নীল) — সম্ভবত সবচেয়ে পরিচিত, অন্তত তার হেক্স আকারে। এছাড়াও রয়েছে LAB — L (হালকা), A (সবুজ-লাল), B (নীল-হলুদ) — এবং নতুন, কিন্তু এখন ব্যাপকভাবে সমর্থিত LCH — L (হালকাতা), C (ক্রোমা), H (hue) — মডেল তার OKLCH আকারে। LCH - বিশেষ করে CSS-এ OKLCH - দিয়ে আমি আমার ফাউন্ডেশনের রঙের হালকাতা মান সামঞ্জস্য করতে পারি।
অথবা আমি এর ক্রোমা পরিবর্তন করতে পারি। এলসিএইচ ক্রোমা এবং এইচএসএল স্যাচুরেশন উভয়ই একটি রঙের তীব্রতা বা সমৃদ্ধি বর্ণনা করে, তবে তারা তা বিভিন্ন উপায়ে করে। LCH আমাকে একটি বিস্তৃত পরিসর এবং রংগুলির মধ্যে আরও অনুমানযোগ্য মিশ্রণ দেয়।
একই হালকাতা এবং ক্রোমা মানগুলি ভাগ করে এমন রঙের প্যালেট তৈরি করতে আমি রঙ পরিবর্তন করতে পারি। এইচএসএল এবং এলসিএইচ উভয় ক্ষেত্রেই, রঙের বর্ণালী লাল থেকে শুরু হয়, সবুজ এবং নীলের মধ্য দিয়ে চলে এবং লালে ফিরে আসে।
কেন OKLCH পরিবর্তিত হয়েছে কিভাবে আমি রঙ সম্পর্কে চিন্তা করি OKLCH রঙের স্থানের জন্য ব্রাউজার সমর্থন এখন বিস্তৃত, এমনকি ডিজাইন টুল - স্কেচ সহ - ধরা না গেলেও। সৌভাগ্যবশত, এটি আপনাকে OKLCH ব্যবহার করা থেকে বিরত করবে না। ব্রাউজারগুলি আনন্দের সাথে আপনার জন্য হেক্স, এইচএসএল, ল্যাব, এবং আরজিবি মানগুলিকে ওকেএলসিএইচ-এ রূপান্তর করবে। আপনি হেক্স সহ যেকোন স্পেসে ফাউন্ডেশনের রঙ সহ একটি CSS কাস্টম সম্পত্তি সংজ্ঞায়িত করতে পারেন: /* ভিত্তি রঙ */ --ফাউন্ডেশন: #5accd6;
এটি থেকে প্রাপ্ত যেকোনো রং স্বয়ংক্রিয়ভাবে OKLCH-এ রূপান্তরিত হবে: --ফাউন্ডেশন-আলো: oklch(var(--foundation) থেকে [...]; } --foundation-mid: oklch(var(--foundation) থেকে [...]; } --ফাউন্ডেশন-ডার্ক: oklch(var(--foundation) থেকে [...]; }
একটি নকশা সিস্টেম হিসাবে আপেক্ষিক রঙ এই বলে আপেক্ষিক রঙের কথা ভাবুন: "এই রঙটি নিন, এটিকে টুইক করুন, তারপর আমাকে ফলাফল দিন।" রঙ সামঞ্জস্য করার দুটি উপায় রয়েছে: পরম পরিবর্তন এবং আনুপাতিক পরিবর্তন। এগুলি কোডে একই রকম দেখায়, কিন্তু একবার আপনি ফাউন্ডেশনের রঙগুলি অদলবদল করা শুরু করলে খুব আলাদাভাবে আচরণ করে। সেই পার্থক্যটি বোঝা যা আপেক্ষিক রঙ ব্যবহার করে একটি সিস্টেমে পরিণত করতে পারে। /* ভিত্তি রঙ */ --ফাউন্ডেশন: #5accd6;
উদাহরণস্বরূপ, আমার ফাউন্ডেশনের রঙের হালকাতার মান হল 0.7837, যখন একটি গাঢ় সংস্করণের মান 0.5837। পার্থক্য গণনা করতে, আমি উচ্চতর থেকে নিম্ন মান বিয়োগ করি এবং একটি calc() ফাংশন ব্যবহার করে ফলাফল প্রয়োগ করি: --ভিত্তি-অন্ধকার: oklch(var(--ফাউন্ডেশন) থেকে calc(l - 0.20) c h);
একটি হালকা রঙ অর্জন করতে, আমি পরিবর্তে পার্থক্য যোগ করি: --ভিত্তি-আলো: oklch(var(--ফাউন্ডেশন) থেকে calc(l + 0.10) c h);
ক্রোমাসমন্বয় একই প্রক্রিয়া অনুসরণ করে। আমার ফাউন্ডেশনের রঙের তীব্রতা 0.1035 থেকে 0.0035 এ কমাতে, আমি অন্যটির থেকে একটি মান বিয়োগ করি: oklch(var(--ফাউন্ডেশন) থেকে l calc(c - 0.10) h);
রঙের একটি প্যালেট তৈরি করতে, আমি আমার ফাউন্ডেশনের রঙ (200) এবং আমার নতুন রঙের (260) রঙের মধ্যে পার্থক্য গণনা করি: oklch(var(--ফাউন্ডেশন) থেকে l c calc(h + 60));
সেই হিসাবগুলো পরম। যখন আমি একটি নির্দিষ্ট পরিমাণ বিয়োগ করি, তখন আমি কার্যকরভাবে বলি, "সর্বদা এতটুকু বিয়োগ করুন।" স্থির মান যোগ করার সময় একই প্রযোজ্য: calc(c - 0.10) calc(c + 0.10)
আমি এই পদ্ধতির সীমা কঠিনভাবে শিখেছি। যখন আমি স্থির ক্রোমা মানগুলি বিয়োগ করার উপর নির্ভর করতাম, তখন আমি ভিত্তি পরিবর্তন করার সাথে সাথে রঙগুলি ধূসর হয়ে যায়। একটি প্যালেট যা এক রঙের জন্য কাজ করেছিল অন্য রঙের জন্য আলাদা হয়ে গেছে। গুণ ভিন্নভাবে আচরণ করে। যখন আমি ক্রোমাকে গুণ করি, তখন আমি ব্রাউজারকে বলছি: "এই রঙের তীব্রতা একটি অনুপাত দ্বারা হ্রাস করুন।" রঙের মধ্যে সম্পর্ক অটুট থাকে, এমনকি যখন ভিত্তি পরিবর্তন হয়: calc(c * 0.10)
মাই মুভ ইট, স্কেল ইট, রোটেট ইট রুলস
হালকাতা সরান (যোগ বা বিয়োগ), স্কেল ক্রোমা (গুণ করুন), রঙ ঘোরান (ডিগ্রী যোগ বা বিয়োগ)।
আমি ক্রোমা স্কেল করি কারণ আমি বেস রঙের সমানুপাতিক থাকার জন্য তীব্রতার পরিবর্তন চাই। বর্ণের সম্পর্কগুলি ঘূর্ণায়মান, তাই বর্ণকে গুন করার কোন মানে হয় না। হালকাতা উপলব্ধিযোগ্য এবং পরম — এটিকে গুণ করা প্রায়শই অদ্ভুত ফলাফল দেয়।
একটি রঙ থেকে একটি সম্পূর্ণ থিম আপেক্ষিক রঙ আমাকে একটি ফাউন্ডেশনের রঙ নির্ধারণ করতে এবং এটি থেকে আমার প্রয়োজনীয় প্রতিটি রঙ তৈরি করতে দেয় — ফিল, স্ট্রোক, গ্রেডিয়েন্ট স্টপ, শ্যাডো —। সেই মুহুর্তে, রঙ একটি প্যালেট হওয়া বন্ধ করে এবং একটি সিস্টেম হতে শুরু করে। SVG চিত্রগুলি ফিল, স্ট্রোক এবং গ্রেডিয়েন্ট জুড়ে একই কয়েকটি রঙ পুনরায় ব্যবহার করার প্রবণতা রয়েছে। আপেক্ষিক রঙ আপনাকে সেই সম্পর্কগুলিকে একবার সংজ্ঞায়িত করতে দেয় এবং সেগুলিকে সর্বত্র পুনঃব্যবহার করতে দেয় — অনেকটা অ্যানিমেটররা নতুন দৃশ্য তৈরি করতে ব্যাকগ্রাউন্ডের পুনঃব্যবহারের মতো৷
একবার ফাউন্ডেশনের রঙ পরিবর্তন করুন, এবং প্রতিটি প্রাপ্ত রঙ স্বয়ংক্রিয়ভাবে আপডেট হয়, হাতে কিছু পুনঃগণনা না করে। অ্যানিমেটেড গ্রাফিক্সের বাইরে, আমি বোতাম এবং লিঙ্কগুলির মতো ইন্টারেক্টিভ উপাদানগুলির অবস্থার জন্য রঙ নির্ধারণ করতে এই একই পদ্ধতি ব্যবহার করতে পারি। আমার "লুলাবাই-বাই বিয়ার" টুন শিরোনামে আমি যে ফাউন্ডেশনের রঙটি ব্যবহার করেছি তা হল একটি সায়ান-সুদর্শন নীল। ব্যাকগ্রাউন্ডটি আমার ফাউন্ডেশন এবং একটি গাঢ় সংস্করণের মধ্যে একটি রেডিয়াল গ্রেডিয়েন্ট।
সম্পূর্ণ ভিন্ন মেজাজের সাথে বিকল্প সংস্করণ তৈরি করতে, আমাকে শুধুমাত্র ভিত্তির রঙ পরিবর্তন করতে হবে: --ফাউন্ডেশন: #5accd6; --গ্র্যাড-এন্ড: var(--ফাউন্ডেশন); --গ্র্যাড-স্টার্ট: oklch(var(--ফাউন্ডেশন থেকে) calc(l - 0.2357) calc(c * 0.833) h);
রঙের মানগুলি নকল না করে আমার এসভিজি গ্রেডিয়েন্টে সেই কাস্টম বৈশিষ্ট্যগুলিকে আবদ্ধ করতে, আমি হার্ড-কোডেড স্টপ-কালার মানগুলি ইনলাইন শৈলীগুলির সাথে প্রতিস্থাপন করেছি:
এর পরে, আমি নিশ্চিত করতে চাই যে আমার টুন টেক্সট সর্বদা আমি যে ফাউন্ডেশন রঙ বেছে নিই তার সাথে বৈপরীত্য। একটি 180 ডিগ্রী রঙের ঘূর্ণন একটি পরিপূরক রঙ তৈরি করে যা অবশ্যই পপ করে - কিন্তু অস্বস্তিকরভাবে কম্পন করতে পারে: .টেক্সট-আলো { পূরণ করুন: oklch(var(--ফাউন্ডেশন) থেকে l c calc(h + 180)); }
একটি 90° শিফট সম্পূর্ণরূপে পরিপূরক না হয়ে একটি উজ্জ্বল গৌণ রঙ তৈরি করে: .টেক্সট-আলো { পূরণ করুন: oklch(var(--ফাউন্ডেশন) থেকে l c calc(h - 90)); }
Quick Draw McGraw-এর 1959 Toon শিরোনাম “El Kabong”-এর আমার বিনোদন একই কৌশল ব্যবহার করে কিন্তু আরও বৈচিত্র্যময় প্যালেট সহ। উদাহরণস্বরূপ, ফাউন্ডেশনের রঙ এবং একটি গাঢ় শেডের মধ্যে আরেকটি রেডিয়াল গ্রেডিয়েন্ট আছে।
ব্যাকগ্রাউন্ডে বিল্ডিং এবং গাছ একই ফাউন্ডেশনের রঙের বিভিন্ন শেড। সেই পথগুলির জন্য, আমার দুটি অতিরিক্ত ফিল রঙের প্রয়োজন ছিল: .bg-মধ্য { পূরণ করুন: oklch(var(--ফাউন্ডেশন) থেকে calc(l - 0.04) calc(c * 0.91) h); }
.bg-অন্ধকার { পূরণ করুন: oklch(var(--ফাউন্ডেশন) থেকে calc(l - 0.12) calc(c * 0.64) h); }
যখন ভিত্তিগুলি সরানো শুরু করে
এখন পর্যন্ত, আমি যা দেখিয়েছি তা স্থির। এমনকি যখন কেউ ফাউন্ডেশনের রঙ পরিবর্তন করার জন্য একটি রঙ চয়নকারী ব্যবহার করে, সেই পরিবর্তনটি তাত্ক্ষণিকভাবে ঘটে। কিন্তু অ্যানিমেটেড গ্রাফিক্স খুব কমই স্থির থাকে — ক্লু নামেই আছে। সুতরাং, যদি রঙটি সিস্টেমের অংশ হয়, তবে এটি অ্যানিমেট করতে পারে না এমন কোনও কারণ নেই।
ফাউন্ডেশন কালার অ্যানিমেট করার জন্য, আমাকে প্রথমে এটির OKLCH চ্যানেলে বিভক্ত করতে হবে— হালকাতা, ক্রোমা এবং রঙ। তবে একটি গুরুত্বপূর্ণ অতিরিক্ত পদক্ষেপ রয়েছে: আমাকে টাইপ করা কাস্টম বৈশিষ্ট্য হিসাবে সেই মানগুলি নিবন্ধন করতে হবে। কিন্তু এর মানে কি?
ডিফল্টরূপে, একটি ব্রাউজার জানে না যে একটি CSS কাস্টম প্রপার্টি মান একটি রঙ, দৈর্ঘ্য, সংখ্যা বা অন্য কিছু সম্পূর্ণরূপে উপস্থাপন করে কিনা। প্রায়শই এর অর্থ হল অ্যানিমেশনের সময় এগুলিকে মসৃণভাবে ইন্টারপোলেট করা যায় না এবং এক মান থেকে পরবর্তীতে লাফানো যায়।
একটি কাস্টম প্রপার্টি রেজিস্টার করা ব্রাউজারকে বলে যে এটি কোন ধরনের মানের প্রতিনিধিত্ব করে এবং সময়ের সাথে সাথে এটি কীভাবে আচরণ করা উচিত। এই ক্ষেত্রে, আমি চাই যে ব্রাউজার আমার রঙের চ্যানেলগুলিকে সংখ্যা হিসাবে বিবেচনা করুক যাতে সেগুলি মসৃণভাবে অ্যানিমেট করা যায়।
@property --f-l {
সিনট্যাক্স: "
@property --f-c {
সিনট্যাক্স: "
@property --f-h {
সিনট্যাক্স: "
একবার নিবন্ধিত হয়ে গেলে, এই কাস্টম বৈশিষ্ট্যগুলি নেটিভ সিএসএসের মতো আচরণ করে। ব্রাউজার তাদের ফ্রেম-বাই-ফ্রেমে ইন্টারপোলেট করতে পারে। আমি তারপর সেই চ্যানেলগুলি থেকে ভিত্তি রঙটি পুনর্নির্মাণ করি: --ফাউন্ডেশন: oklch(var(--f-l) var(--f-c) var(--f-h));
এটি অন্য যেকোনো সংখ্যাসূচক মানের মতোই ফাউন্ডেশনের রঙকে অ্যানিমেটেবল করে তোলে। এখানে একটি সাধারণ "শ্বাস নেওয়া" অ্যানিমেশন রয়েছে যা সময়ের সাথে সাথে হালকাভাবে পরিবর্তন করে: @keyframes শ্বাস নেয় { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-টাইটেল { অ্যানিমেশন: শ্বাস 10s সহজ-ইন-আউট অসীম; }
যেহেতু ফিল, গ্রেডিয়েন্ট, এবং স্ট্রোকের অন্য প্রতিটি রঙ --foundation থেকে প্রাপ্ত, তারা সব একসাথে অ্যানিমেট করে, এবং কিছুই ম্যানুয়ালি আপডেট করার দরকার নেই। একটি অ্যানিমেটেড রঙ, অনেক প্রভাব এই প্রক্রিয়ার শুরুতে, আমি ভাবছিলাম যে CSS আপেক্ষিক রঙের মানগুলি আরও সম্ভাবনার অফার করতে পারে এবং তাদের বাস্তবায়ন করা সহজ করে তোলে। আমি সম্প্রতি আমার ওয়েবসাইটের যোগাযোগের পৃষ্ঠায় একটি নতুন সোনার খনি পটভূমি যোগ করেছি এবং প্রথম পুনরাবৃত্তিতে তেলের বাতিগুলি রয়েছে যা জ্বলতে এবং দোল দেয়।
আমি অন্বেষণ করতে চেয়েছিলাম কিভাবে অ্যানিমেটিং CSS আপেক্ষিক রঙগুলি খনির অভ্যন্তরটিকে ল্যাম্পের রঙ দিয়ে রঙ করে আরও বাস্তবসম্মত করে তুলতে পারে। আমি চেয়েছিলাম যে তারা তাদের চারপাশের বিশ্বকে প্রভাবিত করবে, যেভাবে বাস্তব আলো করে। তাই, একাধিক রঙ অ্যানিমেট করার পরিবর্তে, আমি একটি ছোট আলো ব্যবস্থা তৈরি করেছি যা শুধুমাত্র একটি রঙকে অ্যানিমেট করে।
আমার প্রথম কাজ ছিল ব্যাকগ্রাউন্ড এবং আমার ল্যাম্পের মধ্যে একটি ওভারলে লেয়ার স্লট করা: <পথ id="overlay" fill="var(-ওভারলে-টিন্ট)" [...] style="mix-blend-mode: color" />
আমি মিক্স-ব্লেন্ড-মোড ব্যবহার করেছি: রঙ কারণ এটি অন্তর্নিহিত আলোকসজ্জা সংরক্ষণ করার সময় এটির নীচে যা আছে তা টিন্ট করে। অ্যানিমেশন চালু হলেই আমি ওভারলেটি দৃশ্যমান করতে চাই, তাই আমি ওভারলে অপ্ট-ইন করেছি: .svg-mine #overlay { প্রদর্শন: কোনোটিই নয়; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #ওভারলে { প্রদর্শন: ব্লক; অস্বচ্ছতা: 0.5; } }
ওভারলে জায়গায় ছিল, কিন্তু এখনও ল্যাম্পের সাথে সংযুক্ত হয়নি। আমার একটা আলোর উৎস দরকার ছিল। আমার ল্যাম্পগুলি সহজ, এবং প্রতিটিতে একটি বৃত্তের উপাদান রয়েছে যা আমি একটি ফিল্টার দিয়ে ঝাপসা করেছি৷ ফিল্টারটি পুরো বৃত্তের উপর একটি খুব নরম অস্পষ্টতা তৈরি করে।
ওভারলে এবং ল্যাম্পগুলিকে আলাদাভাবে অ্যানিমেট করার পরিবর্তে, আমি একটি একক "শিখা" রঙের টোকেন অ্যানিমেট করি এবং এটি থেকে অন্য সবকিছু আহরণ করি। প্রথমে, আমি OKLCH চ্যানেলের জন্য তিনটি টাইপ করা কাস্টম বৈশিষ্ট্য নিবন্ধন করি:
@property --fl-l {
সিনট্যাক্স: "
আমি সেই চ্যানেলগুলিকে অ্যানিমেট করেছি, ইচ্ছাকৃতভাবে কয়েকটি ফ্রেম কমলার দিকে ঠেলে দিয়েছি যাতে ফ্লিকারটি ফায়ারলাইট হিসাবে স্পষ্টভাবে পড়তে পারে:
@কীফ্রেম শিখা { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; } 6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; } 12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; } 18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; } 24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; } 30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; } 36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; } 44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; } 52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; } 60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; } 68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; } 76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; } 84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; } 92% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
তারপরে আমি সেই অ্যানিমেশনটিকে SVG-তে স্কোপ করেছি, তাই ভাগ করা ভেরিয়েবলগুলি ল্যাম্প এবং আমার ওভারলে উভয়ের জন্য উপলব্ধ:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { অ্যানিমেশন: শিখা 3.6s অসীম রৈখিক; বিচ্ছিন্নতা: বিচ্ছিন্ন করা;
/* অ্যানিমেটেড চ্যানেলগুলি থেকে একটি শিখা রঙ তৈরি করুন */ --ফ্লেম: oklch(var(-fl-l) var(-fl-c) var(--fl-h));
/* বাতির রঙ শিখা থেকে উদ্ভূত */ --ল্যাম্প-কোর: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* একই শিখা থেকে প্রাপ্ত ওভারলে টিন্ট */ --ওভারলে-টিন্ট: oklch(var(--flame) থেকে calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
অবশেষে, আমি সেই প্রাপ্ত রঙগুলি প্রদীপ্ত বাতিগুলিতে এবং ওভারলেতে প্রয়োগ করেছি যা তারা প্রভাবিত করে: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > বৃত্ত, .svg-mine[data-animations=on] #mine-lamp-2 > বৃত্ত { পূরণ করুন: var(--ল্যাম্প-কোর); }
.svg-mine[data-animations=on] #ওভারলে { প্রদর্শন: ব্লক; পূরণ করুন: var(--ওভারলে-টিন্ট); অস্বচ্ছতা: 0.5; } }
যখন শিখা কমলার দিকে সরে যায়, তখন প্রদীপগুলি উষ্ণ হয় এবং দৃশ্যটি তাদের সাথে উষ্ণ হয়। যখন শিখা ঠান্ডা হয়, সবকিছু একসাথে স্থির হয়। সবচেয়ে ভাল অংশ হল যে কিছুই ম্যানুয়ালি লেখা হয় না। আমি যদি ফাউন্ডেশনের রঙ পরিবর্তন করি বা ফ্লেম অ্যানিমেশন রেঞ্জে পরিবর্তন করি, পুরো আলো সিস্টেম একই সাথে আপডেট হয়। আপনি আমার ওয়েবসাইটে চূড়ান্ত ফলাফল দেখতে পারেন. পুনঃব্যবহার, পুনঃউদ্দেশ্য, পুনরায় পরিদর্শন করা সেই হানা-বারবেরা অ্যানিমেটরদের প্রয়োজনের বাইরে উপাদানগুলিকে পুনরায় ব্যবহার করতে বাধ্য করা হয়েছিল, তবে আমি রঙগুলি পুনরায় ব্যবহার করি কারণ এটি আমার কাজকে আরও সামঞ্জস্যপূর্ণ এবং বজায় রাখা সহজ করে তোলে। CSS আপেক্ষিক রঙের মান আমাকে অনুমতি দেয়:
একটি একক ভিত্তি রং সংজ্ঞায়িত করুন, বর্ণনা করুন কিভাবে অন্যান্য রং এর সাথে সম্পর্কিত, সেই সম্পর্কগুলি সর্বত্র পুনরায় ব্যবহার করুন, এবং একটি মান পরিবর্তন করে সিস্টেমকে অ্যানিমেট করুন।
আপেক্ষিক রঙ শুধু থিমিং সহজ করে না। এটি এমন একটি চিন্তাভাবনাকে উত্সাহিত করে যেখানে রঙ, গতির মতো, ইচ্ছাকৃত - এবং যেখানে একটি মান পরিবর্তন করা একটি সম্পূর্ণ দৃশ্যকে এর নীচে কাজটি পুনর্লিখন না করেই রূপান্তরিত করতে পারে৷
