Karkas · pattern
Yopişqoq scroll hikoyasi
Mahsulot qanday işlaşini bosqiçma-bosqiç körsatadi (Aceternity Sticky Scroll Reveal): çapda matn qadamlari oddiy oqimda, öngda media yopişib turadi va köriniş markazidagi qadamga mos panel blur-fade bilan almaşadi. Faol qadam töq, çap çiziqda brend bölagi ösadi; qolganlari xira. Qadamlar va panellar tartib böyiça juftlanadi (yoki step[data-panel] = panel id). Tor joyda (telefon) media tepada yopişadi, qadamlar uning ostidan ötadi. data-media="start" — media çapda. Hodisa: fx-scrollstory-change. JS bölmasa — birinçi panel va töliq matn.
1-qadam
Örnating
Bitta buyruq loyihangizga tokenlar, komponentlar va qoidalarni qöşadi. Heç qanday Figma fayli kerak emas.
2-qadam
Mavzuni tanlang
Sakkiz rang kutubxonasidan brendingizga eng yaqinini tanlang — qolgan hamma ranglar özi moslaşadi.
3-qadam
Komponent qöşing
Narx jadvali, CRM kartasi yoki kalendar — har biri tayyor misol, holatlar va klaviatura bilan keladi.
4-qadam
Yangilanişni oling
Yangi versiya taklif bölib keladi: nima özgarganini körasiz va bitta buyruq bilan olasiz.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-media | end media öngdastart media çapda | end |
Anatomiya
- root
.fx-scrollstoryşart - steps
.fx-scrollstory__stepsşart - step
.fx-scrollstory__stepşart - kicker
.fx-scrollstory__kickerixtiyoriy - title
.fx-scrollstory__titleixtiyoriy - text
.fx-scrollstory__textixtiyoriy - media
.fx-scrollstory__mediaşart - panel
.fx-scrollstory__panelşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Qadam içidagi havolaga ötsa — qadam faollaşadi |
Qadamlar — tartibli röyxat (ol), faol qadamda aria-current="step". Panellar bezak bölsa media aria-hidden; interaktiv bölsa — faol bölmagan panellar inert (fokus ularga tuşmaydi). Qadam içidagi havola yoki elementga Tab bilan kelinsa, öşa qadam faollaşadi. Scroll hodisasi tinglanmaydi (IntersectionObserver). Harakat kamaytirilsa almaşiş darhol.
Kod
AI uçun: qaçon işlatiladi
- Landing: «Qanday işlaydi» — 3–5 qadam, har biriga skrinşot yoki namuna.
- Hujjat yoki onboarding sahifasida jarayonni tuşuntiriş.
- Foydalanuvçi bosib ötadigan qadamlar (forma) →
wizard - Xususiyatlar röyxati (hikoyasiz) →
features - Muhim ma'lumotni faqat panelga qöymang — matn qadamda ham bölsin (panel bezak yoki tasvir).
- 6 tadan ortiq qadam qilmang — öquvçi çarçaydi; uzun hikoya — alohida sahifa.
- Ilova içida işlatmang — bu landing va hujjat sahifasi uçun.
npx foxui add scrollstory
<section class="fx-scrollstory" data-fx-scrollstory aria-label="FoxUI qanday işlaydi">
<ol class="fx-scrollstory__steps">
<li class="fx-scrollstory__step"><p class="fx-scrollstory__kicker">1-qadam</p><h3 class="fx-scrollstory__title">Örnating</h3><p class="fx-scrollstory__text">Bitta buyruq loyihangizga tokenlar, komponentlar va qoidalarni qöşadi. Heç qanday Figma fayli kerak emas.</p></li>
<li class="fx-scrollstory__step"><p class="fx-scrollstory__kicker">2-qadam</p><h3 class="fx-scrollstory__title">Mavzuni tanlang</h3><p class="fx-scrollstory__text">Sakkiz rang kutubxonasidan brendingizga eng yaqinini tanlang — qolgan hamma ranglar özi moslaşadi.</p></li>
<li class="fx-scrollstory__step"><p class="fx-scrollstory__kicker">3-qadam</p><h3 class="fx-scrollstory__title">Komponent qöşing</h3><p class="fx-scrollstory__text">Narx jadvali, CRM kartasi yoki kalendar — har biri tayyor misol, holatlar va klaviatura bilan keladi.</p></li>
<li class="fx-scrollstory__step"><p class="fx-scrollstory__kicker">4-qadam</p><h3 class="fx-scrollstory__title">Yangilanişni oling</h3><p class="fx-scrollstory__text">Yangi versiya taklif bölib keladi: nima özgarganini körasiz va bitta buyruq bilan olasiz.</p></li>
</ol>
<div class="fx-scrollstory__media" aria-hidden="true">
<div class="fx-scrollstory__panel" style="display:grid;place-content:center;gap:var(--fx-space-3);padding:var(--fx-space-6);background:var(--fx-bg-overlay);color:var(--fx-bg-static-light);font-family:var(--fx-font-family-mono);font-size:var(--fx-font-size-sm)"><span>$ npx foxui init</span><span style="opacity:.7">✓ tokens.css · 212 komponent · AGENTS.md</span></div>
<div class="fx-scrollstory__panel" style="display:grid;place-content:center;gap:var(--fx-space-3);padding:var(--fx-space-6);grid-template-columns:repeat(4,var(--fx-space-12))"><span style="aspect-ratio:1;border-radius:var(--fx-radius-control);background:var(--fx-bg-category-blue)"></span><span style="aspect-ratio:1;border-radius:var(--fx-radius-control);background:var(--fx-bg-category-green)"></span><span style="aspect-ratio:1;border-radius:var(--fx-radius-control);background:var(--fx-bg-category-coral)"></span><span style="aspect-ratio:1;border-radius:var(--fx-radius-control);background:var(--fx-bg-category-purple)"></span></div>
<div class="fx-scrollstory__panel" style="display:grid;place-content:center;gap:var(--fx-space-3);padding:var(--fx-space-6)"><div class="fx-card" style="min-inline-size:16rem"><span class="fx-badge" data-tone="brand" style="justify-self:start">Ommabop</span><h4 class="fx-card__title">Jamoa</h4><p class="fx-card__text">490 000 söm / oy</p></div></div>
<div class="fx-scrollstory__panel" style="display:grid;place-content:center;gap:var(--fx-space-3);padding:var(--fx-space-6);font-family:var(--fx-font-family-mono);font-size:var(--fx-font-size-sm)"><strong style="font-size:var(--fx-font-size-xl)">0.28.0 → 0.29.0</strong><span>+ 20 effekt · 3 tuzatiş</span><span style="color:var(--fx-text-secondary)">npx foxui update</span></div>
</div>
</section>Tokenlar: --fx-bg-brand-solid --fx-bg-subtle --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-emphasized --fx-ease-standard --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-knob-motion --fx-line-height-tight --fx-motion-base --fx-motion-scale-enter --fx-motion-slow --fx-radius-surface --fx-shadow-md --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary