নতুন CSS sin() এবং cos() ত্রিকোণমিতি ফাংশন দিয়ে একটি ঘড়ি তৈরি করা

CSS ত্রিকোণমিতি ফাংশন এখানে আছে! ঠিক আছে, যদি আপনি ফায়ারফক্স এবং সাফারির সর্বশেষ সংস্করণ ব্যবহার করেন, তাহলে তারা। সিএসএস-এ এই ধরণের গাণিতিক শক্তি থাকা সম্ভাবনার পুরো গুচ্ছ খুলে দেয়। এই টিউটোরিয়ালে, আমি ভেবেছিলাম যে আমরা আমাদের পায়ের আঙ্গুলগুলিকে জলে ডুবিয়ে রাখব যাতে কিছু নতুন ফাংশন অনুভব করা যায়: sin() এবং cos().

পাইপলাইনে অন্যান্য ত্রিকোণমিতি ফাংশন রয়েছে — সহ tan() -তাহলে শুধু ফোকাস কেন? sin() এবং cos()? তারা আমার মনের ধারণার জন্য নিখুঁত হতে পারে, যা একটি বৃত্তের প্রান্ত বরাবর পাঠ্য স্থাপন করা হয়। যে এখানে কভার করা হয়েছে CSS-ট্রিকস যখন ক্রিস একটি পদ্ধতি ভাগ করেছে যা একটি Sass মিক্সিন ব্যবহার করে. এটি ছয় বছর আগে, তাই এর রক্তপাতের প্রান্তের চিকিত্সা দেওয়া যাক।

এখানে আমার মনে কি আছে. আবার, এই মুহূর্তে এটি শুধুমাত্র Firefox এবং Safari-এ সমর্থিত:

সুতরাং, এটি ঠিক শব্দের মতো নয় যে একটি বৃত্তাকার আকৃতি তৈরি করে, তবে আমরা একটি ঘড়ির মুখ তৈরি করতে বৃত্ত বরাবর পাঠ্য অক্ষর স্থাপন করছি। এখানে কিছু মার্কআপ রয়েছে যা আমরা জিনিসগুলি শুরু করতে ব্যবহার করতে পারি:

<div class="clock"> <div class="clock-face"> <time datetime="12:00">12</time> <time datetime="1:00">1</time> <time datetime="2:00">2</time> <time datetime="3:00">3</time> <time datetime="4:00">4</time> <time datetime="5:00">5</time> <time datetime="6:00">6</time> <time datetime="7:00">7</time> <time datetime="8:00">8</time> <time datetime="9:00">9</time> <time datetime="10:00">10</time> <time datetime="11:00">11</time> </div>
</div>

এর পরে, এখানে কিছু সুপার বেসিক শৈলী রয়েছে .clock-face ধারক আমি ব্যবহার করার সিদ্ধান্ত নিয়েছে <time> একটি দিয়ে ট্যাগ করুন datetime বৈশিষ্ট্যাবলী। 

.clock { --_ow: clamp(5rem, 60vw, 40rem); --_w: 88cqi; aspect-ratio: 1; background-color: tomato; border-radius: 50%; container-type: inline; display: grid; height: var(--_ow); place-content: center; position: relative; width var(--_ow);
}

আমি সেখানে জিনিসগুলিকে কিছুটা সজ্জিত করেছি, কিন্তু আমরা কী করছি তা দেখতে সাহায্য করার জন্য শুধুমাত্র মৌলিক আকৃতি এবং পটভূমির রঙ পেতে। আমরা কিভাবে সংরক্ষণ লক্ষ্য করুন width একটি মধ্যে মান CSS ভেরিয়েবল. আমরা যে পরে ব্যবহার করব. এখন পর্যন্ত দেখার মতো বেশি কিছু নেই:

এটা আধুনিক শিল্প পরীক্ষা কিছু সাজানোর মত দেখাচ্ছে, তাই না? চলুন একটি নতুন ভেরিয়েবল প্রবর্তন করা যাক, --_r, চেনাশোনা সংরক্ষণ করতে ব্যাসার্ধ, যা বৃত্তের প্রস্থের অর্ধেক সমান। এইভাবে, যদি প্রস্থ (--_w) পরিবর্তন, ব্যাসার্ধ মান (--_r)ও আপডেট হবে — অন্য CSS গণিত ফাংশনের জন্য ধন্যবাদ, calc():

.clock { --_w: 300px; --_r: calc(var(--_w) / 2); /* rest of styles */
}

