ট্যাব কম্পোনেন্ট তৈরি করা

iOS এবং Android অ্যাপে যেমন ট্যাব কম্পোনেন্ট থাকে, ঠিক তেমন ট্যাব কম্পোনেন্ট কীভাবে তৈরি করতে হয় তার একটি প্রাথমিক ওভারভিউ।

Adam Argyle

এই পোস্টে আমি ওয়েবের জন্য একটি ট্যাব কম্পোনেন্ট তৈরি করার বিষয়ে চিন্তাভাবনা শেয়ার করতে চাই যা রেসপন্সিভ, একাধিক ডিভাইস ইনপুট সমর্থন করে এবং ব্রাউজার জুড়ে কাজ করে। ডেমো ব্যবহার করে দেখুন।

ডেমো

আপনি ভিডিও দেখতে চাইলে, এই পোস্টের YouTube ভার্সন এখানে দেওয়া হল:

এক নজরে

ট্যাব হল ডিজাইন সিস্টেমের একটি সাধারণ উপাদান কিন্তু এটি অনেক আকার এবং রূপ নিতে পারে। প্রথমে <frame> এলিমেন্টের উপর ভিত্তি করে ডেস্কটপ ট্যাব তৈরি করা হয়েছিল এবং এখন আমাদের কাছে মোবাইল কম্পোনেন্ট আছে যা ফিজিক্স প্রপার্টির উপর ভিত্তি করে কন্টেন্ট অ্যানিমেট করে। তারা সবাই একই কাজ করার চেষ্টা করছে: জায়গা বাঁচানো।

আজ, ট্যাব ব্যবহারকারীর অভিজ্ঞতার অপরিহার্য অংশ হল একটি বোতাম নেভিগেশন এলাকা যা ডিসপ্লে ফ্রেমে কন্টেন্টের দৃশ্যমানতা টগল করে। অনেকগুলি আলাদা কন্টেন্ট এরিয়া একই স্পেস শেয়ার করে, তবে নেভিগেশনে বেছে নেওয়া বোতামের উপর ভিত্তি করে শর্তসাপেক্ষে উপস্থাপন করা হয়।

গত ১০ বছরের বেশি সময় ধরে ট্যাব কম্পোনেন্ট ওয়েব ডিজাইন স্টাইলের কোলাজ

ওয়েব কৌশল

সব মিলিয়ে, আমি এই কম্পোনেন্টটি তৈরি করা বেশ সহজ বলে মনে করেছি, কিছু গুরুত্বপূর্ণ ওয়েব প্ল্যাটফর্ম ফিচারের জন্য ধন্যবাদ:

• scroll-snap-points-এর জন্য উপযুক্ত স্ক্রল স্টপ পজিশন সহ স্মার্ট সোয়াইপ ও কীবোর্ড ইন্টার‍্যাকশন
• ব্রাউজার দ্বারা ম্যানেজ করা ইন-পেজ স্ক্রল অ্যাঙ্করিং ও শেয়ারিং সংক্রান্ত সহায়তার জন্য URL হ্যাশের মাধ্যমে ডিপ লিঙ্ক
• <a> এবং id="#hash" এলিমেন্ট মার্কআপ সহ স্ক্রিন রিডার সহায়তা
• prefers-reduced-motion ক্রসফেড ট্রানজিশন এবং ইনস্ট্যান্ট ইন-পেজ স্ক্রলিং চালু করার জন্য
• ড্রাফ্টে থাকা @scroll-timeline ওয়েব ফিচার, যা বেছে নেওয়া ট্যাবের নিচে ডাইনামিকভাবে আন্ডারলাইন করে এবং রঙ পরিবর্তন করে

HTML

মূলত, এখানে UX হল: একটি লিঙ্কে ক্লিক করুন, URL-এ নেস্টেড পৃষ্ঠার অবস্থা দেখান এবং তারপরে ব্রাউজারটি ম্যাচিং এলিমেন্টে স্ক্রোল করার সাথে সাথে কন্টেন্ট এরিয়া আপডেট দেখুন।

সেখানে কিছু স্ট্রাকচারাল কন্টেন্ট মেম্বার আছে: লিঙ্ক এবং :target। আমাদের লিঙ্কের একটি তালিকা প্রয়োজন, যার জন্য একটি <nav> দুর্দান্ত, এবং <article> উপাদানগুলির একটি তালিকা, যার জন্য একটি <section> দুর্দান্ত। প্রতিটি লিঙ্ক হ্যাশ একটি বিভাগের সাথে মিলবে, যা ব্রাউজারকে অ্যাঙ্করিংয়ের মাধ্যমে জিনিসগুলি স্ক্রোল করতে দেয়।

লিঙ্ক বোতামে ক্লিক করা হয়েছে, ফোকাস করা কন্টেন্ট স্লাইড করে দেখানো হচ্ছে

