Opens in a new tab

Retete de reproducere

Ce tine acest site din fiecare prototip GSAP si cum il refaci pe alt site prin Novamira. Fiecare pagina de mai jos are reteta scurta; codul complet sta in bundle-ul JSON si in arhiva sursei, ambele linkate acolo. Dupa ce stergi folderele din Drive, asta ramane singura sursa.

Ce cere orice portare pe un site nou

  • WordPress cu Bricks Builder (aici 2.4.2) si Novamira activ, pentru novamira/execute-php.
  • GSAP 3.13 + ScrollTrigger (si SplitText, ScrollSmoother, Observer, MotionPathPlugin) incarcate O SINGURA DATA, din Bricks → Settings → Custom Code → Header Scripts. Nu le pune si in pagina.
  • Tiparul casei: o sectiune + un element Code cu code (markup, cere signature => wp_hash($code)), cssCode, javascriptCode, noRoot => true, executeCode => true. La final \Bricks\Breakpoints::regenerate_bricks_css_files().
  • Campul code este evaluat ca PHP — verifica sa nu contina <? inainte sa il scrii.
  • .brxe-block este display:flex; flex-direction:column; align-items:flex-start; width:100%. Orice CSS portat care se baza pe div-uri block-level trebuie corectat explicit.
  • Header-ul si footer-ul se dezactiveaza din setarile de pagina: headerDisabled si footerDisabled (Page settings → General → Disable header / Disable footer). Linden, Clares si Studio Monet le ascund inca printr-o clasa pe body plus CSS — merge, dar setarea nativa e mai simpla si mai usor de intretinut.
  • Librariile care nu sunt GSAP se incarca cu import() dinamic dintr-un script clasic (Bricks nu permite type="module" si nici import map).

Baza rem a temei de aici este 62.5% (1rem = 10px), asa ca tot CSS-ul portat e scris in px. Pe alt site masoara getComputedStyle(document.documentElement).fontSize inainte sa te increzi in scala tipografica.

Ce e arhivat pe site

Opis — ce avem si pentru ce se potriveste (pagina de start)
Toate paginile de pe site, cu ce face fiecare si pentru ce tip de client ar merge. Cautare, filtru pe tip (efect, o pagina, site intreg) si pe eticheta (cofetarie/HoReCa, portofoliu, produs, imobiliare, turism…). Tot acolo sunt marcate paginile care depind de resurse externe.

Compatibilitate — ce se poate pune pe acelasi site
Aceleasi pagini, dar grupate dupa cu ce animeaza: nativ, GSAP, Lenis, ScrollSmoother, Three.js. Spune care se combina intre ele si care se exclud, plus ce e incarcat global pe site.

Bundle-uri Bricks (arborele de elemente + CSS + JS + setarile de pagina + lista media, gata de importat):
linden.json · clares.json · studio-monet.json

Media
Toate imaginile si clipurile fiecarui proiect sunt in biblioteca media a acestui site, deja optimizate si redenumite. Inclusiv cele 25 de imagini pentru Kendal (kendal-p0N-0N.jpg), desi pagina nu e construita — asa ca sursa din Drive se poate sterge.

Arhive sursa (prototipul original, fara .git / node_modules / media):
src-linden.zip · src-clares.zip · src-studio-monet.zip · src-kendal.zip · src-paul-hamilton.zip · src-casa-alba.zip · src-kate-monroe.zip · src-sommers.zip · src-studio-burnett.zip · src-maya-hays.zip · src-the-weekly-update.zip

Cum folosesti un bundle

  1. Urci pe site-ul nou fisierele media din sectiunea media a bundle-ului (linkurile sunt catre copiile de aici).
  2. Creezi pagina, apoi scrii elements in _bricks_page_content_2 si page_settings in _bricks_page_settings, cu _bricks_editor_mode = bricks.
  3. Regenerezi semnatura: signature => wp_hash($code) pentru fiecare element Code — semnatura veche nu e valida pe alt site (alte saluri).
  4. Inlocuiesti calea catre uploads in javascriptCode (constanta BASE sau src-urile) cu cea a site-ului nou.
  5. Rulezi \Bricks\Breakpoints::regenerate_bricks_css_files().