Realevate — intrare cu contor si poze care se deschid intr-o rama
Ce face
- La incarcare ecranul e negru, iar un contor in doua coloane urca de la 00 la 99 in patru salturi (27, 42, 68, 99). Fiecare cifra se roteste ca pe un tambur.
- In acelasi timp, intr-o rama mica din centru (4:5, cel mult 250px), sase poze se deschid una peste alta, din centru spre margini (
clip-path), fiecare coborand din zoom 2x la 1x. - Apoi fundalul negru se ridica si descopera pagina alba; rama urca putin si ramane in hero, cu ultima poza.
- Titlul „Long Exposure” urca din masca si curge la nesfarsit ca banda pe sub rama; meniul, descrierea, eticheta si footerul urca rand cu rand.
- Seamana cu Preloader cu bara (tot Codegrid, aceeasi tehnica a pozelor si aceeasi curba
hop). In plus are contorul, banda si rama care ramane in pagina; acolo totul dispare si ramane doar titlul.
Ce cere site-ul
- GSAP 3.13.0 + SplitText — deja globale pe site. CustomEase nu e global: scriptul il incarca singur de pe jsdelivr,
gsap@3.13.0/dist/CustomEase.min.js, si porneste abia dupa ce a venit. - Fontul Google Sans Flex, din Google Fonts, cu
@importpe primul rand dincssCode. - Sase fotografii 800×1000 (sursa avea 2400×3000, 6 MB; redimensionate la 590 KB in total), redenumite
rlv-img1..6.jpg, plus siglarlv-logo.svg. - Conversie rem → px (tema are baza rem de 10px): titlul
clamp(6rem, 12vw, 14rem)→clamp(96px, 12vw, 224px), textul 1.1rem → 17.6px, marginile 3rem → 48px (2rem → 32px pe mobil), sigla 10rem → 160px, cifrele 1.5rem → 24px,--digit-h1.65rem → 26.4px.
Cum e construit in Bricks
O sectiune, doua elemente Code. Markup 2 KB, CSS 5 KB, JS 6 KB.
- Sectiunea:
_padding0,_width: 100%. ElementulRealevate (Codegrid) - intro + hero:noRoot,executeCode,language: html,signature => wp_hash($code). - Radacina e un
div.rlvdin markup, iar body-ul primeste alta clasa,rlv-page(doar fundalul alb). Asa selectorii.rlv nav,.rlv pnu pot prinde nimic din afara demo-ului. Setari de pagina:headerDisabled,footerDisabled,disableLazyLoad. .rlv { width: 100% }e obligatoriu: sectiunea Bricks isi centreaza copiii, iar fara latime radacina se strangea la latimea textului si hero-ul disparea.- JS: un IIFE, radacina gasita cu
.rlv:not(body), garda de rulare dubla, toti selectorii sursei cautati doar in.rlv. Timeline-ul intrarii e expus cawindow.__rlvIntro, pentru verificare. - Al doilea element Code, Lista de animatii (se sterge la clonare): eticheta neagra „Animatii” din dreapta, cu cele cinci miscari ale paginii. Nu face parte din demo.
Mici modificari fata de sursa
- Animatia porneste dupa ce s-a incarcat fontul (sursa pornea la
DOMContentLoaded). Altfel SplitText taia randurile si banda isi masura latimea pe fontul de rezerva. - Linkurile „Archive” si „Commission” duc la
#(in sursa:/about,/contact, care aici ar da 404); sigla duce la prima pagina a site-ului. - Pozele, redimensionate de la 2400×3000 la 800×1000.
Bug-uri lasate ca in sursa
letter-spacing: -1%nu e valid (procentul nu e acceptat acolo), asa ca browserul il ignora. Pastrat, cu un comentariu.- Latimea benzii si inaltimea cifrei se masoara o singura data. Dupa rotirea telefonului sau redimensionarea ferestrei, banda poate sari cand isi reia bucla. Reparatia: construirea benzii intr-un
gsap.context(), refacuta la schimbarea latimii. - Contorul nu e legat de incarcarea reala a paginii: e o animatie fixa de 3,25 secunde.
Capcane
- Tabul ascuns nu misca nimic (cadrele sunt oprite). Verificarea s-a facut cu
__rlvIntro.progress(1)pe pagina live si intr-o copie locala in Playwright, cu fontul descarcat local (de acolo e si miniatura 1920×1080). - Site-ul are o verificare anti-bot: Playwright din container primeste pagina „Checking your browser”, deci pagina live se verifica doar in Chrome.
Pasi de reproducere
- Redimensioneaza si redenumeste pozele (prefix
rlv-), urca-le intr-un zip in base64 princreate-upload-link, cu md5 verificat la destinatie. - Pune markup-ul intr-un
div.rlv, scopeaza CSS-ul sub.rlv, converteste rem in px, adaugawidth: 100%pe radacina. - Aplatizeaza modulul intr-un IIFE:
import-urile dispar (gsap si SplitText sunt globale), CustomEase se incarca din jsdelivr; porneste dupa font. - Scrie arborele cu
wp_slash()si semnatura, verifica md5 la citire, regenereaza CSS-ul Bricks, goleste cache-ul LiteSpeed. - Verifica: contorul la 99, cele 6 poze incarcate, fundalul ridicat, 6 randuri de text, zero overflow la latime mare si la 390px.