এখন, গণিত একটি বিট. একটি বৃত্ত হল 360 ডিগ্রি। আমাদের ঘড়িতে 12টি লেবেল রয়েছে, তাই প্রতি 30 ডিগ্রিতে সংখ্যাগুলি বসাতে চাই (360 / 12) গণিত-ভূমিতে, একটি বৃত্ত শুরু হয় 3 টায়, তাই আসলে দুপুর মাইনাস 90 ডিগ্রি এর থেকে, যা 270 ডিগ্রি (360 - 90).

আরেকটি চলক যোগ করা যাক, --_d, যা আমরা একটি সেট করতে ব্যবহার করতে পারি ডিগ্রী ঘড়ির মুখে প্রতিটি সংখ্যার মান। আমরা আমাদের বৃত্ত সম্পূর্ণ করতে 30 ডিগ্রী দ্বারা মান বৃদ্ধি করতে যাচ্ছি:

.clock time:nth-child(1) { --_d: 270deg; }
.clock time:nth-child(2) { --_d: 300deg; }
.clock time:nth-child(3) { --_d: 330deg; }
.clock time:nth-child(4) { --_d: 0deg; }
.clock time:nth-child(5) { --_d: 30deg; }
.clock time:nth-child(6) { --_d: 60deg; }
.clock time:nth-child(7) { --_d: 90deg; }
.clock time:nth-child(8) { --_d: 120deg; }
.clock time:nth-child(9) { --_d: 150deg; }
.clock time:nth-child(10) { --_d: 180deg; }
.clock time:nth-child(11) { --_d: 210deg; }
.clock time:nth-child(12) { --_d: 240deg; }

ঠিক আছে, এখন আমাদের হাত দিয়ে নোংরা করার সময় sin() এবং cos() ফাংশন! আমরা যা করতে চাই তা হল প্রতিটি সংখ্যার জন্য X এবং Y স্থানাঙ্কগুলি পেতে তাদের ব্যবহার করে যাতে আমরা তাদের ঘড়ির মুখে সঠিকভাবে স্থাপন করতে পারি।

X স্থানাঙ্কের সূত্র হল radius + (radius * cos(degree)). আমাদের নতুন যে প্লাগ করা যাক --_x পরিবর্তনশীল:

--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));

Y স্থানাঙ্কের সূত্র হল radius + (radius * sin(degree)). আমাদের যা গণনা করতে হবে তা রয়েছে:

--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));

সংখ্যাগুলি সেট আপ করার জন্য আমাদের কিছু হাউসকিপিং জিনিসগুলি করতে হবে, তাই আসুন সেগুলিকে আমাদের স্থানাঙ্কের সাথে পুরোপুরি অবস্থান এবং স্থাপন করা হয়েছে তা নিশ্চিত করার জন্য সেগুলির উপর কিছু মৌলিক স্টাইল করা যাক:

.clock-face time { --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d)))); --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d)))); --_sz: 12cqi; display: grid; height: var(--_sz); left: var(--_x); place-content: center; position: absolute; top: var(--_y); width: var(--_sz);
}

বিজ্ঞপ্তি --_sz, যা আমরা এর জন্য ব্যবহার করব width এবং height এক মুহূর্তের সংখ্যা। এখন পর্যন্ত আমরা কি আছে তা দেখা যাক.

