স্ক্রলে চলা সিনেমাটিক প্রদর্শনী
পুনর্ব্যবহারযোগ্য অংশ যা যেকোনো নমুনাকে ছোট চলচ্চিত্রে পরিণত করে: স্ক্রল করলে ভিডিও ছোট জানালা থেকে পুরো পর্দায় খোলে, তারপর ছবির গ্যালারি।
প্রযুক্তিগত লক্ষ্য
প্রতিটি নমুনাকে এজেন্সির বানানো সাইটের অনুভূতি দেওয়া — আসল ভিডিও, আত্মবিশ্বাসী অক্ষর আর গতি — তবু ফোনে চলা একটি নির্ভরতাহীন স্ক্রিপ্ট রাখা।
সীমাবদ্ধতা
- কোনো অ্যানিমেশন লাইব্রেরি নয়: প্রতি অংশে একটি ছোট স্ক্রিপ্ট।
- ব্যাটারি আর ডেটা বাঁচাতে একসঙ্গে শুধু একটি ভিডিও ডিকোড হবে।
- কম গতির পছন্দকে সম্মান করতে হবে আর স্থির লেআউটে নেমে আসতে হবে।
কাঠামো
- 01
পিন করা রিল
স্থির মঞ্চসহ একটি উঁচু অংশ; স্ক্রোলের অগ্রগতি clip-path, আকার আর অধ্যায় চালায়।
- 02
অধ্যায়
ক্যাপশনসহ সর্বোচ্চ তিনটি ক্লিপ মিলেমিশে বদলায়; শুধু সক্রিয় ক্লিপ চলে।
- 03
পিন করা গ্যালারি
স্ক্রোলে সরে যাওয়া আনুভূমিক সারি, প্রতিটি কার্ডে প্যারালাক্সসহ।
- 04
আগে নিজের ছবি
ব্যবসার নিজের ছবি জানা থাকলে সেগুলো দিয়েই গ্যালারি শুরু হয়।
প্রবাহ বাম থেকে ডানে, উপর থেকে নিচে।
মূল সিদ্ধান্ত
কোডের 3D-র বদলে ভিডিও
আগের কোডে বানানো 3D ঘর কৃত্রিম লাগত। লাইসেন্স করা ভিডিও একই অংশকে সঙ্গে সঙ্গে আসল করে তুলল।
নেমস্পেসযুক্ত স্টাইল
অংশটি অনেক আলাদা টেমপ্লেটে বসানো হয়, তাই টেমপ্লেটের CSS-এর সঙ্গে সংঘাত এড়াতে প্রতিটি ক্লাসে উপসর্গ আছে — একটি আসল লেআউট বাগ থেকে শেখা।
শুধু পরের ক্লিপ আগে লোড
প্রথম ক্লিপ সঙ্গে সঙ্গে লোড হয়; পরের প্রতিটি ক্লিপ দরকারের ঠিক আগে preload='none' থেকে উন্নীত হয়।
স্ক্রিনশট
চ্যালেঞ্জ
CSS সংঘাত
গ্যালারির একটি সাধারণ ক্লাস নাম একটি টেমপ্লেটের গ্রিড নিয়মের সঙ্গে সংঘাতে সারিটি গুটিয়ে দেয়। প্রতিটি সিলেক্টরে উপসর্গ দেওয়ায় স্থায়ীভাবে সমাধান হলো।
ফোনে উপরিপাত
শেষ আহ্বান বোতাম ফোনের স্থির বারের উপর পড়ত; ছোট স্ক্রিনে এখন তা বারের পক্ষে লুকানো থাকে।
শিক্ষা
- স্ক্রোলের সঙ্গে যুক্ত গতি একটি অগ্রগতি মানের উপর নির্ভর করবে; বাকি সব তা থেকেই আসবে।
- বসানো কম্পোনেন্টকে নিজের স্টাইল রক্ষা করতে হবে।
- আসল ভিডিও আর সংযম জটিল তৈরি গ্রাফিক্সকে হারায়।