# 04 Tartalomfeltárás és maszkolás | Astro Dizájn Elemek

> Öt feltáró effektus: Előtte/utána csúszka, fényfoltos fókusz, letörölhető kaparós felület, táguló ablak és strukturált adatnézet.


*Source: https://airanking.pro/autonom-weboldal/astro-dizajn-elemek/04-tartalomfeltaras*

---

[Autonóm Weboldal](/autonom-weboldal) / [✦ Astro Dizájn Elemek (12)](/autonom-weboldal/astro-dizajn-elemek) [← 03](/autonom-weboldal/astro-dizajn-elemek/03-anyagok-es-feny)[12](/autonom-weboldal/astro-dizajn-elemek)[05 →](/autonom-weboldal/astro-dizajn-elemek/05-mozgo-tipografia) [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) 04 / 12 · Élő Bemutató 2. lépcső · Canvas/JS Sziget Felújítás & Tisztítás · Esztétika · Szakmai B2B

# Feltárás, maszkolás és összehasonlítás

Előtte/utána csúszka, fényfoltos felfedés, letörölhető felszín valós területméréssel, táguló ablak és strukturált adatnézet.

 **UTÁNA · KORSZERŰ KIVITELEZÉS** Prémium anyagok, rejtett világítás, korszerű technológia UTÁNA **ELŐTTE · EREDETI ÁLLAPOT** Elavult burkolat, repedezett felület, korábbi állapot ELŐTTE ◀ ▶ Pozíció: **50% (Fele-fele)** · Egérrel, billentyűzettel vagy érintéssel húzható

### A. Előtte/utána csúszka

Azonos nézőpontú felújítási vagy termékállapot közvetlen összevetése. A látogató a kezébe kapja az irányítást, és önállóan fedi fel a minőségi ugrást.

 **Ügyfélkör:** Építőipar, tető- és homlokzattisztítás (DRB), fogászat, plasztika. **Akadálymentesség:** Natív range csúszka billentyűzetes nyilakkal is teljes értékű. ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ „Utána / Fő” kép Kép 🖼️ 🖼️ „Előtte” kép Előtte kép **REJTETT ÉPÍTÉSZETI RÉSZLET** Mozgasd az egeret a feltáráshoz Fókusz: **Mozgasd a kurzort a dobozon**

### B. Fényfoltos feltárás (Spotlight)

Sötétített felületen egy virtuális zseblámpa fénye kíséri a kurzort vagy ujjat. Kíváncsiságot ébreszt, és fókuszálja a figyelmet a kiemelt funkciókra.

 **Ügyfélkör:** Művészeti galériák, luxusórák, biztonságtechnikai auditok. **Technika:** CSS `radial-gradient` maszkkal követett koordináták. ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Reflektorfény kép Kép Fényfolt átmérője: 120px NYERTES KUPONKÓD **AIRANKING-VIP-2026**

100%-os ingyenes AI-láthatósági audit a vállalkozásodnak

 Letörölt felület: **0%** · Húzd az egeret a lekaparáshoz

### C. Letörölhető felszín (Scratch)

Sorsjegyszerű interakció: az egér vagy érintés nyomvonalán eltűnik az ezüstfedő réteg, felfedve a mögöttes meglepetést vagy kedvezményt.

 **Ügyfélkör:** E-kereskedelem, rendezvény promóciók, lead-mágnesek. **Technika:** 2D Canvas `destination-out` kompozitálás. ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Kupon háttérkép Kép **KIBONTOTT TELJES NÉZET** Kattintásra vagy görgetésre táguló ablak Ablak mérete: **Kompakt (30%)**

### D. Táguló maszkablak

Egy kis, fókuszált nyílásból a képernyő középpontjából kinyíló teljes látvány. Ideális esettanulmányok és kiemelt referenciák indítására.

 ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Maszkablak kép Kép PRO-SERVICE KFT. ★ 4.9 (128 vélemény)

#### Ipari és Lakossági Mérnöki Megoldások

Központi iroda: 1054 Budapest, Szabadság tér 7. Szakterület: Épületdiagnosztika, hőszivattyús rendszerek és GEO optimalizálás.

 Ügyfélszolgálat: H-P 8:00–17:00 +36 1 234 5678 { "@context": "https://schema.org", "@type": "LocalBusiness" }

`{
 " name ": " PRO-SERVICE KFT. ",
 " aggregateRating ": {
 " ratingValue ": 4.9 ,
 " reviewCount ": 128
 },
 " address ": {
 " streetAddress ": " Szabadság tér 7. ",
 " addressLocality ": " Budapest "
 },
 " aiReadinessScore ": "100% (Aura Validated)"
}` Nézet: **Emberi látogató nézete**

### E. Amit a látogató lát vs. Strukturált adat

 Szemlélteti a különbséget aközött, amit a látogató a szemével lát, és amit az AI-keresők (ChatGPT, Perplexity, Gemini) a háttérben strukturált JSON-LD entitásként feldolgoznak.

 Kötelező jelölés: Szemléltető ábra — nem valódi audit, hanem a két világ kapcsolatát bemutató vizuális analógia. TÁRGYALÁSI DEMÓ Összehasonlítás: Statikus előtte/utána képpár vs. Interaktív Csúszka AIRanking.pro

## Kézzel fogható eredmények & Látványos feltárás

Az ügyfél egyetlen pillanat alatt átéli a munka értékét, amikor saját kezével húzza el az előtte/utána választóvonalat. Nem kell hinnie a szavaknak: látja a különbséget.

 [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ó feltöltése Logó 🖼️ 🖼️ „Utána” kép feltöltése Kép 🖼️ 🖼️ „Előtte” kép feltöltése Előtte kép Hagyományos statikus egymás mellé tétel Két külön képkocka. Nincs közös nézőpont, nincs közvetlen vizuális élmény. 👆 Húzd a csúszkát az előtte/utána hatás összevetéséhez ⚙️ **Hogyan működik? & Technikai adatok** 1. Szint · Statikus CSS/SVG Grafikai motor **CSS clip-path: inset() és radial-gradient maszkolás, Canvas 2D kaparós felület** 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**

Hardveresen gyorsított CSS clip-path és mix-blend-mode maszkolási technikák. A Before/After csúszka natív HTML5 range input alapú és teljes billentyűzetes akadálymentesítést biztosít (WCAG AA). 0 KB 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