পারফরম্যান্স নষ্ট না করে স্ক্রোলে চলা ভিডিও অংশ

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

#একটি অগ্রগতির মান সবকিছু চালায়

অংশটি একটি উঁচু ধারক যার ভেতরে স্থির মঞ্চ। স্ক্রোলে স্ক্রিপ্ট একটি সংখ্যা হিসাব করে — দর্শক ধারকের কতটা পার করেছেন, 0 থেকে 1 — আর বাকি সব তা থেকেই আসে:

• clip-path-এর মার্জিন যা ফ্রেমবন্দি ভিডিওকে পূর্ণ প্রস্থে খোলে,
• সক্রিয় ভিডিওর হালকা বড় হওয়া,
• কোন অধ্যায় (ক্লিপ আর ক্যাপশন) সক্রিয়,
• অগ্রগতি বারের প্রস্থ,
• শিরোনামের ফিকে হওয়া আর সরে যাওয়া।

মানগুলো CSS কাস্টম প্রপার্টি হিসেবে লেখা হয় আর বাকিটা CSS করে। প্রতি উপাদানের অ্যানিমেশন সময়রেখা মেলাতে হয় না, কোনো লাইব্রেরি নামাতে হয় না।

const p = clamp(-rect.top / (rect.height - innerHeight));
stage.style.setProperty('--p', p);

#এক ফ্রেমে পড়া আর লেখা

স্ক্রোল ইভেন্ট স্ক্রিন রিফ্রেশের চেয়ে বেশিবার আসে। হ্যান্ডলার শুধু requestAnimationFrame দিয়ে কাজ নির্ধারণ করে, আর প্রতিটি ফ্রেম আগে লেআউট পড়ে তারপর স্টাইল লেখে। পড়া আর লেখা মেশালে বারবার পুনর্গণনা হয় — ঝাঁকুনিময় স্ক্রোলের সবচেয়ে সাধারণ কারণ।

#শুধু একটি ভিডিও চলে

একসঙ্গে তিনটি স্বয়ংক্রিয় ভিডিও ফোন গরম করে আর ডেটা খায়। নিয়ম:

• প্রথম ক্লিপ সঙ্গে সঙ্গে লোড হয়, যাতে অংশটি কখনো খালি না থাকে।
• বাকিগুলো preload="none" দিয়ে শুরু হয়।
• কোনো অধ্যায় সক্রিয় হলে তার ক্লিপ চলে আর পরের ক্লিপ আগে লোড হতে শুরু করে।
• নিষ্ক্রিয় ক্লিপ ফিকে হওয়া শেষ হলে থেমে যায়।
• পুরো অংশ স্ক্রিনের বাইরে গেলে সব থেমে যায়।

সব ক্লিপ নিঃশব্দ, লুপে আর playsinline, যা ফোনে স্বয়ংক্রিয় চালানোর জন্য দরকারি।

#সস্তা প্রপার্টি অ্যানিমেট করুন

opacity, transform আর clip-path GPU কম্পোজ করতে পারে। বড় উপাদানে top, width বা background-position অ্যানিমেট করলে পুনর্গণনা বা পুনরাঙ্কন হয়। আনুভূমিক গ্যালারি translate3d দিয়ে সরে, আর প্রতিটি কার্ডের প্যারালাক্স ভেতরের ছবিকে ট্রান্সফর্ম দিয়ে সরায়, অবস্থান বদলে নয়।

#বুদ্ধি করে ভিডিও পরিবেশন করুন

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

#কম গতিকে সম্মান করুন

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

#নিজের স্টাইল রক্ষা করুন

অংশটি অনেক আলাদা টেমপ্লেটে বসানো হয়, আর একটিতে সাধারণ .gal গ্রিড নিয়ম ছিল যা নিঃশব্দে গ্যালারির সারি গুটিয়ে দেয়। এখন কম্পোনেন্টের প্রতিটি ক্লাসে উপসর্গ আছে। আপনি যদি এমন কম্পোনেন্ট বানান যা আপনার নিয়ন্ত্রণের বাইরের পাতায় যায়, তবে নেমস্পেস ঐচ্ছিক নয়।

#সারসংক্ষেপ

• সবকিছু একটি অগ্রগতির মান থেকে বের করুন।
• requestAnimationFrame দিয়ে নির্ধারণ করুন; আগে পড়ুন, তারপর লিখুন।
• একটি চলমান ভিডিও; সময়মতো আগে লোড; স্ক্রিনের বাইরে থামান।
• শুধু কম্পোজিটর-বান্ধব প্রপার্টি অ্যানিমেট করুন।
• ভিডিও ক্যাশ করুন আর edge-এ range দিয়ে পরিবেশন করুন।
• prefers-reduced-motion সম্মান করুন।
• বসানো স্টাইলকে নেমস্পেস দিন।