Studio Burnett 1.0 — animated project website

Produs Ruben Stom: Animated Website — Prompts + Design Files (rubenstom.gumroad.com/l/animated-portfolio-prompts). Pagina live: /studio-burnett/ · sursa zip: 29. Animated Project Website.

• Intra cu numele studioului urias, cat 95% din latimea ecranului, si o imagine care rasfoieste prin sapte cadre si se opreste pe unul.
• Apoi toate imaginile de proiect, stivuite peste imaginea aia, se desfac intr-un rand orizontal, in timp ce numele se micsoreaza si urca in bara de sus. E o tranzitie FLIP: se masoara pozitia de start si cea de final, si se animeaza intre ele.
• Randul e infinit — cele sapte proiecte sunt repetate de cinci ori si pozitia se reia, deci poti derula lateral la nesfarsit.
• Treci cu mouse-ul peste un card si restul se sting.
• Click pe un card: o cortina coboara peste pagina, cardul zboara la locul lui in noua pagina, si se deschide proiectul cu patru imagini si text.
• INFO deschide un panou cu poza si prezentarea studioului. Numele din bara serveste drept buton de inchidere pentru orice panou deschis.

• Nicio librarie. Tranzitiile FLIP sunt scrise de mana: getBoundingClientRect, transformari si tranzitii CSS.
• Un font Google: Figtree.
• Header si footer dezactivate din setarile de pagina.
• bodyClasses: burnett loading — loading vine din sursa (<body class="loading">) si e scoasa de JS cand se termina intrarea. Fara ea, cardurile s-ar vedea inainte de tranzitie.

O sectiune, un element Code. Markup-ul e minuscul (656 octeti) — toata pagina se construieste din JS. 8,3 KB CSS, 15,5 KB JS.

Textele celor sapte proiecte (titlu, categorie, cele trei paragrafe) sunt in projects si projectCopy, la inceputul scriptului. Caile de imagine se construiesc din IMG_BASE prin doua functii, CARD(n) si PROJ(p, n).

36 de imagini: sapte coperti, un portret si patru imagini pentru fiecare din cele sapte proiecte. Toate 1792×2400 → 900px latime, JPG q80: 19 MB → 4 MB.

• Panourile se adaugau in <body>. Sursa face document.body.appendChild pentru cortina, pagina de proiect si panoul de info. Asa ar fi iesit din .sb si CSS-ul scopat nu le-ar mai fi prins. Le-am mutat in radacina sectiunii; sunt position: fixed, deci nu se schimba nimic vizual.
• Starile raman pe body. loading, project-open si info-open sunt clase pe <body> in sursa, si CSS-ul le foloseste ca stramos. Le-am pastrat acolo, calificate cu .burnett.
• Numarul proiectului vine cu zero in fata. Sursa calculeaza num = String(idx+1).padStart(2, '0'), deci “04”. Fisierele urcate sunt burnett-p4-01.jpg, nu p04. Prima varianta a dat 4 imagini rupte pe fiecare pagina de proiect; rezolvat cu parseInt(p, 10) in constructorul de cale.
• De verificat cu mana: rasfoirea de la intrare, desfacerea in rand, cortina la deschiderea proiectului. Toate sunt tranzitii CSS pornite din requestAnimationFrame — oprite intr-un tab de fundal. Continutul (35 de carduri, cele 36 de imagini, textele, potrivirea imagine–proiect) e verificat.

1. Redimensioneaza cele 36 de imagini la 900px, redenumeste-le burnett-0N / burnett-pP-0N / burnett-profile, urca-le.
2. Desparte CSS-ul si JS-ul din pagina sursa; prefixeaza selectorii cu .sb, iar regulile pe body cu body.burnett.
3. In JS: IMG_BASE plus CARD / PROJ in loc de caile relative, radacina sectiunii in loc de document, si root.appendChild in loc de document.body.appendChild.
4. Prefixeaza id-urile cu sb-, invelesta in <div class="sb">.
5. Un element Code intr-o sectiune fara padding; bodyClasses: burnett loading.