এই স্পষ্টভাবে আরো একটি ঘড়ি মত দেখায়! দেখুন কিভাবে প্রতিটি সংখ্যার উপরের বাম কোণটি বৃত্তের চারপাশে সঠিক স্থানে অবস্থিত? প্রতিটি সংখ্যার অবস্থান গণনা করার সময় আমাদের ব্যাসার্ধটিকে "সঙ্কুচিত" করতে হবে। আমরা পারি ছাড় একটি সংখ্যার আকার (--_szবৃত্তের আকার থেকে (--_w), আমরা ব্যাসার্ধ গণনা করার আগে:

--_r: calc((var(--_w) - var(--_sz)) / 2);

অনেক ভাল! আসুন রঙ পরিবর্তন করি, যাতে এটি আরও মার্জিত দেখায়:

আমরা এখানে থামতে পারি! আমরা একটি বৃত্তের চারপাশে পাঠ্য স্থাপনের লক্ষ্য অর্জন করেছি, তাই না? কিন্তু ঘন্টা, মিনিট এবং সেকেন্ড দেখানোর জন্য অস্ত্র ছাড়া একটি ঘড়ি কি?

এর জন্য একটি একক CSS অ্যানিমেশন ব্যবহার করা যাক। প্রথমে আমাদের মার্কআপে আরও তিনটি উপাদান যোগ করা যাক,

<div class="clock"> <!-- after <time>-tags --> <span class="arm seconds"></span> <span class="arm minutes"></span> <span class="arm hours"></span> <span class="arm center"></span>
</div>

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

.arm { background-color: var(--_abg); border-radius: calc(var(--_aw) * 2); display: block; height: var(--_ah); left: calc((var(--_w) - var(--_aw)) / 2); position: absolute; top: calc((var(--_w) / 2) - var(--_ah)); transform: rotate(0deg); transform-origin: bottom; width: var(--_aw);
}

আমরা এটি ব্যবহার করব একই অ্যানিমেশন তিনটি বাহুর জন্য:

@keyframes turn { to { transform: rotate(1turn); }
}

শুধুমাত্র পার্থক্য হল পৃথক অস্ত্র একটি সম্পূর্ণ বাঁক নিতে সময় নেয়। জন্য ঘন্টা বাহু, লাগবে 12 ঘণ্টা একটি সম্পূর্ণ পালা করতে দ্য animation-duration সম্পত্তি শুধুমাত্র মিলিসেকেন্ড এবং সেকেন্ডে মান গ্রহণ করে। আসুন সেকেন্ডের সাথে লেগে থাকি, যা 43,200 সেকেন্ড (60 seconds * 60 minutes * 12 hours).

animation: turn 43200s infinite;

লাগবে 1 ঘন্টা জন্য মিনিট বাহু একটি সম্পূর্ণ পালা করতে কিন্তু আমরা এই একটি হতে চাই বহু-পদক্ষেপ অ্যানিমেশন তাই বাহুগুলির মধ্যে চলাচল রৈখিক না হয়ে স্তব্ধ। আমাদের 60টি ধাপের প্রয়োজন হবে, প্রতি মিনিটের জন্য একটি:

animation: turn 3600s steps(60, end) infinite;

সার্জারির সেকেন্ড বাহু is প্রায় একই মিনিট বাহু হিসাবে, কিন্তু সময়কাল 60 মিনিটের পরিবর্তে 60 সেকেন্ড:

animation: turn 60s steps(60, end) infinite;

আসুন আমরা সাধারণ শৈলীতে তৈরি করা বৈশিষ্ট্যগুলি আপডেট করি:

.seconds { --_abg: hsl(0, 5%, 40%); --_ah: 145px; --_aw: 2px; animation: turn 60s steps(60, end) infinite;
}
.minutes { --_abg: #333; --_ah: 145px; --_aw: 6px; animation: turn 3600s steps(60, end) infinite;
}
.hours { --_abg: #333; --_ah: 110px; --_aw: 6px; animation: turn 43200s linear infinite;
}

আমরা যদি বর্তমান সময়ে শুরু করতে চাই? আমাদের একটু জাভাস্ক্রিপ্ট দরকার:

const time = new Date();
const hour = -3600 * (time.getHours() % 12);
const mins = -60 * time.getMinutes();
app.style.setProperty('--_dm', `${mins}s`);
app.style.setProperty('--_dh', `${(hour+mins)}s`);

আমি যোগ করেছি id="app" ক্লকফেসে এবং দুটি নতুন কাস্টম বৈশিষ্ট্য সেট করুন যা একটি নেতিবাচক সেট করে animation-delay, মেট মার্শালকো যেমন করেছিলেন যখন তিনি একটি CSS-শুধু ঘড়ি শেয়ার করেন. দ্য getHours() JavaScipt এর পদ্ধতি Date অবজেক্টটি 24-ঘন্টার ফর্ম্যাট ব্যবহার করছে, তাই আমরা ব্যবহার করি remainder অপারেটর এটিকে 12-ঘন্টার বিন্যাসে রূপান্তর করতে।

CSS এ, আমাদের যোগ করতে হবে animation-delay যেমন:

.minutes { animation-delay: var(--_dm, 0s); /* other styles */
} .hours { animation-delay: var(--_dh, 0s); /* other styles */
}

শুধু আর একটা জিনিস. CSS ব্যবহার করে @supports এবং আমরা ইতিমধ্যে যে বৈশিষ্ট্যগুলি তৈরি করেছি, আমরা সেই ব্রাউজারগুলিকে একটি ফলব্যাক প্রদান করতে পারি যেগুলি সমর্থন করে না৷ sin() এবং cos(). (ধন্যবাদ, তেমানি আফিফ!):

@supports not (left: calc(1px * cos(45deg))) {
  time {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) rotate(var(--_d)) translate(var(--_r)) rotate(calc(-1*var(--_d)))
  }
}

এবং, ভয়াল! আমাদের ঘড়ি শেষ! এখানে আরও একবার চূড়ান্ত ডেমো আছে। আবার, এই মুহূর্তে এটি শুধুমাত্র Firefox এবং Safari-এ সমর্থিত।

আমরা আর কি করতে পারি?

