પર્ફોર્મન્સ બગાડ્યા વગર સ્ક્રોલથી ચાલતા વીડિયો વિભાગો

પ્રીમિયમ સાઇટોને એવો પિન કરેલો વિભાગ ગમે છે જ્યાં સ્ક્રોલ સાથે વીડિયો ખૂલે અને પ્રકરણે-પ્રકરણે કૅપ્શન બદલાય. પાનાને આંચકાવાળું, ભારે અને બેટરી ખાનારું બનાવવાની એ સૌથી સરળ રીતોમાંની એક પણ છે. નમૂના લાઇબ્રેરીનો શોકેસ વિભાગ ઝડપી રહે તે માટે આ રીતે બન્યો છે.

#એક પ્રગતિ મૂલ્ય બધું ચલાવે છે

વિભાગ એક ઊંચું પાત્ર છે જેની અંદર સ્થિર મંચ છે. સ્ક્રોલ પર સ્ક્રિપ્ટ એક નંબર ગણે છે — મુલાકાતીએ પાત્રનો કેટલો ભાગ પાર કર્યો, 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નો આદર કરો.
• મુકાયેલી સ્ટાઇલને નેમસ્પેસ આપો.