Il Capo Menu — meniu-galerie cu perdele rosii
Ce face
- Pagina e un hero pe tot ecranul (o fotografie si sigla „OSCURO” uriasa, rosie), cu doua butoane mici negre sus: numele si „Menu”.
- La „Menu”, toata pagina se micsoreaza la 80%, apoi doua perdele se deschid din mijloc spre margini: prima rosie care se inegreste, apoi a doua, rosie, peste ea.
- Pe fundalul rosu apar, pe rand: sigla mare a meniului (se descopera de sus in jos), apoi sapte proiecte — la fiecare, poza se deschide din centru, apoi numarul si titlul — si la final o sigla mica jos.
- Meniul se deruleaza (e mai inalt decat ecranul), cu Lenis. Al doilea click pe „Menu” inchide totul invers si duce meniul inapoi sus.
- Seamana putin cu Cominvi Menu (si acolo pagina se micsoreaza), dar acolo meniul e din trei coloane de linkuri; aici e o galerie de proiecte cu poze.
Ce cere site-ul
- GSAP 3.13.0 — deja global. Nimic din plugin-uri.
- Lenis 1.1.13, incarcat din JS de pe jsdelivr (
+esm), cu blocul de CSS al lui Lenis. Optional: daca nu vine, meniul se deruleaza nativ. - Fontul Cossette Titre, din Google Fonts, cu
@import. - Opt fotografii:
icp-menu-1..7.jpg(1200×675, din 1920×1080) siicp-hero.jpg(1920×1080, din 2400×1350) — 1 MB in total, din 18 MB; plus trei sigle SVG:icp-menu-logo.svg,icp-hero-logo.svg,icp-footer-logo.svg. - Conversie rem → px (baza temei e 10px): marginile 2.5rem → 40px, spatiul dintre proiecte 7.5rem → 120px, textul 1.25rem → 20px, titlurile
clamp(1.5rem, 3vw, 4.5rem)→clamp(24px, 3vw, 72px), sigla de jos 20rem → 320px.
Cum e construit in Bricks
O sectiune, doua elemente Code. Markup 3 KB, CSS 5 KB, JS 6 KB.
- Radacina e un
div.icp(width: 100%); body-ul primesteicp-page(fundal negru). Setari de pagina:headerDisabled,footerDisabled,disableLazyLoad. - Totul e
position: fixed: meniul de sus, meniul (.menu) si pagina (.page). Fereastra nu se deruleaza deloc; se deruleaza doar cele doua containere, fiecare cu Lenis-ul lui. - Lenis condus de
gsap.ticker. Sursa folosea Lenis 1.3 cuautoRaf: true; pe 1.1.13 optiunea nu exista si ar fi fost ignorata in tacere, deci meniul nu s-ar fi derulat. Aici un singurticker.addapeleazaraf()pe ambele instante, apoigsap.ticker.wake(). - Deschiderea e un timeline in pauza (
window.__icpMenu): pagina, perdelele, sigla. Proiectele si sigla de jos au tween-uri separate, cu intarziere crescatoare, pornite la fiecare deschidere. - Al doilea element Code, Lista de animatii (se sterge la clonare), cu cele cinci miscari.
Mici modificari fata de sursa
- Lenis 1.1.13 in loc de 1.3, condus de ticker (vezi mai sus); daca nu se incarca, la inchidere meniul se duce sus cu
scrollTop = 0. - Pozele, micsorate la marimea la care se vad (de la 18 MB la 1 MB).
Bug-uri lasate ca in sursa
- Meniul nu se poate inchide de la tastatura si nici cu Escape; „Menu” e un
div, nu un buton, deci nu primeste focus. Reparatia:<button>in loc dedivsi un ascultator pe Escape. - Doua click-uri repezi pe „Menu” strica pagina (verificat): daca inchizi in prima secunda, perdelele se strang, dar proiectele se deschid totusi dupa intarzierea lor si raman peste hero, cu meniul inchis. Cauza: tween-urile proiectelor au intarzieri si nu sunt in timeline, iar inchiderea nu le opreste. Reparatia:
gsap.killTweensOfpe poze, numere si titluri la inceputul luicloseItems(). letter-spacing: -2%nu e valid, browserul il ignora.
Capcane
- Tabul ascuns nu misca nimic. Verificarea s-a facut intr-o copie locala in Playwright, la 1920px si la 390px: dupa click pagina e la
scale(0.8), meniul primeste click-uri, toate cele 10 imagini sunt incarcate, meniul se deruleaza cu rotita (Lenis pe container), iar la al doilea click totul revine si meniul e iar sus; zero overflow.
Pasi de reproducere
- Micsoreaza si redenumeste pozele (prefix
icp-), urca-le intr-un pachet base64 princreate-upload-link, cu md5 verificat. - Pune markup-ul intr-un
div.icp, scopeaza CSS-ul sub.icp, converteste rem in px, schimba calea fundalului din hero, adauga blocul de CSS al lui Lenis. - Aplatizeaza modulul intr-un IIFE: gsap e global, Lenis vine prin
import()si e condus degsap.ticker. - Scrie arborele cu
wp_slash()si semnatura, verifica md5 la citire, regenereaza CSS-ul Bricks, goleste cache-ul. - Verifica deschiderea, derularea meniului si inchiderea intr-o copie locala.