Saytdagi animatsiya — bu sahifa elementlarining harakati: aylantirganda bloklarning paydo boʻlishi, parallaks, tugmaning kursor olib borilganda va bosilganda javob berishi, 3D-sahnalar va oʻrnatilgan videolar. Yaxshi animatsiya mahsulotni tushuntiradi va qayerni bosishni koʻrsatib beradi. Yomoni maketni siljitadi, arzon telefonni sekinlashtiradi va oʻchmaydi. Oʻzingizni uchta savol bilan tekshirishingiz mumkin: bu effekt nimani tushuntiradi, sahifaga qanday yuk beradi va telefonida «harakatni kamaytirish» yoqilgan odam nimani koʻradi.
Saytdagi animatsiya qanday ataladi
TT yozayotganda yoki misollar qidirayotganda nomlarini bilish qulay. Mana asosiylari.
| Nomi | Bu nima | Qayerda oʻrinli |
|---|---|---|
| Parallaks | aylantirganda yoki kursor ortidan qatlamlar turli tezlikda harakatlanadi va tekis sahifada chuqurlik paydo boʻladi | birinchi ekran, mahsulot haqidagi hikoya |
| Skroll-animatsiya | animatsiya aylantirishga bogʻlangan: siz sahifani varaqlayotganda sahna oʻzgaradi. CSSda buning uchun scroll-driven animations bor — animatsiya vaqt boʻyicha emas, aylantirish shkalasi boʻyicha boradi | jarayonni qadamma-qadam tushuntirish |
| Aylantirganda paydo boʻlish (reveal) | nigoh yetib borganda bloklar va qatorlar ekranga kiradi | uzun sahifalar |
| Mikrointeraksiyalar | harakatga qisqa javob: tugma bosildi, forma yuborildi, mahsulot savatga tushdi | formalar, savat, almashtirgichlar |
| Hover | kursor olib borilgandagi effekt. Telefonda kursor yoʻq, shuning uchun muhim narsani hoverga yashirib boʻlmaydi | kartochkalar, havolalar, menyu |
| Loader (preloader) | sahifa yuklanayotganda yuklanish indikatori yoki zastavka | faqat kutish muqarrar boʻlsa |
| Lottie | dizayner After Effectsda yaratadigan, Lottie kutubxonasi esa saytda JSON-fayldan ijro etadigan vektor animatsiya | ikonkalar, illyustratsiyalar |
| 3D va WebGL | brauzerdagi hajmli sahna: 3Ddagi CSS-transformatsiyalar yoki WebGL — plaginlarsiz 3D-grafika uchun API | mahsulotni koʻrsatish, interaktiv sahna |
| Kinetik tipografika | harflar va soʻzlar qalinligi, oʻlchami yoki joylashuvini oʻzgartiradi | sarlavha, asosiy tezis |
«Saytdagi interaktiv animatsiya» — odamning harakatiga javob beradigan hamma narsa: kursorga, teginishga, sudrashga, aylantirishga. Shunchaki ijro etiladigan video interaktiv hisoblanmaydi.
Misollar: sahifalarimizda nima qilingan
Biz boshqalarning saytlarini koʻrsatmaymiz. Quyida harakat animatsiya kutubxonalarisiz, kod bilan qilingan ikkita sahifamiz. Ularni maqola bilan yonma-yon oching.
«Sayt yaratish». Birinchi ekran — maket-qatlamlar toʻplami. Kompyuterda qatlamlar kursor ortidan har biri oʻz chuqurligiga siljiydi, aylantirganda esa turli tezlikda tarqaladi. Mana shu parallaks. Keyin «konveyerdagi sayt» sahnasi keladi: bir necha ekran balandligidagi blok, uning ichida siz varaqlayotganingizda joyida turadigan qadab qoʻyilgan sahna. Beshta stansiya — brif, karkas, dizayn, harakat, ishga tushirish — aylantirgan sari bir-birini almashtiradi, progress chizigʻi esa transform orqali choʻziladi. Past ekranda, masalan, gorizontal holatdagi telefonda, qadalgan sahna oʻrniga oddiy roʻyxat qoladi. Pastroqda — usullarning beshta jonli namunasi: parallaks, kartochkaning kursor ortidan 3D-qiyalanishi, jonli tipografika, kursorga tortiladigan tugma va aylantirganda qatorlarning paydo boʻlishi.
«Motion-dizayn». Birinchi ekranda — CSS-perspektivada yigʻilgan, oltita vertikal videomizdan iborat 3D-halqa. Halqa oʻzi sekin aylanadi, sahifa aylantirilganda qoʻshimcha buriladi, uni sichqoncha yoki barmoq bilan inersiya bilan tortish mumkin. Oldingi videoni bossangiz, u ovozi bilan toʻliq ochiladi. Pastroqda — «montaj stoli»: jarayonning beshta yoʻlakchasi va aylantirish bilan birga taymlayn boʻylab yuradigan kallak.
Sekinlashmasligi uchun bu qanday qilingan:
- Videolar faqat halqa ekranda boʻlganda yuklanadi. Videoda
preload="none"va poster turadi. Manba faqat halqa ekranga tushganda qoʻyiladi. Ovozsiz halqalar — 540×960, har biri 148 dan 886 KB gacha. Ovozli toʻliq versiya 1,4 dan 4,9 MB gacha va faqat bosilganda yuklanadi. - Faqat oldingi videolar ijro etiladi. Qolganlari posterda turadi va na tarmoqni, na batareyani sarflaydi.
- Kadr faqat sahna ekranda boʻlgandagina hisoblanadi. Aylantirish brauzerdan kadrni qayta hisoblashni soʻraydi, xolos. Hech narsa boʻlmasa, sahifa animatsiyani bekorga aylantirmaydi.
- Kursor effektlari faqat kursor bor joyda yoqiladi. Kod
(hover: hover) and (pointer: fine)ni tekshiradi, shuning uchun telefonda kartochkalar barmoq ortidan burilmaydi. - «Harakatni kamaytirish» yoqilganda hammasi turadi. Halqa oʻzi aylanmaydi, halqa-videolar ishga tushmaydi, yuguruvchi satr toʻxtaydi. Mazmun esa oʻsha-oʻsha: posterlar va bosganda koʻrish.
PageSpeed nimani koʻrsatdi
2026-yil 1-oktabrda sahifalarimizni PageSpeed Insightsda «Mobil» varagʻida tekshirdik. Bosh sahifa LCP 1,7 s bilan 100 dan 100 ball oldi. «Sayt yaratish» sahifasi — besh ekranlik qadalgan sahna, parallaks va usullarning jonli namunalari bilan — 100 dan 93, CLS 0,002, umumiy bloklash vaqti 40 ms. Xulosa oddiy: agar transform va opacity harakatlantirilsa, maket siljitilmasa va ekranda koʻrinmaydigan narsa ishga tushirilmasa, koʻp harakat va yuqori baho bir-biriga mos keladi.
Tildada animatsiya
Tildada animatsiya Zero Blockda qilinadi. Tilda maʼlumotnomasiga koʻra, u yerda ikki rejim bor. Bazaviy animatsiya — bu paydo boʻlish effekti, parallaks va qotirish. Bosqichma-bosqich animatsiya beshta shartdan biri bilan ishga tushadi: element ekranda paydo boʻldi, blok ekranda paydo boʻldi, aylantirish, kursor olib borish, bosish. Bloklar paydo boʻladigan va oddiy parallaksli lending uchun bu yetarli. Bu triggerlardan tashqaridagi effektlarni, masalan, sahnani barmoq bilan inersiya bilan sudrashni kod bilan yozishga toʻgʻri keladi. Konstruktor va kodli sayt nimasi bilan farq qilishini «Tilda, WordPress yoki kodli sayt» maqolasida tahlil qilamiz. Quyidagi qoidalar har qanday vosita uchun bir xil.
Nima sotishga yordam beradi, nima xalaqit beradi
| Yordam beradi | Xalaqit beradi |
|---|---|
| sahna mahsulot qanday ishlashini tushuntiradi | hech narsani tushuntirmaydigan, animatsiya uchun animatsiya |
| tugma bosilishga javob beradi, forma «yuborildi» deb koʻrsatadi | har bir sahifadan oldin 3 soniyalik loader |
| sarlavha va tugma darhol koʻrinadi, harakat keyin yuklanadi | skript yuklanmaguncha birinchi ekran boʻsh |
| blok qoʻshnilarini siljitmasdan paydo boʻladi | elementlar sakraydi, tugma barmoq ostidan qochib ketadi |
| video ovozsiz ijro etiladi, ovoz — bosilganda | ovozli avtoplay va ogʻir video fon |
| yuguruvchi satr va karuselni toʻxtatish mumkin | pauzasiz cheksiz harakat |
Unumdorlik: nimani animatsiya qilish kerak, nimani yoʻq
web.dev qoʻllanmasidagi asosiy qoida — faqat transform va opacity ni animatsiya qilish. Bu xususiyatlarni brauzer maketni qayta hisoblamasdan, kompozitsiya bosqichida qayta ishlaydi. top, left, width, height va margin xususiyatlari esa har bir kadrda maketni qayta hisoblashga majbur qiladi. Arzon telefonda bunday animatsiya silkinib turadi. will-change ni web.dev nuqtaviy va faqat haqiqiy muammo boʻlganda qoʻyishni maslahat beradi: ortiqcha qatlamlarning oʻzi sahifaga yuk beradi.
Animatsiya Core Web Vitalsning ikkita metrikasiga ham taʼsir qiladi:
- CLS.
topvaleftorqali siljish, element alohida qatlamda boʻlsa ham, maket siljishi hisoblanadi.translateorqali animatsiya CLSga taʼsir qilmaydi. - INP. Ogʻir JavaScript asosiy oqimni band qiladi va sahifa bosishga kechroq javob beradi. 200 ms gacha boʻlgan INP yaxshi hisoblanadi.
Bu metrikalarni qanday oʻlchash va saytni yana nima sekinlashtirishini «Saytning yuklanish tezligi» maqolasida tahlil qilamiz.
«Harakatni kamaytirish» va foydalanish qulayligi
iPhone, Android, Windows va macOSda interfeysdan kamroq harakatlanishni soʻraydigan sozlama bor. iPhoneda u «Maxsus imkoniyatlar → Harakat» boʻlimida, Android 9 va undan yangilarida — maxsus imkoniyatlarda joylashgan (ingliz interfeysida bu band Remove animations deb ataladi). Sayt uni prefers-reduced-motion media soʻrovi orqali koʻradi. Uni injiqlik uchun yoqishmaydi: vestibulyar buzilishlari bor odamlarda ekrandagi harakat bosh aylanishi, koʻngil aynishi va migren keltirib chiqarishi mumkin.
WCAG foydalanish qulayligi standarti nima deydi:
- 2.3.3 Animation from Interactions, AAA darajasi (WCAG 2.1 da paydo boʻlgan). Foydalanuvchi harakati bilan ishga tushadigan harakat animatsiyasi, agar u ishlash yoki maʼno uchun zarur boʻlmasa, oʻchirilishi mumkin boʻlishi kerak. Bu muvofiqlikning eng yuqori darajasi, lekin uni bajarish oson: WCAGda
prefers-reduced-motionmedia soʻrovi usullardan biri sifatida koʻrsatilgan. - 2.2.2 Pause, Stop, Hide, A darajasi. Agar harakat oʻzi boshlansa, 5 soniyadan uzoq davom etsa va boshqa kontent yonida koʻrsatilsa, foydalanuvchida uni toʻxtatish yoki yashirish imkoni boʻlishi kerak. Bu karusellar, yuguruvchi satrlar va video fonlar haqida.
Video avtoplayi va hajmi
Chrome ovozsiz avtoplayga doim ruxsat beradi. Ovozli avtoplayga esa — faqat odam sayt bilan allaqachon oʻzaro aloqada boʻlgan boʻlsa. Shuning uchun saytdagi video shunday qilinadi: ovozsiz, poster bilan, playsinline atributi bilan (usiz iPhone videoni butun ekranga ochadi) va video ekranga tushganda yuklanadigan qilib. Ovoz — bosilganda. Video butun sahifadan osongina ogʻirroq boʻlib ketadi. Taqqoslash uchun: «Motion-dizayn» sahifamizning HTML qismi taxminan 86 KB, bitta qisqa ovozsiz halqa-video esa 886 KB gacha. Agar video fon mahsulotni tushuntirmasa, uni rasm bilan almashtiring.
Chek-list: saytdagi yaxshi animatsiya
- Har bir effektning vazifasi bor: tushuntirish, koʻrsatib berish, harakatni tasdiqlash.
- Sarlavha, matn va tugma animatsiyasiz va JavaScriptsiz koʻrinadi.
- Faqat
transformvaopacityharakatlanadi. - Rasm va videolarning oʻlchamlari yozilgan, hech narsa sakramaydi (CLS 0,1 gacha).
prefers-reduced-motionda harakat oʻchirilgan, mazmun oʻsha-oʻsha.- 5 soniyadan uzoq cheksiz harakatni toʻxtatish mumkin.
- Ekrandan tashqaridagi animatsiyalar pauzada turadi.
- Video — ovozsiz, poster bilan, aylantirish bilan birga yuklanadi.
- Kursor effektlari muhim narsani yashirmaydi: telefonda kursor yoʻq.
- Sahifa animatsiyadan oldin va keyin PageSpeedda «Mobil» varagʻida tekshirilgan.
Keyin nima qilish kerak
Oʻz saytingizda chek-listdan oʻting, 2, 3 va 5-bandlardan boshlang: ular kam mehnat bilan eng koʻp natija beradi. Agar animatsiyani noldan qilish kerak boʻlsa, avval u nimani tushuntirishi kerakligi haqidagi savoldan boshlang, effektni esa keyin tanlang. Motion-dizayn oddiy animatsiyadan nimasi bilan farq qilishini «Motion-dizayn: oddiy soʻzlar bilan bu nima» maqolasida tahlil qilamiz.
Parallaks va aylantirishdagi sahnalari bor saytlarni biz kod bilan yigʻamiz. Usullarni jonli holda «Sayt yaratish» sahifasida, videolar va 3Dni esa «Motion-dizayn» sahifasida koʻrish mumkin. Parallaks va aylantirishdagi sahnali lending — «Harakat» paketi, 7,9 mln soʻm, qolgan narxlar narxlar roʻyxatida bor, aniq narx — bepul brifdan keyin.
