একটি কনিক গ্রেডিয়েন্ট ফেস দিয়ে একটি রিয়েল-টাইম ঘড়ি তৈরি করা

গ্রেডিয়েন্টগুলি বেশ কিছুদিন ধরে CSS স্পেকট্রামের একটি অংশ। আমরা অনেক প্রকল্পে প্রচুর রেডিয়াল এবং রৈখিক গ্রেডিয়েন্ট দেখতে পাই, তবে এক ধরনের গ্রেডিয়েন্ট আছে যা কিছুটা একা বলে মনে হয়: কনিক গ্রেডিয়েন্ট. আমরা এই ধরনের গ্রেডিয়েন্ট ব্যবহার করে একটি ঘড়ির মুখ তৈরি করতে যাচ্ছি।

কনিক গ্রেডিয়েন্টের সাথে কাজ করা

আমরা যা তৈরি করছি তা একটি কেন্দ্রবিন্দুর চারপাশে ঘোরানো রঙের রূপান্তর সহ একটি গ্রেডিয়েন্ট নিয়ে গঠিত এবং একাধিক রঙের মান থাকতে পারে। এই ঘড়িটি কাজ করার জন্য, আমরা একটি কনিক গ্রেডিয়েন্টের কোণ মানও ব্যবহার করব যা ঘূর্ণন বা প্রারম্ভিক বিন্দুকে সংজ্ঞায়িত করে। a ব্যবহার করে কোণটি সংজ্ঞায়িত করা হয় from মান।

background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);

এর মধ্যে মজার বিষয় হল, একটি প্রারম্ভিক কোণ CSS-এ নেতিবাচক মান থাকতে পারে, যা পরে কাজে আসবে।

একটি শঙ্কু গ্রেডিয়েন্টের একটি সহজ মার্জিত উদাহরণ:

আমাদের মৌলিক ঘড়ি নির্মাণ

ঘড়ি এবং হাতের জন্য কিছু HTML যোগ করে শুরু করা যাক:

আমাদের ঘড়ির জন্য কিছু ডিফল্ট স্টাইলিং তৈরি করা যাক। এটি সঠিকভাবে কাজ করার জন্য, আমরা পরবর্তীতে জাভাস্ক্রিপ্টের সাথে CSS ভেরিয়েবলগুলি আপডেট করব, তাই আসুন এই ভেরিয়েবলগুলিকে আমাদের ভিতরে স্কোপ করি .clock নির্বাচক সহজ টুইকিংয়ের জন্য, আসুন হাতের রঙগুলিও যোগ করি।

.clock {
  /* general clock vars */
  --hour-hand-color: #000;
  --hour-hand-degrees: 0deg;
  --minute-hand-color: #000;
  --minute-hand-degrees: 0deg;
  --second-hand-color: hotpink;
  --second-hand-degrees: 0deg;

  position: relative;
  min-width: 320px;
  width: 25vw;
  height: 25vw;
  min-height: 320px;
  border-radius: 50%;
  margin: 0 auto;
  border: 7px solid #000;
}

/* clock hands */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  height: 45%;
  width: 4px;
  margin-left: -2px;
  background: var(--second-hand-color);
  border-radius: 6px;
  transform-origin: bottom center;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.second-hand {
  transform: rotate(var(--second-hand-degrees));
}
.hour-hand {
  height: 35%;
  border-radius: 40px;
  background-color: var(--hour-hand-color);
  transform: rotate(var(--hour-hand-degrees));
}
.minute-hand {
  height: 50%;
  background: var(--minute-hand-color);
  transform: rotate(var(--minute-hand-degrees));
}

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

আমাদের এখন পর্যন্ত যা আছে তা এখানে:

ঠিক আছে, আসুন সেই কাস্টম বৈশিষ্ট্যগুলি আপডেট করার দিকে এগিয়ে যাই!

আমাদের মৌলিক ঘড়ির জন্য জাভাস্ক্রিপ্ট যোগ করা হচ্ছে

প্রথমত, আমরা আমাদের ঘড়ি টার্গেট করতে যাচ্ছি এবং একটি ফাংশন তৈরি করব:

const clock = document.getElementById("clock");
function setDate() {
  // Code to set the current time and hand angles.
}
setDate();

আমাদের ফাংশনের ভিতরে আমরা ব্যবহার করে বর্তমান সময় আনতে যাচ্ছি Date() ক্রিয়া হাতের সঠিক কোণ গণনা করতে:

const now = new Date();
const secondsAngle = now.getSeconds() * 6; 
const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;

এই গণনা কিভাবে কাজ করে তা এখানে:

• সেকেন্ড: আমরা 60 সেকেন্ড সময় নিই এবং এটি দ্বারা গুণ করি 6, যা হতে হবে 360, একটি পূর্ণ বৃত্তে কোণের নিখুঁত সংখ্যা।
• মিনিট: সেকেন্ডের মতই, কিন্তু এখন আমরা সেকেন্ড কোণ যোগ করি এবং এটিকে ভাগ করি 60 আরও নির্ভুল ফলাফলের জন্য মিনিটের মধ্যে কোণটি একটু বাড়ান।
• ঘন্টার: প্রথমত, আমরা ঘন্টার অবশিষ্টাংশ গণনা করি এবং এটি দ্বারা ভাগ করি 12. তারপর আমরা যে অবশিষ্টাংশ দ্বারা ভাগ 12 আবার একটি দশমিক মান পেতে আমরা গুণ করতে পারি 360. উদাহরণস্বরূপ, যখন আমরা 23 তম ঘন্টায় থাকি, 23 / 12 = remain 11. এটিকে 12 দ্বারা ভাগ করুন এবং আমরা পাই 0.916 যা পরে গুণিত হয় 360 একটি গ্র্যান্ড মোট জন্য 330. এখানে, আমরা মিনিটের সাথে একই কাজ করব এবং মিনিট কোণ যোগ করব, বিভাজ্য 12, আরো সঠিক ফলাফলের জন্য।

এখন যেহেতু আমাদের অ্যাঙ্গেল আছে, আমাদের ফাংশনের শেষে নিম্নলিখিত যোগ করে আমাদের ঘড়ির ভেরিয়েবলগুলিকে আপডেট করার জন্য একমাত্র কাজ বাকি আছে:

clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");

শেষ, কিন্তু অন্তত নয়, আমরা একটি কাজের ঘড়ি পেতে এক সেকেন্ডের ব্যবধানে ফাংশনটি ট্রিগার করব:

const clock = document.getElementById("clock");
function setDate() {
  // etc.
}
// Tick tick tick
setInterval(setDate, 1000);
setDate();

আমাদের মৌলিক ঘড়ির কাজের ডেমো দেখুন:

এটি একটি শঙ্কুযুক্ত গ্রেডিয়েন্টে প্রয়োগ করা হচ্ছে

ঠিক আছে, তাই আমাদের ঘড়ির হাত কাজ করছে। আমরা যা চাই তা হল তাদের একটি শঙ্কুযুক্ত গ্রেডিয়েন্টে ম্যাপ করা যা সময়ের পরিবর্তনের সাথে সাথে আপডেট হয়। যদি আপনার কাছে "গ্রেডিয়েন্ট" মুখ সক্রিয় থাকে তবে আপনি একই প্রভাব দেখতে পাবেন:

এটি করার জন্য, আমাদের আপডেট করে শুরু করা যাক .clock একটি কনিক গ্রেডিয়েন্ট এবং দুটি কাস্টম বৈশিষ্ট্য সহ উপাদান যা শুরু এবং শেষ কোণগুলি নিয়ন্ত্রণ করে:

