Opens in a new tab

Cominvi Menu — pagina care se da la o parte

Produs Codegrid: Off-Canvas Menu (pachetul codegrid-cominvi-menu). Pagina live: /cominvi-menu/. Sursa: un build Vite cu un modul ES, o foaie de stil, o fotografie si un logo SVG. A venit si o a doua varianta, in Next.js/React (codegrid-cominvi-menu-nextjs) — acelasi CSS, aceeasi poza, aceeasi logica mutata intr-un useGSAP; nu a fost portata separat.

Ce face

  • Toata pagina e un singur obiect. La apasarea butonului, pagina coboara (la 50% din ecran, 65% pe telefon), se micsoreaza putin (0,95 / 0,85) si isi rotunjeste colturile (20px). Meniul nu vine peste pagina — el era dedesubt tot timpul, iar pagina se da la o parte.
  • Meniul are trei coloane de linkuri. Fiecare cuvant sta intr-o masca proprie si urca din ea, link dupa link, incepand la 0,65 s (cand pagina e deja pe drum).
  • Cat timp derulezi in jos, logo-ul iese pe stanga si butonul pe dreapta; orice derulare in sus le aduce inapoi.
  • Cat meniul e deschis, derularea paginii e oprita (lenis.stop()).

Ce cere site-ul

  • GSAP 3.13.0 + SplitText — deja globale. Optiunea mask: 'words' exista in SplitText 3.13.
  • Lenis 1.1.13 prin import(), doar pe pagina asta, pe container (.page), nu pe fereastra — ca la ForgeAutomotive Menu.
  • Font: Inter.
  • Poza de hero: originalul avea 4500×3000 (1,1 MB); redusa la 2000px, JPEG q80: 75 KB. Logo-ul SVG urcat ca atare.
  • Conversie rem → px (tema are baza rem de 10px).

Doua modificari fata de sursa

  • autoRaf nu exista in Lenis 1.1.13. Sursa (Lenis 1.3) il lasa pe Lenis sa-si porneasca singur bucla. Aici bucla e gsap.ticker, ca pe celelalte pagini cu Lenis, plus gsap.ticker.wake(). Fara asta, cu 1.1.13 pagina nu s-ar fi derulat deloc.
  • SplitText ruleaza dupa document.fonts.ready. Sursa il chema imediat, si GSAP avertiza in consola: „SplitText called before fonts loaded”. Mastile se croiesc dupa latimea cuvintelor in fontul de rezerva si pot taia literele cand vine Inter.
  • Butonul a primit type="button", aria-expanded (actualizat la fiecare apasare), aria-controls si aria-label — e singurul control al paginii.

Cum e construit in Bricks

O sectiune, un element Code. Markup 2,1 KB, CSS 5,5 KB, JS 6 KB.

  • Radacina: sectiunea .cmv, _padding 0, _width: 100%. Element Code cu noRoot, executeCode, language: html, signature => wp_hash($code).
  • Page settings: bodyClasses: cmv, headerDisabled, footerDisabled, disableLazyLoad. body.cmv are overflow: hidden: documentul nu se deruleaza, se deruleaza .page.
  • Sursa stilizeaza global *, img, h1, h3, nav si section. nav ar fi prins header-ul unui site. Toate sunt scopate sub .cmv; sectiunile sunt numite (.cmv .hero, .cmv .about, .cmv .outro), pentru ca .cmv section ar prinde si sectiunea Bricks din jur.
  • Constantele de reglaj sunt sus in JS: OPEN_Y*, OPEN_SCALE*, OPEN_RADIUS, PAGE_DURATION, NAV_HIDE_X, WORD_START, WORD_STEP.
  • La mutare se schimba doua adrese: poza de hero (in CSS) si logo-ul (in markup). Linkurile din meniu duc la /, ca in sursa.

Capcane

  • Pe container, nu pe fereastra. Orice cod care presupune window.scrollY sau un ScrollTrigger pe fereastra nu vede nimic pe pagina asta. Daca pui meniul pe o pagina care are deja animatii la scroll, acelea trebuie mutate pe .page (scroller: page), sau meniul trebuie refacut fara pagina-obiect.
  • mix-blend-mode: difference pe nav face logo-ul si butonul vizibile pe orice fundal, alb sau negru. Conteaza ca ambele sa fie albe in SVG / CSS.
  • letter-spacing in procente (-2%, -1%) — invalid, ignorat de browser si in sursa, si aici; pastrat cu comentariu.
  • Tabul ascuns: timeline-ul nu avanseaza. Verificat fortand progress(1) dupa click: pagina la scale 0.95 si coborata, colturi 20px, cuvintele la y 0, aria-expanded="true", Lenis oprit; dupa al doilea click, totul inapoi. Ascunderea navigatiei la scroll si derularea neteda s-au verificat intr-o copie locala in Playwright.

Pasi de reproducere

  1. Redu poza de hero la 2000px, urca poza si logo-ul (SVG-ul scris direct in uploads si inregistrat cu wp_insert_attachment, pentru ca WordPress nu accepta SVG prin wp_upload_bits).
  2. Scopeaza CSS-ul sub .cmv, cu sectiunile numite; converteste rem in px; adauga blocul Lenis.
  3. Aplatizeaza scriptul intr-un IIFE cu garda de DOM gata si garda de rulare dubla. Lenis pe .page, legat de gsap.ticker. SplitText dupa document.fonts.ready.
  4. Scrie arborele cu wp_slash() si semnatura, verifica md5 la citire, regenereaza CSS-ul Bricks.
  5. Verifica: 13 cuvinte separate, starea deschisa si inchisa fortand timeline-ul, aria-expanded, zero overflow orizontal la latime mare si la 390px (unde coloanele trec una sub alta).