Prezentare cinematică la derulare
O secțiune reutilizabilă care transformă orice demo într-un scurtmetraj: la derulare, video-ul se extinde dintr-o fereastră la tot ecranul, urmat de o galerie foto.
Obiectiv tehnic
Să dea fiecărui demo senzația unui site făcut de agenție — filmări reale, tipografie sigură și mișcare — păstrând un singur script fără dependențe care merge pe telefoane.
Constrângeri
- Fără biblioteci de animație: un script mic pe secțiune.
- Un singur video decodat odată, pentru baterie și date.
- Trebuie să respecte preferința de mișcare redusă și să treacă la un aspect static.
Arhitectură
- 01
Reel fixat
O secțiune înaltă cu scenă fixă; progresul derulării controlează clip-path, scara și capitolul.
- 02
Capitole
Până la trei clipuri se topesc unul în altul cu subtitrări; rulează doar clipul activ.
- 03
Galerie fixată
O bandă orizontală mutată de derulare, cu paralaxă pe fiecare card.
- 04
Întâi pozele proprii
Când pozele afacerii sunt cunoscute, ele deschid galeria.
Fluxul merge de la stânga la dreapta, de sus în jos.
Decizii cheie de implementare
Filmări în loc de 3D generat
Camera 3D generată arăta sintetic. Filmările licențiate au făcut aceeași secțiune să pară reală imediat.
Stiluri cu prefix
Secțiunea e injectată în multe șabloane diferite, deci fiecare clasă are prefix ca să nu se ciocnească cu CSS-ul șablonului — lecție dintr-un bug real de layout.
Preîncărcarea doar a clipului următor
Primul clip se încarcă imediat; fiecare clip următor trece din preload='none' chiar înainte să fie nevoie de el.
Capturi
Provocări
Coliziuni CSS
Un nume generic de clasă din galerie s-a ciocnit cu o regulă grid a unui șablon și a strâns banda. Prefixarea fiecărui selector a rezolvat definitiv.
Suprapunere pe mobil
Îndemnul final se suprapunea peste bara fixă de pe mobil; pe ecrane mici e acum ascuns în favoarea barei.
Lecții învățate
- Mișcarea legată de derulare trebuie să depindă de o singură valoare de progres; restul derivă din ea.
- Componentele injectate trebuie să-și apere stilurile.
- Filmările reale și reținerea bat grafica generată elaborată.