.clock {
  /* same as before */

  /* conic gradient vars */
  --start: 0deg;
  --end: 0deg;

  /* same as before */

  background: 
    conic-gradient(
      from var(--start),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.5) var(--end),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.7)
  );
}

আপনি এটিকে আপনার পছন্দ মতো স্টাইল করতে এটির সাথে কিছুটা খেলতে পারেন। আমি আমার পছন্দ অনুযায়ী গ্রেডিয়েন্টে কিছু অতিরিক্ত রং যোগ করেছি, কিন্তু যতক্ষণ না আপনার একটি শুরুর বিন্দু এবং একটি শেষ বিন্দু আছে, আপনি যেতে পারবেন।

পরবর্তী, আমরা আমাদের আপডেট করব setDate() ফাংশন যাতে এটি কনিক গ্রেডিয়েন্টে আমাদের শুরু এবং শেষ বিন্দুগুলির জন্য ভেরিয়েবল আপডেট করে। সূচনা বিন্দু হবে আমাদের সেকেন্ড হ্যান্ড, যা খুঁজে পাওয়া সহজ কারণ এটি আমাদের মিনিটের কোণের সমান হবে। ঘন্টা হাতে এই শেষ করতে, আমরা আমাদের শেষ বিন্দু হিসাবে একই করা উচিত hourAngle স্ক্রিপ্টে পরিবর্তনশীল, তবে এটি থেকে আমাদের শুরু বিন্দু বিয়োগ করুন।

let startPosition = minsAngle;
let endPosition = hourAngle - minsAngle;

এখন আমরা আবার জাভাস্ক্রিপ্ট দিয়ে আমাদের ভেরিয়েবল আপডেট করতে পারি:

clock.style.setProperty("--start", startPosition + "deg");
clock.style.setProperty("--end", endPosition + "deg");

মনে হচ্ছে আমরা এই সময়ে করা যেতে পারে, কিন্তু একটি ধরা আছে! যতক্ষণ না মিনিটের হাতে ঘন্টার হাতের চেয়ে ছোট কোণ থাকে ততক্ষণ এই গণনা ঠিকঠাক কাজ করে। আমাদের কনিক গ্রেডিয়েন্টটি অগোছালো হয়ে যাবে যখন মিনিটের হাতটি এটিকে অতিক্রম করবে। এটি ঠিক করার জন্য, আমরা একটি শুরু বিন্দু হিসাবে একটি নেতিবাচক মান ব্যবহার করব। সৌভাগ্যবশত, যখন এটি ঘটে তখন এটি চিহ্নিত করা সহজ। আমাদের ভেরিয়েবল আপডেট করার আগে আমরা নিম্নলিখিত যোগ করব:

if (minsAngle > hourAngle) {
  startPosition = minsAngle - 360;
  endPosition = hourAngle - startPosition;
}

বিয়োগ করে 360 আমাদের মিনিট কোণ থেকে, আমরা আমাদের জন্য একটি নেতিবাচক মান সেট করতে সক্ষম startposition পরিবর্তনশীল এই নেতিবাচক প্রারম্ভিক বিন্দুর কারণে, আমাদের শেষ অবস্থানটি শুরুর অবস্থান দ্বারা বিয়োগ করে ঘন্টার কোণ দ্বারা আপডেট করা উচিত।

আমরা সেখানে যাই — এখন ঘন্টা এবং মিনিট হাত গ্রেডিয়েন্ট কোণে সেট করা হয়েছে:

এটাই! তবে এটি আপনাকে আরও এগিয়ে নেওয়া থেকে আটকাতে দেবেন না। আপনার নিজস্ব শৈলী তৈরি করুন এবং মন্তব্যে আমার সাথে সেগুলি ভাগ করুন যাতে আমি সেগুলি পরীক্ষা করতে পারি.. আপনাকে এগিয়ে নিয়ে যাওয়ার জন্য এখানে একটি ছোট অনুপ্রেরণা রয়েছে: