ট্রানজিশনের ব্যবহারকারীদের জন্য অনেক সুবিধা রয়েছে, যার মধ্যে তাদের প্রেক্ষাপটে রাখতে সাহায্য করা এবং বিলম্বের উপলব্ধি হ্রাস করা। বিকাশকারীরা তাদের সাইটের সাথে ব্যবহারকারীর ব্যস্ততা বাড়াতে সাহায্য করে পৃষ্ঠাগুলির মধ্যে বিরামহীন রূপান্তর তৈরি করার ক্ষমতা চায়৷
যাইহোক, রাষ্ট্রীয় রূপান্তর সক্ষম করা সত্যিই কঠিন ছিল কারণ এর জন্য ডেভেলপারদের দুটি ভিন্ন উপাদানের রাজ্য পরিচালনা করতে হবে। এমনকি একটি সাধারণ ক্রস-ফেডের মতো কিছুতে উভয় রাজ্য একই সময়ে উপস্থিত থাকা জড়িত। এটি ব্যবহারযোগ্যতার চ্যালেঞ্জগুলি উপস্থাপন করে, যেমন বহির্গামী উপাদানে অতিরিক্ত মিথস্ক্রিয়া পরিচালনা করা। সহায়ক ডিভাইসের ব্যবহারকারীদের জন্য, এমন একটি সময়কাল রয়েছে যেখানে একই সময়ে আগের এবং পরে উভয় অবস্থাই DOM-এ থাকে। এছাড়াও, জিনিসগুলি গাছের চারপাশে এমনভাবে ঘোরাফেরা করতে পারে যা দৃশ্যত ভাল, তবে সহজেই পড়ার অবস্থান এবং ফোকাস হারিয়ে যেতে পারে।
Chrome 111 এ লঞ্চ করা হয়েছে, ভিউ ট্রানজিশন এপিআই পৃষ্ঠাগুলির মধ্যে মসৃণ এবং সহজ রূপান্তর তৈরি করতে সক্ষম করে৷ এটি আপনাকে রাজ্যগুলির মধ্যে কোনও ওভারল্যাপ ছাড়াই আপনার DOM পরিবর্তন করতে এবং স্ন্যাপশট করা ভিউ ব্যবহার করে রাজ্যগুলির মধ্যে একটি রূপান্তর অ্যানিমেশন করার অনুমতি দেয়৷
আপনি ভাবতে পারেন, এটি বাস্তবায়ন করা কতটা সহজ? ব্যবহার ক্ষেত্রে কি ধরনের আছে? অন্যান্য বিকাশকারীরা কীভাবে ভিউ ট্রানজিশন ব্যবহার করছে?
এই নিবন্ধটি আপনাকে 4টি ভিন্ন ওয়েবসাইটে ভিউ ট্রানজিশন বাস্তবায়নের মাধ্যমে নিয়ে যায়: RedBus (ভ্রমণ), সাইবারএজেন্ট (সংবাদ/ব্লগ প্রকাশক), Nykaa (ইকমার্স), এবং পলিসিবাজার (বীমা) এবং কীভাবে তাদের ওয়েবসাইটগুলি ভিউ ব্যবহার করে বিভিন্ন উপায়ে উপকৃত হয়েছিল ট্রানজিশন API।
লাল বাস
redBus, MakeMyTrip গ্রুপের অংশ, হল একটি বাস বুকিং এবং টিকিটিং ওয়েবসাইট যার সদর দপ্তর বেঙ্গালুরু, ভারতে রয়েছে এবং বিশ্বব্যাপী বিভিন্ন ভৌগলিক অঞ্চল জুড়ে রয়েছে। ভিউ ট্রানজিশন এপিআই ব্যবহার করে অভিজ্ঞতা বাস্তবায়নের জন্য এটি প্রথম ওয়েবসাইটগুলির মধ্যে একটি।
কেন রেডবাস ভিউ ট্রানজিশন বাস্তবায়ন করেছে?
redBus-এর দলটি একটি একীভূত, অ্যাপের মতো ওয়েব অভিজ্ঞতা প্রদানে দৃঢ় বিশ্বাসী, যা তাদের নেটিভ অ্যাপের যতটা সম্ভব কাছাকাছি। প্রকৃতপক্ষে, তারা কয়েক বছর ধরে একাধিক কাস্টমাইজড সমাধান প্রয়োগ করেছে। উদাহরণস্বরূপ, ভিউ ট্রানজিশন এপিআই ডেভেলপ করার আগেও তারা পেজ ট্রানজিশনের জন্য কাস্টমাইজড জাভাস্ক্রিপ্ট এবং সিএসএস ভিত্তিক অ্যানিমেশন তৈরি করেছে। যাইহোক, এর অর্থ হল তাদের নেটওয়ার্ক এবং ডিভাইসের নিম্ন অংশে কর্মক্ষমতা পরিচালনার সাথে মোকাবিলা করতে হয়েছিল, মাঝে মাঝে একটি অভিযোজিত লোডিং কৌশলের সাথে ডিফারেনশিয়াল অভিজ্ঞতার দিকে পরিচালিত করে।
redBus একাধিক ব্যবহারকারীর যাত্রার জন্য ভিউ ট্রানজিশন ব্যবহার করেছে। উদাহরণস্বরূপ, তাদের মোবাইল অ্যাপের মধ্যে তাদের স্ব-সহায়তা বিভাগে যা কাস্টম ক্রোম ট্যাবে ওয়েব পৃষ্ঠাগুলি খুলেছে এবং তাদের বাস টিকিট বুকিং ফানেলে যেখানে ব্যবহারকারীরা ইনভেন্টরি তালিকা পৃষ্ঠা থেকে অর্থপ্রদানের পৃষ্ঠায় যান৷ পরবর্তী ক্ষেত্রে, পৃষ্ঠা থেকে পৃষ্ঠার নেভিগেশনকে মসৃণ করে ট্রানজিশন দেখুন এবং এর ফলে তাদের রূপান্তর হার বেড়েছে। এটি একটি ভাল ব্যবহারকারীর অভিজ্ঞতা এবং আরও ভাল অনুভূত কর্মক্ষমতার ফলাফল ছিল যখন ভারী ক্রিয়াকলাপগুলি - যেমন সবচেয়ে আপডেট করা উপলব্ধ ইনভেন্টরি আনা - কার্যকর করা হয়েছিল৷
বাস্তবায়নের প্রযুক্তিগত বিবরণ
redBus বিভিন্ন যাত্রায় SPA এবং MPA-এর সংমিশ্রণ সহ তাদের ফ্রন্টএন্ড টেক স্ট্যাক হিসাবে প্রতিক্রিয়া এবং EJS ব্যবহার করে। নিম্নলিখিত কোড উদ্ধৃতি দেখায় কিভাবে ভিউ ট্রানজিশন ব্যবহার করা হয়:
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
নিম্নলিখিত CSS-এ, slide-to-right , slide-to-left , slide-from-right , এবং slide-from-left হল CSS অ্যানিমেশন কীফ্রেম।
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
ব্যবসা প্রভাব
redBus তাদের সাইট জুড়ে INP উন্নতির প্রচেষ্টার সাথে ভিউ ট্রানজিশন বাস্তবায়ন করতে বেছে নিয়েছে, যার ফলে 7% বেশি বিক্রি হয়েছে । redBus-এর সিনিয়র ইঞ্জিনিয়ারিং ম্যানেজার অমিত কুমার বলেছেন যে ভিউ ট্রানজিশন সত্যিই অসাধারণ তাদের জন্য যারা সত্যিকার অর্থে আরও ভাল ব্যবহারকারীর অভিজ্ঞতা চান এবং কম রক্ষণাবেক্ষণ ওভারহেড চান।
আমরা ব্যবহারকারীদের বিভিন্ন গোষ্ঠীর মূল্যবান অন্তর্দৃষ্টিকে অন্তর্ভুক্ত করে ব্যাপক ব্যবহারকারীর প্রতিক্রিয়া সেশন পরিচালনা করেছি। আমাদের ব্যবহারকারী বেস (বাস এবং রেল) এবং তাদের প্রয়োজনীয়তা সম্পর্কে আমাদের গভীর উপলব্ধি, আমাদের দক্ষতার সাথে মিলিত, আমাদের বিশ্বাস করতে পরিচালিত করেছে যে এই বৈশিষ্ট্যটি A/B পরীক্ষার প্রয়োজন ছাড়াই শুরু থেকেই উল্লেখযোগ্য মূল্য প্রদান করবে। একটি মসৃণ নেভিগেশন অভিজ্ঞতার সাথে অ্যাপ এবং ওয়েবের মধ্যে ব্যবধান পূরণের দিকে একটি ধাপ হল ভিউ ট্রানজিশন।
অনুপ মেনন, সিটিও রেডবাস
সাইবার এজেন্ট
CyberAgent হল একটি জাপান-ভিত্তিক আইটি কোম্পানি যেটি ব্লগ এবং সংবাদ প্রকাশ সহ অনেক অনলাইন পরিষেবা প্রদান করে।
সাইবার এজেন্ট কেন ভিউ ট্রানজিশন বাস্তবায়ন করেছে?
সাইবার এজেন্ট অতীতে ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য অ্যানিমেটেড ট্রানজিশন বাস্তবায়নের জন্য CSS অ্যানিমেশন ব্যবহার বা একটি কাঠামো ব্যবহার করার কথা বিবেচনা করেছিল, কিন্তু তারা DOM এবং কোড রক্ষণাবেক্ষণের ক্ষেত্রে দুর্বল কর্মক্ষমতা নিয়ে উদ্বিগ্ন ছিল। যখন Chrome ভিউ ট্রানজিশন API-এর জন্য সমর্থন যোগ করে, তখন তারা এই চ্যালেঞ্জগুলি অতিক্রম করে এমন আকর্ষক পৃষ্ঠার রূপান্তর তৈরি করতে এটি ব্যবহার করতে উত্তেজিত হয়েছিল।
সাইবার এজেন্ট ব্লগ তালিকা এবং ব্লগ পৃষ্ঠার মধ্যে ভিউ ট্রানজিশন বাস্তবায়ন করেছে। এখানে, লক্ষ্য করুন কিভাবে তারা নায়ক ইমেজে উপাদান পরিবর্তন যোগ করেছে। আপনি তাদের সাইট পরিদর্শন এবং এটি আজ লাইভ অভিজ্ঞতা করতে পারেন.
তারা বিভিন্ন ডিভাইসের জন্য বিভিন্ন অ্যানিমেশন অভিজ্ঞতা ডিজাইন করতে মিডিয়া প্রশ্নগুলিও ব্যবহার করেছিল। মোবাইল পৃষ্ঠাগুলির জন্য তারা উপাদান স্থানান্তর অন্তর্ভুক্ত করে, কিন্তু এই প্রভাব ডেস্কটপের জন্য খুব বেশি গতিশীল ছিল।
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
বাস্তবায়নের প্রযুক্তিগত বিবরণ
CyberAgent তাদের SPA তৈরি করতে Next.js ব্যবহার করে। নিম্নলিখিত কোড উদাহরণ প্রদর্শন করে কিভাবে তারা ভিউ ট্রানজিশন API ব্যবহার করে।
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
আরও কিছু নমুনা Next.js কোড দেখুন।
প্রি-রেন্ডারিং প্রযুক্তি সহ MPA-এর জন্য ট্রানজিশন দেখুন
সাইবার এজেন্ট আমেবা নিউজ নামক একটি পরিষেবাতে একাধিক পৃষ্ঠা অ্যাপস (এমপিএ) (বর্তমানে ফ্ল্যাগ chrome://flags/#view-transition-on-navigation ) এর জন্য আমাদের নতুন ভিউ ট্রানজিশন API-এর চেষ্টা করেছে, যা একটি নিউজ পোর্টাল সাইট৷
ভিউ ট্রানজিশন দুটি জায়গায় ব্যবহার করা হয়েছে: প্রথমটি হল খবরের বিভাগ পরিবর্তন করার সময়, নিম্নলিখিত ভিডিওতে দেখানো হয়েছে।
দ্বিতীয়টি হল নিউজ হাইলাইট পৃষ্ঠার মধ্যে, যেখানে বিষয়বস্তুর একটি অংশ দেখানো হয় এবং ব্যবহারকারী যখন আরও বিশদ বিবরণ দেখতে ক্লিক করেন, তখন বাকি নিবন্ধটি বিবর্ণ হয়ে যায়।
মজার বিষয় হল যে তারা শুধুমাত্র সেই অংশে অ্যানিমেশন যোগ করেছে যা বোতামটি ক্লিক করার পরে পরিবর্তিত হবে। অ্যানিমেশন ডিজাইনের এই সামান্য পরিবর্তনটি MPA পৃষ্ঠাটিকে ব্যবহারকারীর দৃষ্টিকোণ থেকে আরও একটি SPA-এর মতো দেখায়, শুধুমাত্র নতুন বিষয়বস্তু অ্যানিমেট করে:
তারা কীভাবে এটি করেছে তা এখানে: তারা পৃষ্ঠার বিভিন্ন অংশে একটি ভিন্ন view-transition-name বরাদ্দ করেছে। উদাহরণস্বরূপ, তারা নিবন্ধের উপরের অংশে একটি view-transition-name বরাদ্দ করেছে, নীচের অংশের জন্য আরেকটি, এবং উপরের অংশে কোনো অ্যানিমেশন যোগ করেনি।
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
সাইবার এজেন্টের ভিউ ট্রানজিশন এপিআই ব্যবহার সম্পর্কে আরেকটি মজার বিষয় হল যে তারা বিস্তারিত পৃষ্ঠায় প্রি-রেন্ডারিং নিয়মগুলি সহজে বাস্তবায়ন করতে কুইকলিংক ব্যবহার করেছে। এখানে তাদের নমুনা কোড:
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
আপনি এই নিবন্ধ থেকে তাদের দ্রুত লিঙ্ক বাস্তবায়ন সম্পর্কে আরও পড়তে পারেন।
প্রশংসাপত্র
সাইবার এজেন্টের আমেবা পরিষেবার টেক লিড কাজুনারি হারা বলেছেন যে ভিউ ট্রানজিশন দুটি কারণে ব্যবসায় উল্লেখযোগ্য প্রভাব ফেলতে পারে।
প্রথমত, তারা পৃষ্ঠায় ব্যবহারকারীদের গাইড করে। ভিউ ট্রানজিশনগুলি ব্যবহারকারীদের সবচেয়ে গুরুত্বপূর্ণ বার্তায় দৃশ্যত ফোকাস করা সম্ভব করে এবং তাদের ওয়েব পৃষ্ঠা থেকে সর্বাধিক সুবিধা পেতে সহায়তা করে৷ এছাড়াও, তারা অ্যানিমেশনের সাথে ব্র্যান্ডকে বাড়িয়ে তোলে এবং জোর দেয়। CyberAgent তাদের ব্র্যান্ডের সাথে যোগাযোগ করার জন্য একটি মনোনীত অ্যানিমেশন ডিজাইন আছে। ভিউ ট্রানজিশনের মাধ্যমে তারা বাহ্যিক লাইব্রেরি রক্ষণাবেক্ষণের খরচ যোগ না করে এই ব্র্যান্ডেড অভিজ্ঞতা বাস্তবায়ন করতে সক্ষম।
ভিউ ট্রানজিশন আমার প্রিয় এপিআইগুলির মধ্যে একটি। একটি স্ট্যান্ডার্ড ব্রাউজার বৈশিষ্ট্য হিসাবে অ্যানিমেশন যুক্ত করার ক্ষমতা লাইব্রেরির উপর নির্ভরশীল অন্যান্য সমাধানগুলির তুলনায় ভিউ ট্রানজিশন বাস্তবায়ন এবং বজায় রাখা সহজ করে তোলে। আমরা আমাদের ব্র্যান্ডের সাথে যোগাযোগ করতে আরও পরিষেবাতে ভিউ ট্রানজিশন বাস্তবায়নের জন্য উন্মুখ।
কাজুনারি হারা, আমেবার সিটিও
নাইকা
Nykaa হল ভারতের বৃহত্তম ফ্যাশন এবং সৌন্দর্য ইকমার্স প্ল্যাটফর্ম। তারা তাদের মোবাইল ওয়েব অভিজ্ঞতাকে যতটা সম্ভব তাদের নেটিভ অ্যাপ অভিজ্ঞতার কাছাকাছি করে তোলার লক্ষ্য রাখে। পূর্বে যখন ট্রানজিশন অ্যানিমেশন প্রয়োগ করার চেষ্টা করা হয়েছিল, তখন তারা জটিল কাস্টম জাভাস্ক্রিপ্ট লেখার সাথে লড়াই করেছিল। এটি তাদের ওয়েবসাইটের পারফরম্যান্সে সামান্য প্রভাব ফেলেছে।
কেন Nykaa ভিউ ট্রানজিশন বাস্তবায়ন করেছে?
ভিউ ট্রানজিশনের আগমনের সাথে, Nykaa-এর দল একটি সুযোগ দেখেছিল যেখানে এই ট্রানজিশনগুলি স্থানীয়ভাবে উপলব্ধ হওয়ার অর্থ হল পৃষ্ঠা পরিবর্তনের UX কার্যক্ষমতার জন্য কোন খরচ ছাড়াই উল্লেখযোগ্যভাবে উন্নত করা যেতে পারে। Nykaa পণ্যের বিস্তারিত পৃষ্ঠা থেকে পণ্য তালিকার পৃষ্ঠায় রূপান্তর করতে ভিউ ট্রানজিশন ব্যবহার করছে।
বাস্তবায়নের প্রযুক্তিগত বিবরণ
Nykaa তাদের SPA তৈরি করতে প্রতিক্রিয়া এবং আবেগ ব্যবহার করেছে। প্রতিক্রিয়া সহ ভিউ ট্রানজিশন কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও নমুনা কোড এখানে পাওয়া যাবে।
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
সাইড ড্রয়ার অ্যানিমেশনের জন্য CSS:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
প্রশংসাপত্র
Nykaa-এর অ্যাপসের প্রধান সুনীতি জিন্দাল বলেছেন যে ভিউ ট্রানজিশনের সবচেয়ে বড় সুবিধা হল "গতির উপলব্ধি"। Nykaa ব্যাকএন্ড থেকে বিষয়বস্তু লোড হওয়ার জন্য অপেক্ষা করার জন্য শিমার ইফেক্ট ব্যবহার করে, কিন্তু দেখেছে যে শিমার প্রভাব দেখানো ব্যবহারকারীদের কন্টেন্ট লোড হওয়ার জন্য কতক্ষণ অপেক্ষা করতে হবে তা প্রদান করে না। ভিউ ট্রানজিশনের সাথে, ট্রানজিশন নিজেই ব্যবহারকারীদের উপলব্ধি করে যে "কিছু ঘটতে চলেছে", যা অপেক্ষাকে কম বেদনাদায়ক করে তুলেছে।
Nykaa তাদের ওয়েব পৃষ্ঠার ভিউ ট্রানজিশন সহ নতুন বর্ধিত UX নিয়ে খুবই উত্তেজিত ছিল এবং অতিরিক্ত পৃষ্ঠাগুলিতেও ভিউ ট্রানজিশন বাস্তবায়ন করতে প্রস্তুত। তাদের ডিজাইনের ভিপি যা বলেছেন তা এখানে:
আমরা সকল আসন্ন বৈশিষ্ট্যগুলিতে ভিউ ট্রানজিশন বাস্তবায়ন করতে মৃদুভাবে প্রতিশ্রুতিবদ্ধ যেখানে এটি অর্থপূর্ণ। কিছু ক্ষেত্র ইতিমধ্যে চিহ্নিত করা হয়েছে এবং দলটি সক্রিয়ভাবে সেগুলিতে বিনিয়োগ করছে।
কৃষ্ণা আরভি, ভিপি অব ডিজাইন
পলিসিবাজার
গুরগাঁওয়ে সদর দফতর, পলিসিবাজার হল ভারতের বৃহত্তম বীমা সমষ্টিকারী এবং বহুজাতিক আর্থিক প্রযুক্তি কোম্পানি।
পলিসিবাজার কেন ভিউ ট্রানজিশন বাস্তবায়ন করেছে?
একটি ওয়েব-প্রথম কোম্পানি হওয়ার কারণে, পলিসিবাজার টিম সর্বদা তাদের গুরুত্বপূর্ণ ব্যবহারকারীর যাত্রায় সর্বোত্তম সম্ভাব্য ব্যবহারকারীর অভিজ্ঞতা প্রদানের লক্ষ্য রাখে। ভিউ ট্রানজিশন এপিআই চালু হওয়ার আগেও জাভাস্ক্রিপ্ট এবং সিএসএস ব্যবহার করে কাস্টম ট্রানজিশন বাস্তবায়ন করা সাধারণ অভ্যাস ছিল, কারণ তারা ব্যবহারকারীর অভিজ্ঞতা উন্নত করেছে, একটি নিরবচ্ছিন্ন নেভিগেশন প্রবাহ তৈরি করেছে এবং তাদের ওয়েবসাইটের সামগ্রিক দৃষ্টি আকর্ষণকে উন্নত করেছে।
যাইহোক, এই কাস্টম বাস্তবায়নগুলি মাঝে মাঝে পারফরম্যান্স-ভিত্তিক বিলম্ব, কোড রক্ষণাবেক্ষণ জটিলতা এবং ব্যবহৃত ফ্রেমওয়ার্কগুলির সাথে সাবঅপ্টিমাল সামঞ্জস্যের জন্য এসেছে। ভিউ ট্রানজিশন এপিআই স্থানীয়ভাবে উপলব্ধ কর্মক্ষমতা সুবিধা সহ একটি সহজে-ব্যবহারযোগ্য ইন্টারফেস প্রদান করে এই চ্যালেঞ্জগুলির বেশিরভাগই কাটিয়ে উঠতে সাহায্য করেছে।
পলিসিবাজার তাদের প্রাক-উদ্ধৃতি যাত্রায় বিভিন্ন উপাদান জুড়ে ভিউ ট্রানজিশন ব্যবহার করেছে যাতে সম্ভাব্য ক্রেতাদের বীমা পলিসি কেনার জন্য প্রয়োজনীয় বিশদ প্রদান করা উত্তেজনাপূর্ণ হয়।
বাস্তবায়নের প্রযুক্তিগত বিবরণ
তারা কৌণিক এবং প্রতিক্রিয়া সহ একটি হাইব্রিড ফ্রেমওয়ার্ক পদ্ধতি ব্যবহার করে তাদের বেশিরভাগ কোডবেসকে প্রাধান্য দেয়। এখানে তাদের কোড থেকে VT উদ্ধৃতিটি কৌণিক ভাষায় লেখা এবং আমান সোনি (পলিসিবাজারের লিড ফ্রন্টেন্ড ডেভেলপার) শেয়ার করেছেন:
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
প্রশংসাপত্র
ঋষভ মেহরোত্রা, তাদের ডিজাইনের প্রধান (লাইফ বিইউ), বলেছেন যে ভিউ ট্রানজিশনগুলি ব্যবহারযোগ্যতা, ব্যস্ততা এবং সামগ্রিক সন্তুষ্টির উন্নতির মাধ্যমে তাদের ব্যবহারকারীদের জন্য ওয়েবসাইট অভিজ্ঞতা বৃদ্ধিতে গুরুত্বপূর্ণ ভূমিকা পালন করেছে। এটি মসৃণ নেভিগেশন, নির্দেশিত মিথস্ক্রিয়া, জ্ঞানীয় লোড হ্রাস, আধুনিক নান্দনিকতা এবং আরও অনেক কিছু প্রদানে সহায়তা করেছে।
ওয়েব অভিজ্ঞতা উন্নত করা PB-এর জন্য একটি সর্বোত্তম উদ্দেশ্য হিসাবে দাঁড়িয়েছে, এবং VT অসাধারণ নির্বিঘ্নতার সাথে এটি অর্জনে একটি সহায়ক হাতিয়ার হিসাবে প্রমাণিত হয়েছে। আমাদের ডেভেলপার সম্প্রদায় এবং ব্যবহারকারী বেস উভয়ের মধ্যেই এর ব্যাপক আবেদন আমাদের দলকে উদ্দীপনার অনুভূতিতে আচ্ছন্ন করেছে। আমরা যখন বিভিন্ন POD জুড়ে এর একীকরণ নিয়ে চিন্তা করি, তখন আমরা সন্তুষ্টির মাত্রা এবং অপারেশনাল শ্রেষ্ঠত্বের উপর সুদূরপ্রসারী ইতিবাচক প্রভাবের প্রত্যাশা করি।
সৌরভ তিওয়ারি (সিটিও, পলিসিবাজার)
পরবর্তী পদক্ষেপ
আপনি ভিউ ট্রানজিশন চেষ্টা করতে আগ্রহী? এখানে কিছু সংস্থান রয়েছে যা আপনি আরও জানতে অনুসরণ করতে পারেন: