একক পৃষ্ঠা অ্যাপ্লিকেশনের জন্য রূপান্তর দেখুন

ওয়েব পৃষ্ঠাগুলির জন্য একটি সাধারণ প্যাটার্ন হল একটি নতুন, সম্পূর্ণ HTML নথি লোড না করে একটি পৃষ্ঠার বিষয়বস্তুকে গতিশীলভাবে প্রতিস্থাপন করতে JavaScript ব্যবহার করা। একে বলা হয় একক পৃষ্ঠা অ্যাপ্লিকেশন, বা SPA। ভিউ ট্রানজিশন আপনাকে আপনার SPA-এর পৃষ্ঠাগুলির মধ্যে ধারাবাহিকতা বা প্রসঙ্গ দেখানোর একটি উপায় দেয়৷

সম্পূর্ণ পৃষ্ঠা রূপান্তর

যখন আপনার ব্যবহারকারী আপনার SPA-তে একটি নতুন ভিউতে নেভিগেট করেন, তখন আপনার ফ্রেমওয়ার্ক DOM-কে নতুন সামগ্রী দিয়ে প্রতিস্থাপন করে। এটি বিষয়বস্তুটিকে কেবল প্রদর্শিত করে তোলে, কিন্তু আপনি যদি বর্তমান সামগ্রী এবং নতুন সামগ্রীর মধ্যে একটি রূপান্তর প্রদান করতে চান তবে কী করবেন?

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

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

document.startViewTransition(() => updateTheDOMSomehow());

এটি ডিফল্ট ট্রানজিশন সক্ষম করে, যা নতুন ভিউতে বিবর্ণ হওয়ার সময় পুরানো ভিউকে বিবর্ণ করে দেয়।

এখানে কি হচ্ছে? আপনি যখন document.startViewTransition() কল করেন, ব্রাউজারটি পুরানো ভিউয়ের একটি স্ন্যাপশট নেয়। এটি তারপরে আপনার পাস করা কলব্যাক ফাংশনটিকে কল করে, যা নতুন ভিউতে DOM আপডেট করে (কিন্তু এখনও এটি দেখায় না)। কলব্যাক ফাংশন সম্পূর্ণ হলে, ব্রাউজারটি নতুন সামগ্রীতে রূপান্তর শুরু করে।

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

রূপান্তর কাস্টমাইজ করা

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

আপনি ::view-transition-old() দিয়ে ছেড়ে যাওয়া ট্রানজিশন এবং ::view-transition-new() দিয়ে প্রবেশ ট্রানজিশন নির্দিষ্ট করতে পারেন। আপনি ::view-transition-group() দিয়ে উভয়ের জন্য মান নির্দিষ্ট করতে পারেন।

এই উদাহরণে, পুরানো ভিউ slide-out-to-left স্থানান্তর ব্যবহার করে স্থানান্তরিত হবে এবং নতুন ভিউ slide-in-from-right স্থানান্তর ব্যবহার করে স্থানান্তরিত হবে। তাদের উভয়েরই 200 মিলিসেকেন্ড সময়কাল থাকবে।

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

প্রেক্ষাপটের উপর ভিত্তি করে বিভিন্ন রূপান্তর

ব্যবহারকারী যা করছে তার উপর ভিত্তি করে আপনি বিভিন্ন রূপান্তর করতে চাইতে পারেন। উদাহরণস্বরূপ, যদি আপনার হোম পৃষ্ঠা থেকে একটি লিঙ্কে ক্লিক করা নতুন ভিউটি ডান দিক থেকে স্লাইড করে, আপনি আশা করবেন আপনার হোম পেজে ফিরে যাওয়ার জন্য একটি লিঙ্কে ক্লিক করলে হোম ভিউটি বাম থেকে স্লাইড হবে৷

আপনি :active-view-transition-type() pseudo class ব্যবহার করে বিভিন্ন অ্যানিমেশন নির্দিষ্ট করতে পারেন।

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

তারপর আপনি document.startViewTransition() কল করার সময় কোন ভিউ ট্রানজিশন টাইপ ব্যবহার করবেন তা বেছে নিতে পারেন।

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

নির্দিষ্ট উপাদান স্থানান্তর

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

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

প্রথমে, view-transition-name প্রপার্টি ব্যবহার করে কোন উপাদানগুলিকে স্থানান্তর করতে হবে তা আপনাকে নির্দিষ্ট করতে হবে। ভিউ ট্রানজিশন কাজ করার জন্য, প্রতিটি view-transition-name জন্য, আপনি document.startViewTransition() কল করার আগে ঠিক একটি উপাদান থাকতে হবে এবং document.startViewTransition() এ কলব্যাক সম্পূর্ণ হওয়ার পরে ঠিক একটি উপাদান থাকতে হবে।

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