যেমন, কোনও লিঙ্কে ক্লিক করলে Chrome 89-এ :target নিবন্ধে অটোমেটিক ফোকাস করে, কোনও JS-এর প্রয়োজন নেই। ব্যবহারকারী তারপরে তার ইনপুট ডিভাইসের মাধ্যমে আগের মতোই নিবন্ধের কন্টেন্ট স্ক্রল করতে পারবেন। এটি প্রশংসামূলক কন্টেন্ট, যেমনটি মার্কআপে উল্লেখ করা হয়েছে।

ট্যাবগুলি সাজাতে আমি নিম্নলিখিত মার্কআপ ব্যবহার করেছি:

<snap-tabs>
  <header>
    <nav>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
    </nav>
  </header>
  <section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</snap-tabs>

আমি <a> এবং <article> এলিমেন্টের মধ্যে href এবং id প্রপার্টির সাথে এইভাবে কানেকশন তৈরি করতে পারি:

<snap-tabs>
  <header>
    <nav>
      <a href="#responsive"></a>
      <a href="#accessible"></a>
      <a href="#overscroll"></a>
      <a href="#more"></a>
    </nav>
  </header>
  <section>
    <article id="responsive"></article>
    <article id="accessible"></article>
    <article id="overscroll"></article>
    <article id="more"></article>
  </section>
</snap-tabs>

আমি এর পরে নিবন্ধগুলি মিশ্র পরিমাণে লোরেম এবং লিঙ্কগুলি একটি দিয়ে পূরণ করেছি মিশ্র দৈর্ঘ্য এবং শিরোনামের ছবি সেট। কন্টেন্ট নিয়ে কাজ করার জন্য, আমরা লেআউট শুরু করতে পারি।

স্ক্রলিং লেআউট

এই কম্পোনেন্টে ৩টি ভিন্ন ধরনের স্ক্রল এরিয়া আছে:

• নেভিগেশন (গোলাপি) অনুভূমিকভাবে স্ক্রল করা যায়
• কন্টেন্ট এরিয়া (নীল) অনুভূমিকভাবে স্ক্রল করা যায়
• প্রতিটি নিবন্ধ আইটেম (সবুজ) উল্লম্বভাবে স্ক্রল করা যায়।

স্ক্রল করার সাথে ২ ধরনের এলিমেন্ট যুক্ত থাকে:

1. একটি উইন্ডো
   নির্দিষ্ট ডাইমেনশন সহ একটি বক্স যাতে overflow প্রপার্টি স্টাইল আছে।
2. অতিরিক্ত বড় সারফেস
   এই লেআউটে, এটি হল তালিকা কন্টেনার: নেভিগেশন লিঙ্ক, বিভাগীয় নিবন্ধ এবং নিবন্ধের কন্টেন্ট।

<snap-tabs> লেআউট

আমি যে টপ লেভেল লেআউট বেছে নিয়েছি সেটি হল ফ্লেক্স (Flexbox)। আমি দিকটি column-এ সেট করেছি, তাই হেডার এবং বিভাগ উল্লম্বভাবে সাজানো হয়েছে। এটি আমাদের প্রথম স্ক্রল উইন্ডো এবং এটি ওভারফ্লো হিডেন সহ সবকিছু লুকায়। শীঘ্রই হেডার এবং বিভাগ পৃথক জোন হিসেবে ওভারস্ক্রল ব্যবহার করবে।

HTML

<snap-tabs>
  <header></header>
  <section></section>
</snap-tabs>

CSS

  snap-tabs {
  display: flex;
  flex-direction: column;

  /* establish primary containing box */
  overflow: hidden;
  position: relative;

  & > section {
    /* be pushy about consuming all space */
    block-size: 100%;
  }

  & > header {
    /* defend against 
 needing 100% */
    flex-shrink: 0;
    /* fixes cross browser quarks */
    min-block-size: fit-content;
  }
}

রঙিন ৩-স্ক্রল ডায়াগ্রামের দিকে আবার ইঙ্গিত করে:

• <header> এখন (গোলাপী) স্ক্রল কন্টেনার হওয়ার জন্য প্রস্তুত।
• <section>-কে (নীল) স্ক্রল কন্টেনার হিসেবে তৈরি করা হয়েছে।

আমি নিচে VisBug দিয়ে যে ফ্রেমগুলি হাইলাইট করেছি, সেগুলি স্ক্রল কন্টেনারের তৈরি করা উইন্ডো দেখতে আমাদের সাহায্য করে।

ট্যাব <header> লেআউট

পরবর্তী লেআউটটি প্রায় একই রকম: আমি ভার্টিক্যাল অর্ডারিং তৈরি করতে ফ্লেক্স ব্যবহার করি।

HTML

<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>

CSS

header {
  display: flex;
  flex-direction: column;
}

