Opens in a new tab

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) si icp-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 primeste icp-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 cu autoRaf: true; pe 1.1.13 optiunea nu exista si ar fi fost ignorata in tacere, deci meniul nu s-ar fi derulat. Aici un singur ticker.add apeleaza raf() pe ambele instante, apoi gsap.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 de div si 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.killTweensOf pe poze, numere si titluri la inceputul lui closeItems().
  • 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

  1. Micsoreaza si redenumeste pozele (prefix icp-), urca-le intr-un pachet base64 prin create-upload-link, cu md5 verificat.
  2. 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.
  3. Aplatizeaza modulul intr-un IIFE: gsap e global, Lenis vine prin import() si e condus de gsap.ticker.
  4. Scrie arborele cu wp_slash() si semnatura, verifica md5 la citire, regenereaza CSS-ul Bricks, goleste cache-ul.
  5. Verifica deschiderea, derularea meniului si inchiderea intr-o copie locala.