Karkas · primitive
Parallaks qatlamlar
Sahifa aylantirilganda qatlamlar turli tezlikda siljiydi (Aceternity Parallax Scroll va Hero Parallax): har [data-fx-parallax] element öz tezligida — slow, standart, fast yoki reverse (teskari). data-axis="x" — gorizontal qatorlar (qöşni qatorlar teskari yönalişda sirpanadi). JS'siz: scroll-driven animatsiya (animation-timeline: view()), şuning uçun asosiy oqimni band qilmaydi. Siljiş masofasi --fx-motion-shift-lg tokenidan; harakat kamaytirilsa, data-fx-motion="none" yoki brauzer qöllamasa — qatlamlar joyida turadi. .fx-parallax — çetidan çiqqanini kesuvçi konteyner.
Samarqand Grand
Tong maktabi
Zarafşon Tekstil
Mehr klinikasi
Boğ kafe
Navoiy kitob
Mehr klinikasi
Boğ kafe
Navoiy kitob
Samarqand Grand
Tong maktabi
Zarafşon Tekstil
Samarqand Grand
Tong maktabi
Zarafşon Tekstil
Tong maktabi
Zarafşon Tekstil
Mehr klinikasi
Zarafşon Tekstil
Mehr klinikasi
Boğ kafe
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-fx-parallax | slow 0,5×fast 2×reverse teskari yönaliş | normal |
data-axis | yx gorizontal, masofa kattaroq | y |
Anatomiya
- layer
[data-fx-parallax]şart - container
.fx-parallaxixtiyoriy - row
.fx-parallax__rowixtiyoriy
Klaviatura va kiriş
Faqat köriniş: DOM tartibi, fokus va ekran öquvçi özgarmaydi. prefers-reduced-motion va data-fx-motion="none"da siljiş yöq. Gorizontal qatorlar konteynerda kesiladi — kesilgan kartalar havola bölsa, ular fokusda körinmay qolişi mumkin: lentadagi kartalarni bezak sifatida işlating yoki röyxatni boşqa joyda ham bering.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Landing hero ostidagi loyihalar lentasi (Hero Parallax).
- Rasm galereyasi ustunlari turli tezlikda — çuqurlik hissi.
Işlatmang
- Blok körinişga kirganda bir marta paydo bölişi →
motion - Logotiplar uzluksiz aylanişi →
marquee - Matn abzatslarini parallaks qilmang — öqiş qiyinlaşadi; faqat rasm, karta va bezak qatlamlari.
- Bitta ekranda uçtadan ortiq tezlik işlatmang — tartibsiz körinadi.
- Muhim tugma yoki formani siljiydigan qatlamga qöymang.
npx foxui add parallax
<section class="fx-parallax" aria-label="Loyihalar lentasi" style="display:grid;gap:var(--fx-space-4);padding-block:var(--fx-space-8)"> <div class="fx-parallax__row" data-fx-parallax data-axis="x"><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-blue-subtle), var(--fx-bg-category-purple))"><strong>Samarqand Grand</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-green-subtle), var(--fx-bg-category-blue))"><strong>Tong maktabi</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-coral-subtle), var(--fx-bg-category-yellow))"><strong>Zarafşon Tekstil</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-pink-subtle), var(--fx-bg-category-purple))"><strong>Mehr klinikasi</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-yellow-subtle), var(--fx-bg-category-green))"><strong>Boğ kafe</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-purple-subtle), var(--fx-bg-category-pink))"><strong>Navoiy kitob</strong></div></div> <div class="fx-parallax__row" data-fx-parallax="reverse" data-axis="x"><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-pink-subtle), var(--fx-bg-category-purple))"><strong>Mehr klinikasi</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-yellow-subtle), var(--fx-bg-category-green))"><strong>Boğ kafe</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-purple-subtle), var(--fx-bg-category-pink))"><strong>Navoiy kitob</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-blue-subtle), var(--fx-bg-category-purple))"><strong>Samarqand Grand</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-green-subtle), var(--fx-bg-category-blue))"><strong>Tong maktabi</strong></div><div class="fx-card" style="inline-size:15rem;block-size:10rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-coral-subtle), var(--fx-bg-category-yellow))"><strong>Zarafşon Tekstil</strong></div></div> </section> <section class="fx-parallax" aria-label="Galereya" style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fx-space-4);padding-block:var(--fx-space-12);margin-block-start:var(--fx-space-6)"> <div data-fx-parallax="slow" style="display:grid;gap:var(--fx-space-4)"><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-blue-subtle), var(--fx-bg-category-purple))"><strong>Samarqand Grand</strong></div><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-green-subtle), var(--fx-bg-category-blue))"><strong>Tong maktabi</strong></div><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-coral-subtle), var(--fx-bg-category-yellow))"><strong>Zarafşon Tekstil</strong></div></div> <div data-fx-parallax="fast" style="display:grid;gap:var(--fx-space-4)"><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-green-subtle), var(--fx-bg-category-blue))"><strong>Tong maktabi</strong></div><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-coral-subtle), var(--fx-bg-category-yellow))"><strong>Zarafşon Tekstil</strong></div><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-pink-subtle), var(--fx-bg-category-purple))"><strong>Mehr klinikasi</strong></div></div> <div data-fx-parallax="reverse" style="display:grid;gap:var(--fx-space-4)"><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-coral-subtle), var(--fx-bg-category-yellow))"><strong>Zarafşon Tekstil</strong></div><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-pink-subtle), var(--fx-bg-category-purple))"><strong>Mehr klinikasi</strong></div><div class="fx-card" style="block-size:12rem;padding:var(--fx-space-4);display:flex;align-items:end;background:linear-gradient(150deg, var(--fx-bg-category-yellow-subtle), var(--fx-bg-category-green))"><strong>Boğ kafe</strong></div></div> </section>
Tokenlar: --fx-motion-shift-lg --fx-space-4
Şu toifadan
AkkordeonYiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi.Maqola sahifasiBlog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi).Kiriş sahifasiKiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split).Bento törLanding xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense).Bleed (manfiy çet)Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi.Blog röyxatiBlog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination).