Opens in a new tab

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 @import pe primul rand din cssCode.
  • Sase fotografii 800×1000 (sursa avea 2400×3000, 6 MB; redimensionate la 590 KB in total), redenumite rlv-img1..6.jpg, plus sigla rlv-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-h 1.65rem → 26.4px.

Cum e construit in Bricks

O sectiune, doua elemente Code. Markup 2 KB, CSS 5 KB, JS 6 KB.

  • Sectiunea: _padding 0, _width: 100%. Elementul Realevate (Codegrid) - intro + hero: noRoot, executeCode, language: html, signature => wp_hash($code).
  • Radacina e un div.rlv din markup, iar body-ul primeste alta clasa, rlv-page (doar fundalul alb). Asa selectorii .rlv nav, .rlv p nu 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 ca window.__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

  1. Redimensioneaza si redenumeste pozele (prefix rlv-), urca-le intr-un zip in base64 prin create-upload-link, cu md5 verificat la destinatie.
  2. Pune markup-ul intr-un div.rlv, scopeaza CSS-ul sub .rlv, converteste rem in px, adauga width: 100% pe radacina.
  3. Aplatizeaza modulul intr-un IIFE: import-urile dispar (gsap si SplitText sunt globale), CustomEase se incarca din jsdelivr; porneste dupa font.
  4. Scrie arborele cu wp_slash() si semnatura, verifica md5 la citire, regenereaza CSS-ul Bricks, goleste cache-ul LiteSpeed.
  5. Verifica: contorul la 99, cele 6 poze incarcate, fundalul ridicat, 6 randuri de text, zero overflow la latime mare si la 390px.