.snap-indicator-কে লিঙ্কের গ্রুপের সাথে অনুভূমিকভাবে ট্রাভেল করতে হবে এবং এই হেডার লেআউট সেই স্টেজ সেট করতে সাহায্য করে। এখানে কোনও অ্যাবসোলিউট পজিশনড এলিমেন্ট নেই!

এরপর, স্ক্রল স্টাইল। দেখা যাচ্ছে যে আমরা আমাদের ২টি অনুভূমিক স্ক্রল এরিয়ার (হেডার এবং বিভাগ) মধ্যে স্ক্রল স্টাইল শেয়ার করতে পারি, তাই আমি একটি ইউটিলিটি ক্লাস, .scroll-snap-x তৈরি করেছি।

.scroll-snap-x {
  /* browser decide if x is ok to scroll and show bars on, y hidden */
  overflow: auto hidden;
  /* prevent scroll chaining on x scroll */
  overscroll-behavior-x: contain;
  /* scrolling should snap children on x */
  scroll-snap-type: x mandatory;

  @media (hover: none) {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}

প্রতিটির জন্য x অক্ষে ওভারফ্লো, ওভারস্ক্রল ট্র্যাপ করার জন্য স্ক্রল কন্টেনমেন্ট, টাচ ডিভাইসের জন্য লুকানো স্ক্রলবার এবং সবশেষে কন্টেন্ট প্রেজেন্টেশন এরিয়া লক করার জন্য স্ক্রল-স্ন্যাপ প্রয়োজন। আমাদের কীবোর্ড ট্যাব অর্ডার অ্যাক্সেসযোগ্য এবং যেকোনও ইন্টার‍্যাকশন গাইড স্বাভাবিকভাবে ফোকাস করে। স্ক্রল স্ন্যাপ কন্টেনারও তাদের কীবোর্ড থেকে একটি সুন্দর ক্যারোজেল স্টাইল ইন্টার‍্যাকশন পায়।

ট্যাব হেডার <nav> লেআউট

নেভিগেশন লিঙ্কগুলি একটি লাইনে সাজাতে হবে, কোনও লাইন ব্রেক ছাড়াই, উল্লম্বভাবে সেন্টার করা এবং প্রতিটি লিঙ্ক আইটেম স্ক্রল-স্ন্যাপ কন্টেনারে স্ন্যাপ করা উচিত। ২০২১ CSS-এর জন্য দ্রুত কাজ!

HTML

<nav>
  <a></a>
  <a></a>
  <a></a>
  <a></a>
</nav>

CSS

  nav {
  display: flex;

  & a {
    scroll-snap-align: start;

    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
}

প্রতিটি লিঙ্ক নিজেই স্টাইল ও সাইজ নির্ধারণ করে, তাই নেভিগেশন লেআউটকে শুধু দিক ও ফ্লো নির্দিষ্ট করতে হয়। নেভিগেশন আইটেমের অনন্য প্রস্থ ট্যাবগুলির মধ্যে ট্রানজিশনকে মজাদার করে তোলে কারণ ইন্ডিকেটর নতুন টার্গেটে তার প্রস্থকে অ্যাডজাস্ট করে। এখানে কতগুলি এলিমেন্ট আছে তার উপর নির্ভর করে ব্রাউজার স্ক্রলবার দেখাবে কি দেখাবে না।

ট্যাব <section> লেআউট

এই বিভাগটি একটি ফ্লেক্স আইটেম এবং এটি স্পেসের প্রধান গ্রাহক হতে হবে। এছাড়াও, নিবন্ধগুলি রাখার জন্য কলাম তৈরি করতে হবে। আবারও, CSS 2021-এর জন্য দ্রুত কাজ! block-size: 100% এই এলিমেন্টকে যতটা সম্ভব প্যারেন্টকে পূরণ করার জন্য প্রসারিত করে, তারপর নিজস্ব লেআউটের জন্য, এটি প্যারেন্টের প্রস্থের 100% কলামের একটি সিরিজ তৈরি করে। এখানে শতাংশ খুব ভালো কাজ করে কারণ আমরা পেরেন্টের উপর শক্তিশালী সীমাবদ্ধতা লিখেছি।

HTML

<section>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</section>

CSS

  section {
  block-size: 100%;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

এটি যেন আমরা বলছি "যতটা সম্ভব উল্লম্বভাবে প্রসারিত করুন, একটি পুশি উপায়ে" (মনে রাখবেন আমরা হেডারটি flex-shrink: 0-এ সেট করেছি: এটি এই সম্প্রসারণ পুশের বিরুদ্ধে একটি প্রতিরক্ষা), যা সম্পূর্ণ উচ্চতার কলামের সেটের জন্য সারির উচ্চতা সেট করে। auto-flow স্টাইলটি গ্রিডকে বলে যে চাইল্ড এলিমেন্টগুলিকে সবসময় একটি অনুভূমিক লাইনে সাজাতে হবে, কোনও র‍্যাপিং ছাড়াই, ঠিক যেমনটি আমরা চাই; যাতে সেগুলি পেরেন্ট উইন্ডোর বাইরে চলে যায়।

এগুলি কখনও কখনও আমার পক্ষে বোঝা কঠিন হয়ে যায়! এই বিভাগের এলিমেন্টটি একটি বক্সের মধ্যে ফিট করছে, তবে এটি বক্সের একটি সেটও তৈরি করেছে। আশা করি ভিজ্যুয়াল ও ব্যাখ্যা আপনার কাজে লাগছে।

ট্যাব <article> লেআউট

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

HTML

<article>
  <h2></h2>
  <p></p>
  <p></p>
  <h2></h2>
  <p></p>
  <p></p>
  ...
</article>

CSS

article {
  scroll-snap-align: start;

  overflow-y: auto;
  overscroll-behavior-y: contain;
}

আমি নিবন্ধগুলি তাদের মূল স্ক্রোলারের মধ্যে স্ন্যাপ করার জন্য বেছে নিয়েছি। নেভিগেশন লিঙ্ক আইটেম এবং নিবন্ধের উপাদানগুলি তাদের নিজ নিজ স্ক্রোল কন্টেনারের ইনলাইন-স্টার্টে যেভাবে স্ন্যাপ করে তা আমার খুব ভালো লাগে। এটি দেখতে এবং অনুভব করতে একটি সুরেলা সম্পর্কের মতো।

নিবন্ধটি একটি গ্রিড চাইল্ড এবং এর আকারটি ভিউপোর্ট হিসাবে পূর্বনির্ধারিত। আমরা স্ক্রোল UX প্রদান করতে চাই। এর অর্থ হল, এখানে আমার কোনও উচ্চতা বা প্রস্থের স্টাইল প্রয়োজন নেই, আমাকে শুধু এটি কীভাবে ওভারফ্লো করে তা নির্ধারণ করতে হবে। আমি overflow-y অটোতে সেট করি, এবং তারপরে হ্যান্ডি overscroll-behavior প্রপার্টির সাহায্যে স্ক্রল ইন্টার‍্যাকশনও ট্র্যাপ করি।

৩টি স্ক্রল এরিয়া রিক্যাপ

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

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

DevTools আমাদের এটি ভিজ্যুয়ালাইজ করতে সাহায্য করতে পারে:

Chromium Devtools, যেখানে অ্যাঙ্কর এলিমেন্টে ভর্তি ফ্লেক্সবক্স নেভিগেশন এলিমেন্ট লেআউট, আর্টিকেল এলিমেন্টে ভর্তি গ্রিড বিভাগ লেআউট এবং প্যারাগ্রাফ ও হেডিং এলিমেন্টে ভর্তি আর্টিকেল এলিমেন্ট দেখানো হচ্ছে।

স্ক্রল লেআউট সম্পূর্ণ হয়েছে: স্ন্যাপিং, ডিপ লিঙ্কিং এবং কীবোর্ড অ্যাক্সেসযোগ্য। UX-এর উন্নতি, স্টাইল ও আনন্দের জন্য শক্তিশালী ভিত্তি।

ফিচার হাইলাইট

স্ক্রল স্ন্যাপ করা চিলড্রেন ছোট বড় করার সময় তাদের লক করা পজিশন বজায় রাখে। এর অর্থ হল, ডিভাইস রোটেট বা ব্রাউজার রিসাইজ করার সময় JavaScript-কে কোনও কিছু ভিউতে আনতে হবে না। Chromium DevTools ডিভাইস মোড-এ রেসপন্সিভ ছাড়া অন্য কোনও মোড বেছে নিয়ে এটি ব্যবহার করে দেখুন, তারপর ডিভাইসের ফ্রেম ছোট বড় করুন। লক্ষ্য করুন যে এলিমেন্টটি ভিউতে থাকে এবং এর কন্টেন্টের সাথে লক করা থাকে। স্পেক ম্যাচ করার জন্য Chromium তাদের ইমপ্লিমেন্টেশন আপডেট করার পর থেকে এটি উপলভ্য হয়েছে। এই বিষয়ে একটি ব্লগ পোস্ট এখানে দেওয়া হল।

অ্যানিমেশন

এখানে অ্যানিমেশন কাজের লক্ষ্য হল UI প্রতিক্রিয়ার সাথে ইন্টারঅ্যাকশনগুলিকে স্পষ্টভাবে লিঙ্ক করা। এটি ব্যবহারকারীকে (আশা করি) সমস্ত কন্টেন্ট নির্বিঘ্নে আবিষ্কার করার জন্য গাইড বা সহায়তা করতে সাহায্য করে। আমি উদ্দেশ্য নিয়ে এবং শর্তসাপেক্ষে মোশন যোগ করব। ব্যবহারকারীরা এখন তাদের অপারেটিং সিস্টেমে তাদের মোশন পছন্দ নির্দিষ্ট করতে পারেন, এবং আমি আমার ইন্টারফেসে তাদের পছন্দ অনুযায়ী প্রতিক্রিয়া জানাতে পুঙ্খানুপুঙ্খভাবে উপভোগ করি।

আমি নিবন্ধের স্ক্রল পজিশনের সাথে একটি ট্যাব আন্ডারলাইন লিঙ্ক করব। স্ন্যাপ করা মানে শুধু সুন্দরভাবে সাজানো নয়, এটি অ্যানিমেশনের শুরু ও শেষ অ্যাঙ্কর করে। এটি <nav>-কে কন্টেন্টের সাথে কানেক্ট করে রাখে, যা মিনি-ম্যাপ-এর মতো কাজ করে। আমরা CSS এবং JS, দুটির থেকেই ব্যবহারকারীর মোশন সংক্রান্ত পছন্দ চেক করব। কিছু দারুণ জায়গা আছে যেগুলি বিবেচনা করা যেতে পারে!

স্ক্রল করার আচরণ

:target এবং element.scrollIntoView(), উভয়েরই মোশন বিহেভিয়ার উন্নত করার সুযোগ রয়েছে। ডিফল্ট হিসেবে, এটি ইনস্ট্যান্ট। ব্রাউজার শুধু স্ক্রল পজিশন সেট করে। আচ্ছা, আমরা যদি সেখানে ব্লিঙ্ক করার পরিবর্তে, সেই স্ক্রল পজিশনে ট্রানজিশন করতে চাই?

@media (prefers-reduced-motion: no-preference) {
  .scroll-snap-x {
    scroll-behavior: smooth;
  }
}

Since we're introducing motion here, and motion that the user doesn't control (like scrolling), we only apply this style if the user has no preference in their operating system around reduced motion. এইভাবে, আমরা শুধুমাত্র সেইসব লোকজনের জন্য স্ক্রল মোশন চালু করি যারা এতে স্বাচ্ছন্দ্য বোধ করেন।

ট্যাব ইন্ডিকেটর

এই অ্যানিমেশনের উদ্দেশ্য হল কন্টেন্টের স্ট্যাটাসের সাথে ইন্ডিকেটরকে যুক্ত করতে সাহায্য করা। আমি সিদ্ধান্ত নিয়েছি যে, যেসব ব্যবহারকারী কম মোশন পছন্দ করেন তাদের জন্য border-bottomটি স্টাইল কালার ক্রসফেড করব এবং যেসব ব্যবহারকারী মোশন নিয়ে স্বচ্ছন্দ তাদের জন্য স্ক্রল লিঙ্কড স্লাইডিং + কালার ফেড অ্যানিমেশন করব।

Chromium Devtools-এ, আমি পছন্দ টগল করতে এবং ২টি ভিন্ন ট্রানজিশন স্টাইল দেখাতে পারি। এটি তৈরি করতে আমার খুব মজা লেগেছে।

@media (prefers-reduced-motion: reduce) {
  snap-tabs > header a {
    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
    transition: color .7s ease, border-color .5s ease;

    &:is(:target,:active,[active]) {
      color: var(--text-active-color);
      border-block-end-color: hsl(var(--accent));
    }
  }

  snap-tabs .snap-indicator {
    visibility: hidden;
  }
}

ব্যবহারকারী কম মোশন পছন্দ করলে আমি .snap-indicator লুকিয়ে রাখি কারণ আমার আর এটির প্রয়োজন নেই। তারপর আমি এটি border-block-end স্টাইল এবং একটি transition দিয়ে পরিবর্তন করি। এছাড়াও, ট্যাব ইন্টার‍্যাকশনে লক্ষ্য করুন যে অ্যাক্টিভ নেভিগেশন আইটেমে শুধু ব্র্যান্ড আন্ডারলাইন হাইলাইটই নেই, এর টেক্সটের রঙও গাঢ়। অ্যাক্টিভ এলিমেন্টে টেক্সটের কালার কনট্রাস্ট বেশি এবং উজ্জ্বল আন্ডারলাইট অ্যাকসেন্ট আছে।

CSS-এ মাত্র কয়েকটি অতিরিক্ত লাইন যোগ করলেই কেউ বুঝতে পারবেন যে তার কথা ভাবা হয়েছে (অর্থাৎ, আমরা তার মোশন সংক্রান্ত পছন্দকে গুরুত্ব দিয়েছি)। আমার খুব পছন্দ হয়েছে।

@scroll-timeline

উপরের বিভাগে আমি আপনাকে দেখিয়েছি যে কীভাবে আমি রিডিউসড মোশন ক্রসফেড স্টাইল ম্যানেজ করি এবং এই বিভাগে আমি আপনাকে দেখাব যে কীভাবে আমি ইন্ডিকেটর এবং স্ক্রল এরিয়া একসাথে লিঙ্ক করেছি। এর পরে কিছু মজাদার এক্সপেরিমেন্টাল জিনিস আছে। আশা করি আপনিও আমার মতোই উত্তেজিত।

const { matches:motionOK } = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
);

আমি প্রথমে জাভাস্ক্রিপ্ট থেকে ব্যবহারকারীর মোশন সংক্রান্ত পছন্দ চেক করি। এর ফলাফল false হলে, অর্থাৎ ব্যবহারকারী কম মোশন পছন্দ করলে, আমরা কোনও স্ক্রল লিঙ্কিং মোশন এফেক্ট চালাব না।

if (motionOK) {
  // motion based animation code
}

এটি লেখার সময়, @scroll-timeline-এর জন্য ব্রাউজার সাপোর্টনেই। এটি একটি ড্রাফ্ট স্পেক যাতে শুধুমাত্র পরীক্ষামূলক প্রয়োগ রয়েছে। তবে এতে একটি পলিফিল আছে, যা আমি এই ডেমোতে ব্যবহার করি।

ScrollTimeline

CSS এবং JavaScript, দুটিই স্ক্রল টাইমলাইন তৈরি করতে পারলেও, আমি JavaScript বেছে নিয়েছি যাতে অ্যানিমেশনে লাইভ এলিমেন্ট পরিমাপ ব্যবহার করতে পারি।

const sectionScrollTimeline = new ScrollTimeline({
  scrollSource: tabsection,  // snap-tabs > section
  orientation: 'inline',     // scroll in the direction letters flow
  fill: 'both',              // bi-directional linking
});

আমি চাই যে একটি জিনিস অন্যটির স্ক্রল পজিশন ফলো করুক এবং একটি ScrollTimeline তৈরি করে আমি স্ক্রল লিঙ্কের ড্রাইভার, scrollSource নির্ধারণ করি। সাধারণত, ওয়েবে একটি অ্যানিমেশন গ্লোবাল টাইম ফ্রেম টিকের বিপরীতে চলে, কিন্তু মেমরিতে একটি কাস্টম sectionScrollTimeline দিয়ে, আমি সেগুলি পরিবর্তন করতে পারি।

tabindicator.animate({
    transform: ...,
    width: ...,
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

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

ডায়নামিক কীফ্রেম

@scroll-timeline-এর মাধ্যমে অ্যানিমেট করার জন্য একটি অত্যন্ত শক্তিশালী পিওর ডিক্লারেটিভ CSS পদ্ধতি আছে, কিন্তু আমি যে অ্যানিমেশনটি বেছে নিয়েছিলাম সেটি খুব বেশি ডায়নামিক ছিল। auto প্রস্থের মধ্যে ট্রানজিশন করার কোনও উপায় নেই এবং চিলড্রেন দৈর্ঘ্যের উপর ভিত্তি করে ডায়নামিকভাবে কয়েকটি কীফ্রেম তৈরি করার কোনও উপায় নেই।

তবে, জাভাস্ক্রিপ্ট জানে কীভাবে সেই তথ্য পাওয়া যায়, তাই আমরা নিজেরাই চিলড্রেন এলিমেন্টগুলি পুনরাবৃত্তি করব এবং রানটাইমে গণনা করা মানগুলি সংগ্রহ করব:

tabindicator.animate({
    transform: [...tabnavitems].map(({offsetLeft}) =>
      `translateX(${offsetLeft}px)`),
    width: [...tabnavitems].map(({offsetWidth}) =>
      `${offsetWidth}px`)
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

প্রতিটি tabnavitem-এর জন্য, offsetLeft পজিশন ডিস্ট্রাকচার করুন এবং একটি স্ট্রিং রিটার্ন করুন যা এটিকে translateX ভ্যালু হিসেবে ব্যবহার করে। এটি অ্যানিমেশনের জন্য ৪টি ট্রান্সফর্ম কীফ্রেম তৈরি করে। প্রস্থের ক্ষেত্রেও একই কাজ করা হয়, প্রত্যেককে জিজ্ঞাসা করা হয় যে তার ডায়নামিক প্রস্থ কত এবং তারপর এটি একটি কীফ্রেম ভ্যালু হিসেবে ব্যবহার করা হয়।

আমার ফন্ট ও ব্রাউজার সংক্রান্ত পছন্দের উপর ভিত্তি করে এখানে আউটপুটের উদাহরণ দেওয়া হল:

TranslateX কীফ্রেম:

[...tabnavitems].map(({offsetLeft}) =>
  `translateX(${offsetLeft}px)`)

// results in 4 array items, which represent 4 keyframe states
// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]

প্রস্থ কীফ্রেম:

[...tabnavitems].map(({offsetWidth}) =>
  `${offsetWidth}px`)

// results in 4 array items, which represent 4 keyframe states
// ["121px", "117px", "226px", "67px"]

কৌশলটি সংক্ষেপে বলতে গেলে, ট্যাব ইন্ডিকেটর এখন ৪টি কীফ্রেম জুড়ে অ্যানিমেট করবে সেকশন স্ক্রলারের স্ক্রল স্ন্যাপ পজিশনের উপর নির্ভর করে। স্ন্যাপ পয়েন্টগুলি আমাদের কীফ্রেমগুলির মধ্যে স্পষ্ট সীমানা তৈরি করে এবং অ্যানিমেশনের সিঙ্ক্রোনাইজড অনুভূতিতে সত্যিই যোগ করে।

ব্যবহারকারী ইন্টার‌্যাকশনের মাধ্যমে অ্যানিমেশনটি চালান, এক বিভাগ থেকে অন্য বিভাগে ইন্ডিকেটরের প্রস্থ এবং অবস্থান পরিবর্তন হতে দেখেন, স্ক্রলের সাথে নিখুঁতভাবে ট্র্যাক করেন।

আপনি হয়ত লক্ষ্য করেননি, তবে হাইলাইট করা নেভিগেশন আইটেম বেছে নেওয়ার সময় রঙের যে পরিবর্তন হয়, তা নিয়ে আমি গর্বিত।

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

আমি কীভাবে এটি করেছি তা এখানে দেওয়া হল:

tabnavitems.forEach(navitem => {
  navitem.animate({
      color: [...tabnavitems].map(item =>
        item === navitem
          ? `var(--text-active-color)`
          : `var(--text-color)`)
    }, {
      duration: 1000,
      fill: 'both',
      timeline: sectionScrollTimeline,
    }
  );
});

প্রতিটি ট্যাব নেভিগেশন লিঙ্কে এই নতুন রঙের অ্যানিমেশন প্রয়োজন, যা আন্ডারলাইন ইন্ডিকেটরের মতো একই স্ক্রোল টাইমলাইন ট্র্যাক করে। আমি আগের মতো একই টাইমলাইন ব্যবহার করি: যেহেতু এর ভূমিকা হল স্ক্রল করার সময় টিক নির্গত করা, তাই আমরা যেকোনও ধরনের অ্যানিমেশনে সেই টিক ব্যবহার করতে পারি। আগের মতোই, আমি লুপে ৪টি কীফ্রেম তৈরি করি এবং রঙ ফেরত দিই।

[...tabnavitems].map(item =>
  item === navitem
    ? `var(--text-active-color)`
    : `var(--text-color)`)

// results in 4 array items, which represent 4 keyframe states
// [
  "var(--text-active-color)",
  "var(--text-color)",
  "var(--text-color)",
  "var(--text-color)",
]

var(--text-active-color) রঙের কীফ্রেম লিঙ্কটি হাইলাইট করে এবং অন্যথায় এটি একটি স্ট্যান্ডার্ড টেক্সট রঙ। সেখানে নেস্টেড লুপ এটিকে তুলনামূলকভাবে সহজ করে তোলে, কারণ বাইরের লুপটি প্রতিটি নেভিগেশন আইটেম এবং ভিতরের লুপটি প্রতিটি নেভিগেশন আইটেমের ব্যক্তিগত কীফ্রেম। আমি চেক করি যে বাইরের লুপ এলিমেন্টটি ভিতরের লুপ এলিমেন্টের মতো একই কিনা এবং এটি কখন বেছে নেওয়া হয়েছে তা জানতে এটি ব্যবহার করি।

এটি লিখতে আমার খুব মজা লেগেছে। অনেক বেশি।

জাভাস্ক্রিপ্ট আরও উন্নত করা হয়েছে

আমি এখানে আপনাকে যা দেখাচ্ছি তার মূল অংশ জাভাস্ক্রিপ্ট ছাড়াই কাজ করে, এটি মনে করিয়ে দেওয়া প্রয়োজন। JS উপলভ্য থাকলে, আমরা কীভাবে এটি উন্নত করতে পারি তা দেখা যাক।

ডিপ লিঙ্ক

ডিপ লিঙ্ক হল আরও বেশি মোবাইল টার্ম, তবে আমি মনে করি ডিপ লিঙ্কের উদ্দেশ্য এখানে ট্যাবের মাধ্যমে পূরণ করা হয়েছে যাতে আপনি সরাসরি ট্যাবের কন্টেন্টে একটি URL শেয়ার করতে পারেন। ব্রাউজার ইন-পেজ নেভিগেট করে URL হ্যাশে ম্যাচ করা আইডিতে যাবে। আমি দেখেছি যে এই onload হ্যান্ডলার সব প্ল্যাটফর্ম জুড়ে এফেক্ট তৈরি করেছে।

window.onload = () => {
  if (location.hash) {
    tabsection.scrollLeft = document
      .querySelector(location.hash)
      .offsetLeft;
  }
}

স্ক্রল এন্ড সিঙ্ক্রোনাইজেশন

আমাদের ব্যবহারকারীরা সবসময় ক্লিক করেন না বা কীবোর্ড ব্যবহার করেন না, কখনও কখনও তারা শুধু স্ক্রল করেন, যেমনটি তাদের করা উচিত। বিভাগ স্ক্রলার স্ক্রল করা বন্ধ করলে, যেখানে এটি থামে, সেটি উপরের নেভিগেশন বারের সাথে মিলতে হবে।

স্ক্রল শেষ হওয়ার জন্য আমি কীভাবে অপেক্ষা করি তা এখানে দেওয়া হল: js tabsection.addEventListener('scroll', () => { clearTimeout(tabsection.scrollEndTimer); tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100); });

যখনই বিভাগগুলি স্ক্রোল করা হচ্ছে, সেখানে থাকলে বিভাগের টাইমআউট সাফ করুন, এবং একটি নতুন শুরু করুন। বিভাগ স্ক্রল করা বন্ধ হয়ে গেলে, টাইমআউট মুছে দেবেন না, এবং থামার ১০০ মিলি সেকেন্ড পরে ফায়ার করুন। এটি ফায়ার হলে, এমন ফাংশন কল করুন যা ব্যবহারকারী কোথায় থেমেছেন তা খুঁজে বের করার চেষ্টা করে।

const determineActiveTabSection = () => {
  const i = tabsection.scrollLeft / tabsection.clientWidth;
  const matchingNavItem = tabnavitems[i];

  matchingNavItem && setActiveTab(matchingNavItem);
};

স্ক্রল স্ন্যাপ করা হয়েছে ধরে নিয়ে, স্ক্রল এরিয়ার প্রস্থ থেকে বর্তমান স্ক্রল পজিশন ভাগ করলে একটি পূর্ণসংখ্যা পাওয়া উচিত, দশমিক নয়। তারপর আমি এই গণনা করা ইন্ডেক্সের মাধ্যমে আমাদের ক্যাশে থেকে একটি navitem নেওয়ার চেষ্টা করি এবং এটি কিছু খুঁজে পেলে, আমি ম্যাচটি সেট অ্যাক্টিভ করার জন্য পাঠাই।

const setActiveTab = tabbtn => {
  tabnav
    .querySelector(':scope a[active]')
    .removeAttribute('active');

  tabbtn.setAttribute('active', '');
  tabbtn.scrollIntoView();
};

অ্যাক্টিভ ট্যাব সেট করার প্রক্রিয়া শুরু হয় বর্তমানে অ্যাক্টিভ ট্যাব মুছে দেওয়ার মাধ্যমে, তারপর ইনকামিং নেভিগেশন আইটেমকে অ্যাক্টিভ স্টেট অ্যাট্রিবিউট দেওয়া হয়। scrollIntoView()-এ কল করার সময় CSS-এর সাথে একটি মজার ইন্টার‍্যাকশন হয় যা লক্ষ্য করার মতো।

.scroll-snap-x {
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

হরাইজন্টাল স্ক্রল স্ন্যাপ ইউটিলিটি CSS-এ, আমরা একটি মিডিয়া কোয়েরি নেস্ট করেছি যা smooth স্ক্রলিং প্রয়োগ করে যদি ব্যবহারকারী মোশন টলারেন্ট হন। জাভাস্ক্রিপ্ট অবাধে ভিউতে এলিমেন্ট স্ক্রল করার জন্য কল করতে পারে এবং CSS ডিক্লেরেটিভভাবে UX ম্যানেজ করতে পারে। কখনও কখনও তারা বেশ আনন্দদায়ক ছোট ম্যাচ তৈরি করে।

উপসংহার

আমি কীভাবে করেছি তা তো জানলে, তুমি কীভাবে করবে?! এটি কিছু মজার কম্পোনেন্ট আর্কিটেকচার তৈরি করে! কে তার পছন্দের ফ্রেমওয়ার্কে স্লট সহ প্রথম ভার্সন তৈরি করতে চলেছেন? 🙂

আসুন, আমাদের দৃষ্টিভঙ্গিকে বৈচিত্র্যময় করে তুলি এবং ওয়েবে তৈরি করার সব উপায় সম্পর্কে জানি। একটি Glitch তৈরি করুন, আপনার ভার্সনটি আমাকে টুইট করুন এবং আমি এটি নিচের কমিউনিটি রিমিক্স বিভাগে যোগ করব।

কমিউনিটি রিমিক্স

• @devnook, @rob_dodson এবং @DasSurma-এর সাথে ওয়েব কম্পোনেন্ট: নিবন্ধ।
• @jhvanderschee, বোতাম সহ: Codepen.