শুধু এখানে এলোমেলো, কিন্তু আমরা দ্রুত প্রতিস্থাপন করে আমাদের ঘড়িটিকে একটি বৃত্তাকার চিত্র গ্যালারিতে পরিণত করতে পারি <time> সঙ্গে ট্যাগ <img> তারপর প্রস্থ আপডেট করা হচ্ছে (--_w) এবং ব্যাসার্ধ (--_r) মান:

আরো একটি চেষ্টা করা যাক. আমি আগে উল্লেখ করেছি যে ঘড়িটি একটি আধুনিক শিল্প পরীক্ষার মতো দেখতে কেমন ছিল। আমরা এর দিকে ঝুঁকতে পারি এবং অন্য দিন একটি আর্ট গ্যালারিতে একটি পোস্টারে (যেটি আমি দুর্ভাগ্যবশত কিনিনি) দেখেছিলাম এমন একটি প্যাটার্ন পুনরায় তৈরি করতে পারি। যেমনটি আমি মনে করি, এটিকে "চাঁদ" বলা হত এবং এটি একটি বৃত্ত গঠন করে একগুচ্ছ বিন্দু নিয়ে গঠিত।

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

নিয়ন্ত্রণগুলি হল পরিসীমা ইনপুট (<input type="range">) যা আমরা একটি মধ্যে মোড়ানো হবে <form> এবং জন্য শুনুন input ইভেন্ট।

<form id="controls"> <fieldset> <label>Number of rings <input type="range" min="2" max="12" value="10" id="rings" /> </label> <label>Dots per ring <input type="range" min="5" max="12" value="7" id="dots" /> </label> <label>Spread <input type="range" min="10" max="40" value="40" id="spread" /> </label> </fieldset>
</form>

আমরা এই পদ্ধতিটি "ইনপুট" এ চালাব, যা একটি গুচ্ছ তৈরি করবে <li> ডিগ্রী সহ উপাদান (--_d) ভেরিয়েবল আমরা আগে ব্যবহার করেছি প্রতিটিতে প্রয়োগ করেছি। আমরা আমাদের ব্যাসার্ধ পরিবর্তনশীলকে পুনরায় ব্যবহার করতে পারি (--_r)।

আমিও চাই বিন্দুগুলো বিভিন্ন রঙের হোক। সুতরাং, আসুন র্যান্ডমাইজ করি (ভাল, না সম্পূর্ণরূপে র্যান্ডমাইজড) প্রতিটি তালিকা আইটেমের জন্য HSL রঙের মান এবং এটি একটি নতুন CSS ভেরিয়েবল হিসাবে সংরক্ষণ করুন, --_bgc:

const update = () => { let s = ""; for (let i = 1; i <= rings.valueAsNumber; i++) { const r = spread.valueAsNumber * i; const theta = coords(dots.valueAsNumber * i); for (let j = 0; j < theta.length; j++) { s += `<li style="--_d:${theta[j]};--_r:${r}px;--_bgc:hsl(${random( 50, 25 )},${random(90, 50)}%,${random(90, 60)}%)"></li>`; } } app.innerHTML = s;
}

সার্জারির random() পদ্ধতিটি সংখ্যার একটি সংজ্ঞায়িত পরিসরের মধ্যে একটি মান বাছাই করে:

const random = (max, min = 0, f = true) => f ? Math.floor(Math.random() * (max - min) + min) : Math.random() * max;

এবং এটাই. আমরা মার্কআপ রেন্ডার করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করি, কিন্তু যত তাড়াতাড়ি এটি রেন্ডার করা হয়, আমাদের সত্যিই এটির প্রয়োজন নেই। দ্য sin() এবং cos() ফাংশন আমাদের সঠিক জায়গায় সমস্ত বিন্দু স্থাপন করতে সাহায্য করে।

সর্বশেষ ভাবনা

ত্রিকোণমিতি ফাংশনের ক্ষমতা প্রদর্শনের জন্য একটি বৃত্তের চারপাশে জিনিস স্থাপন করা একটি সুন্দর মৌলিক উদাহরণ sin() এবং cos()। কিন্তু এটার সত্যিই ভাল যে আমরা আধুনিক CSS বৈশিষ্ট্যগুলি পাচ্ছি যা পুরানো সমাধানগুলির জন্য নতুন সমাধান প্রদান করে আমি নিশ্চিত যে আমরা আরও আকর্ষণীয়, জটিল এবং সৃজনশীল ব্যবহারের ক্ষেত্রে দেখতে পাব, বিশেষত যখন ব্রাউজার সমর্থন Chrome এবং Edge-এ আসে৷

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• উত্স: https://css-tricks.com/creating-a-clock-with-the-new-css-sin-and-cos-trigonometry-functions/