نئے CSS sin() اور cos() Trigonometry افعال کے ساتھ ایک گھڑی بنانا

CSS مثلثیات کے افعال یہاں ہیں! ٹھیک ہے، وہ ہیں اگر آپ فائر فاکس اور سفاری کے تازہ ترین ورژن استعمال کر رہے ہیں، یعنی۔ CSS میں اس طرح کی ریاضیاتی طاقت کا ہونا بہت سارے امکانات کو کھول دیتا ہے۔ اس ٹیوٹوریل میں، میں نے سوچا کہ ہم اپنی انگلیوں کو پانی میں ڈبو دیں گے تاکہ کچھ نئے فنکشنز کا احساس ہو سکے: sin() اور cos().

پائپ لائن میں مثلثیات کے دیگر فنکشنز ہیں - بشمول tan() - تو کیوں صرف توجہ مرکوز کریں sin() اور cos()? وہ میرے ذہن میں موجود خیال کے لیے بالکل درست ثابت ہوتے ہیں، جو کہ متن کو دائرے کے کنارے پر رکھنا ہے۔ اس کا احاطہ یہاں CSS-Tricks پر کیا گیا ہے جب کرس نے ایک نقطہ نظر کا اشتراک کیا جس میں ساس مکسن کا استعمال ہوتا ہے۔. یہ چھ سال پہلے کی بات ہے، تو آئیے اسے خون بہنے والے کنارے کا علاج دیں۔

میرے ذہن میں یہ ہے۔ ایک بار پھر، اس وقت یہ صرف فائر فاکس اور سفاری میں تعاون یافتہ ہے:

لہذا، یہ بالکل ایسے نہیں ہے جیسے الفاظ ایک گول شکل بناتے ہیں، لیکن ہم متن کے حروف کو دائرے کے ساتھ رکھ کر گھڑی کا چہرہ بنا رہے ہیں۔ یہاں کچھ مارک اپ ہے جو ہم چیزوں کو شروع کرنے کے لیے استعمال کر سکتے ہیں:

<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> a کے ساتھ ٹیگ کریں۔ 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 ایک میں قدر سی ایس ایس متغیر. ہم اسے بعد میں استعمال کریں گے۔ ابھی تک دیکھنے کے لیے زیادہ نہیں:

یہ کسی طرح کے جدید آرٹ کے تجربے کی طرح لگتا ہے، ٹھیک ہے؟ آئیے ایک نیا متغیر متعارف کراتے ہیں، --_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 کوآرڈینیٹ حاصل کرنے کے لیے ان کا استعمال کریں تاکہ ہم انہیں صحیح طریقے سے چوبیس گھنٹے میں رکھ سکیں۔

ایکس کوآرڈینیٹ کا فارمولا ہے۔ 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);

کافی بہتر! آئیے رنگ تبدیل کریں، تو یہ زیادہ خوبصورت نظر آئے:

ہم یہیں رک سکتے ہیں! ہم نے متن کو دائرے کے گرد رکھنے کا مقصد پورا کیا، ٹھیک ہے؟ لیکن گھنٹے، منٹ اور سیکنڈ دکھانے کے لیے بغیر ہتھیاروں کے گھڑی کیا ہے؟

آئیے اس کے لیے ایک سی ایس ایس اینیمیشن استعمال کریں۔ سب سے پہلے، آئیے اپنے مارک اپ میں مزید تین عناصر شامل کریں،

<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 گھنٹے کی شکل میں تبدیل کرنے کے لیے۔

سی ایس ایس میں، ہمیں شامل کرنے کی ضرورت ہے۔ animation-delay اس کے ساتھ ساتھ:

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

بس ایک اور چیز۔ سی ایس ایس کا استعمال @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)))
  }
}

اور، voilà! ہماری گھڑی ہو گئی! یہاں ایک بار اور آخری ڈیمو ہے۔ ایک بار پھر، یہ اس وقت صرف فائر فاکس اور سفاری میں تعاون یافتہ ہے۔

ہم اور کیا کرسکتے ہیں؟

بس ادھر ادھر گڑبڑ کر رہے ہیں، لیکن ہم تیزی سے اپنی گھڑی کو ایک سرکلر امیج گیلری میں تبدیل کر سکتے ہیں۔ <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;

اور یہ بات ہے. ہم مارک اپ کو رینڈر کرنے کے لیے JavaScript کا استعمال کرتے ہیں، لیکن جیسے ہی یہ رینڈر ہوتا ہے، ہمیں واقعی اس کی ضرورت نہیں ہوتی ہے۔ دی sin() اور cos() فنکشنز تمام نقطوں کو صحیح جگہ پر رکھنے میں ہماری مدد کرتے ہیں۔

فائنل خیالات

چیزوں کو دائرے کے گرد رکھنا مثلثیات کے افعال کی طاقتوں کو ظاہر کرنے کے لیے ایک خوبصورت بنیادی مثال ہے جیسے sin() اور cos(). لیکن یہ واقعی اچھی بات ہے کہ ہمیں جدید سی ایس ایس خصوصیات مل رہی ہیں جو پرانے حل کے لیے نئے حل فراہم کرتی ہیں مجھے یقین ہے کہ ہم مزید دلچسپ، پیچیدہ اور تخلیقی استعمال کے معاملات دیکھیں گے، خاص طور پر جب براؤزر سپورٹ کروم اور ایج پر آتا ہے۔

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://css-tricks.com/creating-a-clock-with-the-new-css-sin-and-cos-trigonometry-functions/