পূর্ববর্তী উদাহরণে, পুরানো এবং নতুন ভিউতে প্রতিটি রূপান্তরিত উপাদানগুলির মধ্যে একটি ঠিক আছে এবং তারা একই নির্বাচককে ভাগ করে। রূপান্তরিত উপাদানগুলি তাদের আকার এবং অবস্থানের মধ্যে স্থানান্তরিত হতে দেখা যায়। দৃশ্যের অ-পরিবর্তিত অংশগুলি ভিতরে এবং বাইরে বিবর্ণ হয়।

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

শিরোনামের জন্য এটি করতে, আপনার শিরোনাম উপাদানটিতে একটি view-transition-name থাকতে হবে যা পুরানো ভিউতে অনন্য, নতুন ভিউতে শিরোনাম উপাদানটির সাথে শেয়ার করা হয়েছে এবং নতুন ভিউতে অনন্য। এটি একটি চ্যালেঞ্জ, কারণ হোম পেজে একাধিক শিরোনাম এবং ছবি রয়েছে এবং ব্যবহারকারী কোনটিতে ক্লিক করবেন তা আপনি জানেন না।

কিভাবে এটি সমাধান করতে আপনার কাছে দুটি বিকল্প আছে। আপনি হোম পেজে প্রতিটি পোস্টের জন্য একটি অনন্য view-transition-name যোগ করতে বেছে নিতে পারেন এবং তারপর প্রতিটি পূর্ণ পৃষ্ঠার পোস্টে সেই নামটি মেলে৷ আপনি পোস্টের আইডি ব্যবহার করে এইগুলি তৈরি করতে পারেন। আপনার অন্য বিকল্পটি হল একটি জেনেরিক view-transition-name ব্যবহার করা, কিন্তু শুধুমাত্র ব্যবহারকারী একটি পোস্টে ক্লিক করার পরে, কিন্তু document.startViewTransition() কল করার আগে এটি প্রয়োগ করুন।

রূপান্তর ডিজাইনিং

ভিউ ট্রানজিশন হল টুলের একটি সেট যা আপনি আপনার ব্যবহারকারীদের গাইড করতে এবং অতিরিক্ত ব্র্যান্ড বা প্রসঙ্গ ইঙ্গিত দিতে ব্যবহার করতে পারেন। আপনার সাইটের জন্য কাজ করে এমন রূপান্তরগুলি খুঁজে পেতে আপনি সম্ভবত একাধিক কৌশল ব্যবহার করবেন।

আপনি যে প্রভাবটি খুঁজছেন তার উপর নির্ভর করে, আপনাকে উপাদান বা অ্যানিমেশনগুলিও টুইক করতে হতে পারে। আগের উদাহরণে, মসৃণ রূপান্তর পেতে বেশ কয়েকটি শৈলী সামঞ্জস্য করা হয়েছিল।

শিরোনামের নিয়ম width: fit-content , যা একটি দরকারী শৈলী যখন আপনি পাঠ্য পরিবর্তন করেন যা মোড়ানো হয় না (বা পুরানো এবং নতুন উভয় দৃশ্যে একই মোড়ক থাকে। অন্যথায়, রূপান্তরটি বিভিন্ন প্রস্থের উপাদানগুলির মধ্যে হতে পারে, যা স্থানান্তরটিকে কম মসৃণ করে তুলবে৷

পুরানো ভিউ এবং নতুন ভিউতে ইমেজটি একটি ভিন্ন আকৃতির অনুপাত। উদাহরণটি অ্যানিমেশন এবং object-fit বৈশিষ্ট্যকে পরিবর্তন করে যাতে রূপান্তরটি মসৃণ হয়।

সম্মান prefers-reduced-motion

ব্যবহারকারীদের গতি কমানোর অনুরোধ করার একটি সাধারণ কারণ হল ফুল-স্ক্রিন অ্যানিমেশন, যেমন ভিউ ট্রানজিশনের মাধ্যমে অর্জন করা যায়, ভেস্টিবুলার মোশন ডিজঅর্ডারে আক্রান্ত ব্যক্তিদের জন্য অস্বস্তি সৃষ্টি করতে পারে। আপনি prefers-reduced-motion মিডিয়া ক্যোয়ারী ব্যবহার করে অ্যানিমেশন অক্ষম করতে পারেন। আপনি বিকল্প অ্যানিমেশনগুলি প্রদান করতেও বেছে নিতে পারেন যা আরও সূক্ষ্ম, তবুও কীভাবে উপাদানগুলি সংযুক্ত রয়েছে তা বোঝায়।

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

আপনার উপলব্ধি পরীক্ষা করুন