# 07 Átalakuló felület és oldalátmenetek | Astro Dizájn Elemek > Folytonos kezelőfelület: Kártyából valódi oldalra nyíló átmenet, FLIP rács-átrendeződés, helyben nyíló részletpanel és elemáthelyezés. *Source: https://airanking.pro/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet* --- [Autonóm Weboldal](/autonom-weboldal) / [✦ Astro Dizájn Elemek (12)](/autonom-weboldal/astro-dizajn-elemek) [← 06](/autonom-weboldal/astro-dizajn-elemek/06-terbeli-termek)[12](/autonom-weboldal/astro-dizajn-elemek)[08 →](/autonom-weboldal/astro-dizajn-elemek/08-reagalo-karakter) [01Morphing](/autonom-weboldal/astro-dizajn-elemek/01-morphing)[02Kamera & Tér](/autonom-weboldal/astro-dizajn-elemek/02-kamera-es-ter)[03Anyagok & Fény](/autonom-weboldal/astro-dizajn-elemek/03-anyagok-es-feny)[04Tartalomfeltárás](/autonom-weboldal/astro-dizajn-elemek/04-tartalomfeltaras)[05Tipográfia](/autonom-weboldal/astro-dizajn-elemek/05-mozgo-tipografia)[06Termék 3D](/autonom-weboldal/astro-dizajn-elemek/06-terbeli-termek)[07UI & Átmenetek](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet)[08Karakter & Állapot](/autonom-weboldal/astro-dizajn-elemek/08-reagalo-karakter)[09Röntgen-látás](/autonom-weboldal/astro-dizajn-elemek/09-rontgen-latas)[10Élő Kalkulátor](/autonom-weboldal/astro-dizajn-elemek/10-elo-adat-es-kalkulator)[11Bento & Tér](/autonom-weboldal/astro-dizajn-elemek/11-bento-es-gorgetesi-ter)[12Mikro-UI & Hang](/autonom-weboldal/astro-dizajn-elemek/12-magneses-mikrointerakciok) 07 / 12 · Élő Bemutató 1. lépcső · CSS/SVG (Nulla blokkoló script) Portfóliók · Ingatlan & Autó kínálat · Webshopok # Átalakuló kezelőfelület és oldalátmenetek Kártyából valódi részletoldalra nyíló View Transition, FLIP-alapú szűrés és rács/lista váltás, helyben nyíló panel és elemáthelyezés. [PRJ-01Építészet · 2026 #### Északi Üvegpavilon Konzolos acélkeret és háromrétegű hőszigetelt üveghomlokzat a domboldal természetes lejtésére ültetve. Részletes bemutató megnyitása →](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet/eszaki-uvegpavilon)[PRJ-02Építészet · 2025 #### Kortárs Átrium Irodaház Ötszintes belső zöldátrium és lamellás árnyékolórendszer természetes szellőzéssel. Részletes bemutató megnyitása →](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet/kortars-atrium-irodahaz)[PRJ-03Belsőépítészet · 2026 #### Minimalista Loft Művészlakás Ipari téglafalak, monolit betonpadló és egyedi szálcsiszolt acél bútorok egykori gépgyárban. Részletes bemutató megnyitása →](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet/minimalista-loft-muveszlakas)[PRJ-04Belsőépítészet · 2025 #### Skandináv Fa Kávézóbelső Hajlított kőris és natúr tölgy akusztikai lamellák meleg, rétegelt stúdióvilágítással. Részletes bemutató megnyitása →](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet/skandinav-fa-kavezobelso)[PRJ-05Ipari forma · 2026 #### Ergonomikus Irodai Székcsalád Aktív gerinctámasztó mechanika és 100%-ban újrahasznosított óceáni polimer váz. Részletes bemutató megnyitása →](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet/ergonomikus-irodai-szekcsalad)[PRJ-06Ipari forma · 2025 #### Moduláris Akusztikai Panelrendszer Mágnesesen rögzíthető hexagonális panelek beépített rejtett ambient LED világítással. Részletes bemutató megnyitása →](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet/modularis-akusztikai-panelrendszer) Navigáció: **Kattints bármelyik kártyára** a valódi Astro SSR részletoldal megnyitásához! ### A. Kártyából valódi projektoldal Nem egy becsukódó modal, hanem valódi, indexelhető, egyedi URL-lel rendelkező Astro-oldalak. A böngészős Vissza gomb pontosan a korábbi nézethez tér vissza. **Ügyfélkör:** Építészek, ingatlanfejlesztők, referencia- és esettanulmány oldalak. **Előny:** Közvetlenül megosztható linkek, zéró adatvesztés frissítéskor. ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó Logó 🖼️ 🖼️ Projektkép feltöltése Kép Építészet · 2026 #### Északi Üvegpavilon Konzolos acélkeret és háromrétegű hőszigetelt üveghomlokzat a domboldal természetes lejtésére ültetve. Építészet · 2025 #### Kortárs Átrium Irodaház Ötszintes belső zöldátrium és lamellás árnyékolórendszer természetes szellőzéssel. Belsőépítészet · 2026 #### Minimalista Loft Művészlakás Ipari téglafalak, monolit betonpadló és egyedi szálcsiszolt acél bútorok egykori gépgyárban. Belsőépítészet · 2025 #### Skandináv Fa Kávézóbelső Hajlított kőris és natúr tölgy akusztikai lamellák meleg, rétegelt stúdióvilágítással. Ipari forma · 2026 #### Ergonomikus Irodai Székcsalád Aktív gerinctámasztó mechanika és 100%-ban újrahasznosított óceáni polimer váz. Ipari forma · 2025 #### Moduláris Akusztikai Panelrendszer Mágnesesen rögzíthető hexagonális panelek beépített rejtett ambient LED világítással. Elrendezés: **Rácsnézet (Mind a 6 projekt látható)** · FLIP animációval ### B. Rács átrendeződése (FLIP) Szűréskor vagy nézetváltáskor az elemek nem eltűnnek és újraépülnek, hanem finoman átcsúsznak az új helyükre. Zéró villódzás, 60 FPS garantált sebesség. **Technika:** FLIP (First, Last, Invert, Play) technika natív Web Animations API-val. PREVIEW KÁRTYA #### AIRanking.pro Tanácsadás Autonóm AI-láthatósági audit és stratégiai optimalizáció KIBONTOTT TELJES PANEL ### AIRanking.pro Tanácsadás Autonóm AI-láthatósági audit és stratégiai optimalizáció **Feltárási idő:** 2-3 munkanap **Kimenet:** Strukturált JSON-LD + LLM Readiness **Platformok:** ChatGPT, Perplexity, Gemini, Claude **Eredmény:** Garantált entitás-felismerés Állapot: **Kompakt kártyanézet** ### C. Kártyából nyíló részletpanel Nem ugrik fel egy tolakodó felugró ablak. A kártya maga tágul ki a meglévő elrendezésben, megőrizve a látogató kontextusát. **Előny:** Mobilon nem téved el a felhasználó, nem takarja ki a képernyőt egy merev modal. Választható modulok 01 Morphing Hero 02 2.5D Parallax 03 3D Anyagok & Fény Kiválasztott tételek Még nincs kiválasztott tétel Kiválasztva: **0 modul** · Folyamatos FLIP átrepüléssel ### D. Kiválasztott elem áthelyezése Amikor a látogató kosárba vagy ajánlatba tesz egy elemet, az nem egy unalmas számlálóban jelenik meg, hanem fizikailag átúszik a bal oldalról az összefoglaló dobozba. **Tervezői érték:** Látványossá teszi a döntést és megerősíti a látogatóban az értékteremtést. TÁRGYALÁSI DEMÓ Összehasonlítás: Statikus újratöltődő oldalak vs. Folytonos Astro Oldalátmenetek AIRanking.pro ## Alkalmazásszerű folyamatosság a weboldalon Nincs többé idegesítő fehér villanás két aloldal között. Az Astro natív View Transitions motorjával a kártyák, címek és képek simán átúsznak a következő oldalra, mintha natív iOS vagy Android appban járna a látogató. [Fő demók megtekintése (01, 03, 06) →](/autonom-weboldal/astro-dizajn-elemek/01-morphing) ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó Logó 🖼️ 🖼️ Kiemelt kép Kép Hagyományos sablon lapváltás Minden kattintásnál újratöltődik a teljes oldal, elvész a görgetési állapot és a figyelem. VIEW TRANSITION ELŐNÉZET **A07 · PREVIEW** #### AIRanking.pro Kattints az A fülön bármelyik projektre a valódi SSR oldalátmenet átéléséhez! 👆 6 független indexelt aloldal folytonos átmenettel ⚙️ **Hogyan működik? & Technikai adatok** 1. Szint · Statikus CSS/SVG Grafikai motor **FLIP animációs technika (First, Last, Invert, Play) és Astro View Transitions** Eszköz DPR korlát **Math.min(DPR, 2)** Életciklus védelem **Rejtett lapon automatikusan leáll** Hozzáférhetőség **prefers-reduced-motion támogatott** Web Animations API alapú FLIP (First-Last-Invert-Play) koordináta-újraszámítás a rácselemek átrendeződésekor, valódi SSR oldallekéréssel kombinálva. Zéró villódzás és zéró külső könyvtár. Becsült ráta: **--** FPS (Helyi mérés, eszközfüggő) ✦ Ügyfél-Márka Stúdió ## Személyre Szabás Tárgyaláshoz Márkapreset kiválasztása: Cégnév / Márkanév: Rövid ajánlat / Főcím: CTA Gomb felirat: Márkaszínek: Főszín (Elsődleges): Akcentszín (Másodlagos): Ügyfél Logó feltöltése (PNG, SVG, WebP · max 8 MB): 📁 Húzd ide a logófájlt, vagy **kattints a tallózáshoz** Transzparens PNG vagy tiszta SVG ajánlott Logó-kontraszt párna (fehér/sötét logókhoz): Termék- vagy Referenciakép (max 8 MB): 🖼️ Húzd ide a referenciaképet vagy termékfotót Használható a 01, 03, 04, 06, 07 és 11 modulokban Másodlagos / „Előtte” Képfeltöltés (pl. összehasonlításhoz · max 8 MB): 🖼️ Húzd ide az „Előtte” képet vagy másodlagos referenciát Használható a 03 és 04 modulokban az összehasonlító és folyékony átmenetekhez **Színek javaslata a feltöltött képből:** Kiolvastuk a domináns márkaszíneket a grafikából. **Megjegyzés ezen az eszközön** Alapértelmezésben a beállítások csak a jelenlegi böngészőlap bezárásáig élnek. 🔒 **100% Helyi adatvédelem:** A kiválasztott fájlok és márkanevek feldolgozása helyben, ebben a böngészőben történik; a bemutatóterem nem tölti fel őket szerverre és nem küldi analitikának. TÁRGYALÁSI KONCEPCIÓ ## Kiválasztott Elemek 0 db ☆ ### Még nincs kiválasztott dizájnelem Bármelyik modulban kattints a **„☆ Hozzáadás a koncepcióhoz”** gombra a kedvenc megoldások és beállított csúszkaértékek elmentéséhez! 🔒 Helyi exportálás: a fájlok nem mennek szerverre vagy CRM-be. ⛶ MOZIMÓD Élő Színpad