Sticky Cards — pachetul de carduri care se imparte la scroll

Produs Codegrid: LXL Creative Sticky Cards (pachetul codegrid-lxlcreative-sticky-cards). Pagina live: /sticky-cards/. Sursa: un build Vite cu un modul ES, o foaie de stil si cinci fotografii.

• Sectiunea se fixeaza pe ecran (pin) cat tine opt inaltimi de fereastra de derulare. In stanga sta textul, in dreapta un pachet de cinci carduri, unul peste altul.
• Fiecare sfert din derulare preda un card: cel din fata se inclina 20 de grade, vine spre privitor (z: 350 intr-un parinte cu perspective: 1200px) si iese pe sus; cel de dedesubt urca in locul lui si creste la marime intreaga.
• Cardul care urca porneste cu intarziere (dupa 30% din segment) si cu o revenire elastica (back.out(2)) — de asta pare ca e impins de plecarea celuilalt, nu ca se misca odata cu el.
• Cardurile deja plecate raman parcate deasupra cadrului, asa ca la derulare inapoi coboara la loc, in ordine.
• Sub 1000px, textul trece deasupra si cardurile ocupa 70% din latime, cu zborul mai lung.

• GSAP 3.13.0 + ScrollTrigger — deja globale pe site.
• Lenis 1.1.13 prin import(), optional: fara el pagina merge cu scroll nativ.
• Font: Bricolage Grotesque, nou pe site, doar aici.
• Cinci fotografii. Sursa le avea la 1920px, 3,5 MB in total; reduse la 1200px latime, JPEG q82 progresiv: 1 MB. Cardul are 4/5 si background-size: cover, deci 1200px ajunge chiar si pe ecran mare.
• Conversie rem → px (tema are baza rem de 10px).

O sectiune, un element Code. Markup 1,8 KB, CSS 4,4 KB, JS 6,6 KB.

• Radacina: sectiunea .stk, _padding 0, _width: 100%. Element Code cu noRoot, executeCode, language: html, signature => wp_hash($code).
• Page settings: bodyClasses: stk, headerDisabled, footerDisabled, disableLazyLoad.
• Pozele sunt puse din CSS, cate una pe id (.stk .card#card-1 …). La mutare se schimba doar cele cinci URL-uri — JS-ul nu stie nimic despre imagini, doar numara cardurile.
• Ca sa adaugi un card, copiezi un bloc .card cu id-ul urmator si ii dai o regula de fundal. Durata pinului ramane aceeasi, deci fiecare predare devine mai scurta; daca vrei acelasi ritm, creste PIN_SCREENS.
• Constantele de reglaj sunt sus in JS: PIN_SCREENS, Y_OFFSET, SCALE_STEP, EXIT_ROTATION, EXIT_Z, EXIT_Y_*, PARKED_Y_*.

Sursa citeste window.innerHeight si pragul de mobil o singura data, la incarcare: end: "+=" + window.innerHeight * 8. Dupa o redimensionare sau o rotire de telefon, pinul pastra lungimea veche si cardurile zburau distanta veche. Aici end e o functie, deci ScrollTrigger o recalculeaza la fiecare refresh(), iar valorile de mobil sunt recitite la schimbarea de latime. Verificat: la 1280px intervalul e 950–8550, la 390px devine 796–7164.

• .stk section ar fi prea larg. Sursa stilizeaza section cu height: 100svh. Cum clasa sta si pe body, selectorul ar prinde si sectiunea Bricks care invelaste portarea si ar strange pagina la un ecran. Sunt numite cele trei sectiuni: .stk .intro, .stk .spotlight, .stk .outro.
• letter-spacing: -2% pe titluri — procentele nu sunt valide acolo. Ignorat de browser si in sursa, si aici; pastrat cu comentariu.
• Sectiunea fixata si Lenis se impaca, dar doar cu blocul de CSS al lui Lenis pus in pagina; fara el, scroll-ul neted al temei se bate cu Lenis si pagina pare greoaie.
• Tabul ascuns nu avanseaza cadrele, deci nimic nu pare sa se miste. Verificarea se face fortat: window.scrollTo la fractiuni din interval, apoi ScrollTrigger.update(), si se compara transform-urile — trebuie sa fie diferite la 0%, 30%, 60% si 95%.

1. Redimensioneaza cele cinci fotografii la 1200px latime, JPEG q82 progresiv, redenumeste-le cu prefix (sticky-0N.jpg) si urca-le cu create-upload-link + zip in base64, cu md5 verificat la destinatie.
2. Scopeaza CSS-ul sub .stk, cu sectiunile numite. Muta variabilele de culoare de pe :root pe body.stk. Converteste rem in px. Adauga blocul Lenis.
3. Aplatizeaza scriptul intr-un IIFE cu garda de DOM gata si garda de rulare dubla; toate cautarile prin root.
4. Fa end functie si reciteste valorile de mobil la schimbarea de latime, apoi ScrollTrigger.refresh().
5. Scrie arborele cu wp_slash() si semnatura, verifica md5 la citire, regenereaza CSS-ul Bricks.
6. Verifica: un singur ScrollTrigger, inaltimea documentului de vreo zece ecrane, cele cinci fundaluri cu raspuns 200, transformari distincte la mai multe fractiuni, zero overflow orizontal la latime mare si la 390px.