একটি গল্প উপাদান নির্মাণ

ওয়েবে Instagram গল্পের মতো একটি অভিজ্ঞতা কীভাবে তৈরি করা যায় তার একটি মৌলিক ওভারভিউ।

Adam Argyle

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

আপনি যদি এই গল্পের উপাদানটি নিজে তৈরি করার একটি হ্যান্ডস-অন প্রদর্শন পছন্দ করেন তবে গল্পের উপাদান কোডল্যাবটি দেখুন।

আপনি যদি ভিডিও পছন্দ করেন তবে এখানে এই পোস্টটির একটি YouTube সংস্করণ রয়েছে:

ওভারভিউ

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

কাজের জন্য সঠিক টুল বাছাই করা

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

CSS গ্রিড

আমাদের লেআউটটি CSS গ্রিডের জন্য কোনও লম্বা ক্রম বলে প্রমাণিত হয়নি কারণ এটি সামগ্রীতে ঝগড়া করার কিছু শক্তিশালী উপায়ে সজ্জিত।

বন্ধুদের লেআউট

আমাদের প্রাথমিক .stories কম্পোনেন্ট র্যাপার হল একটি মোবাইল-প্রথম অনুভূমিক স্ক্রলভিউ:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}

চলুন সেই grid লেআউটটি ভেঙে দেওয়া যাক:

• আমরা স্পষ্টভাবে 100vh এবং 100vw দিয়ে মোবাইলে ভিউপোর্ট পূরণ করি এবং ডেস্কটপে আকার সীমাবদ্ধ করি
• / আমাদের সারি এবং কলাম টেমপ্লেট আলাদা করে
• auto-flow grid-auto-flow: column
• অটোফ্লো টেমপ্লেট হল 100% , যা এই ক্ষেত্রে স্ক্রোল উইন্ডোর প্রস্থ যাই হোক না কেন

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

স্ট্যাকিং

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

CSS গ্রিডের সাহায্যে, আমরা একটি একক-কোষ গ্রিড (অর্থাৎ একটি বর্গক্ষেত্র) সংজ্ঞায়িত করতে পারি, যেখানে সারি এবং কলামগুলি একটি উপনাম ( [story] ) ভাগ করে এবং তারপর প্রতিটি শিশুকে সেই উপনামযুক্ত একক-কোষ স্থানের জন্য বরাদ্দ করা হয়:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

এটি আমাদের HTML-কে স্ট্যাকিং ক্রম নিয়ন্ত্রণে রাখে এবং সমস্ত উপাদানকে প্রবাহে রাখে। লক্ষ্য করুন কীভাবে আমাদের absolute অবস্থান বা z-index সাথে কিছু করার দরকার নেই এবং আমাদের height: 100% বা width: 100% সাথে সঠিক বক্স করার দরকার নেই। প্যারেন্ট গ্রিড ইতিমধ্যেই গল্পের ছবির ভিউপোর্টের আকার নির্ধারণ করেছে, তাই এটি পূরণ করার জন্য এই গল্পের উপাদানগুলির কোনটি বলার প্রয়োজন নেই!

CSS স্ক্রোল স্ন্যাপ পয়েন্ট

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

.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

আমি কয়েকটি কারণে স্ক্রোল স্ন্যাপ পয়েন্ট বেছে নিয়েছি:

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

ক্রস ব্রাউজার সামঞ্জস্য

আমরা Opera, Firefox, Safari, এবং Chrome, প্লাস Android এবং iOS-এ পরীক্ষা করেছি। এখানে ওয়েব বৈশিষ্ট্যগুলির একটি সংক্ষিপ্ত রানডাউন রয়েছে যেখানে আমরা সক্ষমতা এবং সমর্থনে পার্থক্য খুঁজে পেয়েছি৷

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

scroll-snap-stop

ক্যারোসেলগুলি ছিল প্রধান UX ব্যবহারের ক্ষেত্রে যা CSS স্ক্রোল স্ন্যাপ পয়েন্টস স্পেক তৈরি করতে প্ররোচিত করেছিল। গল্পের বিপরীতে, ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার পরে একটি ক্যারোজেলকে সবসময় প্রতিটি ছবিতে থামতে হবে না। ক্যারোজেলের মধ্য দিয়ে দ্রুত সাইকেল চালানোর জন্য এটি ভাল বা উৎসাহিত হতে পারে। অন্যদিকে, গল্পগুলি একের পর এক সর্বোত্তম নেভিগেট করা হয়, এবং scroll-snap-stop ঠিক এটিই প্রদান করে।

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

এই পোস্টটি লেখার সময়, scroll-snap-stop শুধুমাত্র ক্রোমিয়াম-ভিত্তিক ব্রাউজারে সমর্থিত। আপডেটের জন্য ব্রাউজার সামঞ্জস্য পরীক্ষা করুন। যদিও এটি একটি ব্লকার নয়। এর মানে হল অসমর্থিত ব্রাউজারগুলিতে ব্যবহারকারীরা ঘটনাক্রমে একজন বন্ধুকে এড়িয়ে যেতে পারেন। তাই ব্যবহারকারীদেরকে আরও সতর্ক হতে হবে, অথবা আমাদের জাভাস্ক্রিপ্ট লিখতে হবে যাতে কোনো এড়িয়ে যাওয়া বন্ধুকে দেখা হিসেবে চিহ্নিত করা না হয়।

আপনি আগ্রহী হলে স্পেক্সে আরও পড়ুন।

overscroll-behavior

আপনি কি কখনও একটি মডেলের মাধ্যমে স্ক্রোল করছেন যখন হঠাৎ আপনি মডেলের পিছনে সামগ্রীটি স্ক্রোল করা শুরু করেন? overscroll-behavior বিকাশকারীকে সেই স্ক্রোলটিকে ফাঁদে ফেলতে দেয় এবং এটিকে ছেড়ে যেতে দেয় না। এটা অনুষ্ঠান সব ধরণের জন্য চমৎকার. My Stories কম্পোনেন্ট এটি ব্যবহার করে অতিরিক্ত সোয়াইপ এবং স্ক্রলিং অঙ্গভঙ্গিগুলিকে কম্পোনেন্ট ছেড়ে যাওয়া থেকে বিরত রাখতে।

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

সাফারি এবং অপেরা ছিল 2টি ব্রাউজার যা এটি সমর্থন করে না এবং এটি সম্পূর্ণ ঠিক। এই ব্যবহারকারীরা একটি ওভারস্ক্রোল অভিজ্ঞতা পাবেন যেমন তারা অভ্যস্ত এবং এই বর্ধিতকরণটি তারা কখনই লক্ষ্য করতে পারে না। আমি ব্যক্তিগতভাবে একজন বড় ভক্ত এবং আমি প্রয়োগ করি প্রায় প্রতিটি ওভারস্ক্রোল বৈশিষ্ট্যের অংশ হিসাবে এটি অন্তর্ভুক্ত করতে চাই। এটি একটি নিরীহ সংযোজন যা শুধুমাত্র উন্নত UX হতে পারে।

scrollIntoView({behavior: 'smooth'})

যখন একজন ব্যবহারকারী ট্যাপ করে বা ক্লিক করে এবং বন্ধুর গল্পের সেটের শেষে পৌঁছে যায়, তখন স্ক্রোল স্ন্যাপ পয়েন্ট সেটে পরবর্তী বন্ধুর কাছে যাওয়ার সময়। জাভাস্ক্রিপ্টের সাহায্যে, আমরা পরবর্তী বন্ধুকে উল্লেখ করতে সক্ষম হয়েছি এবং এটি দেখার জন্য স্ক্রোল করার জন্য অনুরোধ করতে পেরেছি। এই মৌলিক জন্য সমর্থন মহান; প্রতিটি ব্রাউজার এটি ভিউতে স্ক্রোল করে। কিন্তু, প্রতিটি ব্রাউজার এটি 'smooth' করেনি। এর মানে স্ন্যাপ করার পরিবর্তে এটি ভিউতে স্ক্রোল করা হয়েছে।

element.scrollIntoView({
  behavior: 'smooth'
})

সাফারি ছিল একমাত্র ব্রাউজার যা behavior: 'smooth' । আপডেটের জন্য ব্রাউজার সামঞ্জস্য পরীক্ষা করুন।

হাতে-কলমে

এখন আপনি জানেন যে আমি কীভাবে এটি করেছি, আপনি কীভাবে করবেন?! আসুন আমাদের পদ্ধতির বৈচিত্র্য আনুন এবং ওয়েবে তৈরি করার সমস্ত উপায় শিখি। একটি ত্রুটি তৈরি করুন, আমাকে আপনার সংস্করণ টুইট করুন , এবং আমি এটিকে নীচের সম্প্রদায়ের রিমিক্স বিভাগে যোগ করব৷

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

• @geoffrich_ Svelte এর সাথে: ডেমো এবং কোড
• @GauteMeekOlsen Vue সহ: ডেমো + কোড
• লিট সহ @AnaestheticsApp : ডেমো এবং কোড