Tilda’da Zero Block: o‘z bloklaringiz va animatsiya

Zero Block nima va qachon kerak

Zero Block — Tilda’dagi blok bo‘lib, uning ichida elementlarni o‘zingiz joylashtirasiz: matn, rasm, shakllar, tugmalar, video, HTML-kod. U kutubxonadagi tayyor bloklar kerakli kompozitsiyani bera olmaganda kerak bo‘ladi: nostandart birinchi ekran, murakkab to‘r, izohli illyustratsiya, animatsiyali sxema.

Agar vazifani standart blok hal qilsa, uni oling: u allaqachon moslashuvchan va har bir ekran uchun qo‘lda sozlashni talab qilmaydi. Zero Block erkinlik beradi, lekin mobil versiya uchun butun mas’uliyatni ham sizga yuklaydi.

Artbord va konteynerlar

Muharrir «Blokni tahrirlash» tugmasi orqali ochiladi. Asos — artbord, ya’ni blok maydoni. Uning sozlamalarida balandlik, fon, chekinishlar va oynaning turli kengliklarida o‘zini qanday tutishi belgilanadi.

Har bir elementning konteyneri bor, element shunga nisbatan joylashadi:

• Grid container — qat’iy kenglikdagi markaziy to‘r. Asosiy kontent uchun mos: matn va tugmalar har qanday monitorda o‘qiladigan zonada qoladi.
• Window container — butun brauzer oynasi. Ekran chetiga yopishib turishi kerak bo‘lgan fon elementlari va bezaklar uchun mos.

Joylashuvni chap, o‘ng chet yoki markazga nisbatan, piksel yoki foizda berish mumkin. Katta bezak fon uchun foiz qulayroq, matn uchun esa piksel va to‘rga bog‘lash.

Artbord balandligini oyna balandligining foizida ko‘rsatish mumkin — butun balandlikdagi birinchi ekran shunday qilinadi. Hisobga oling: manzil satri bor telefonlarda aylantirish paytida oyna balandligi o‘zgaradi.

Moslashuvchanlik: breakpoint’lar

Zero Block bir nechta o‘lcham uchun maketni saqlaydi: desktop kengligi va planshet hamda telefonlar uchun kichikroqlari, 320 px gacha. O‘lchamlar almashtirgichi muharrirning yuqori panelida joylashgan.

Meros qanday ishlaydi:

1. Avval desktopni yig‘ing.
2. Kichikroq o‘lchamga o‘ting: elementlar sozlamalarni kattaroq o‘lchamdan meros qilib oladi.
3. Kichik o‘lchamdagi o‘zgarishlar kattalariga ta’sir qilmaydi.
4. Muayyan ekranda keraksiz narsani o‘chirmang, yashiring — o‘chirish elementni hamma joydan olib tashlaydi.

Har bir breakpoint uchun chek-list:

• matn chetdan chiqmaydi va boshqa elementlarni to‘sib qo‘ymaydi;
• shrift o‘lchami telefonda o‘qiladi;
• tugmalar barmoq bilan bosish uchun yetarlicha katta;
• artbord balandligi kontentga moslangan, pastda bo‘shliq yo‘q;
• hech narsa gorizontal aylantirishni keltirib chiqarmaydi.

Animatsiya: oddiy va bosqichma-bosqich

Oddiy animatsiya — aylantirishda elementning paydo bo‘lish effekti: asta ko‘rinish, siljish, masshtab. Turi, davomiyligi, kechikishi va siljishi sozlanadi. Matn va kartochkalarni yumshoq ko‘rsatish uchun mos.

Bosqichma-bosqich animatsiya — qadamlar ketma-ketligi, har birida joylashuv, shaffoflik, masshtab, burilish o‘zgaradi. U trigger orqali ishga tushadi:

• blok ekranda paydo bo‘lganda;
• aylantirishda — animatsiya skrollga bog‘langan;
• kursor olib kelinganda;
• bosilganda.

Ish tartibi:

1. Elementni tanlang va bosqichma-bosqich animatsiyani yoqing.
2. Triggerni belgilang.
3. Qadamlar qo‘shing: har biri uchun davomiylik va o‘zgaradigan xususiyatlar.
4. Kerak bo‘lsa, takrorlashni yoqing.
5. Natijani oldindan ko‘rishda, keyin nashr qilingan sahifada tekshiring.

Animatsiya bo‘yicha maslahatlar:

• Siljish, shaffoflik va masshtabni animatsiya qiling — bunday effektlar odatda o‘lchamni o‘zgartirishdan ko‘ra silliqroq ishlaydi.
• Hamma narsani animatsiya qilmang: o‘nta element bir vaqtda harakatlansa, diqqat tarqaladi.
• Kursor effektlari sensorli ekranlarda ishlamaydi — muhim ma’lumot hover ortida yashirilmasligi kerak.
• Animatsiyani haqiqiy telefonda tekshiring: emulyatorda kuchsiz qurilmalar qanday ishlashi ko‘rinmaydi.

Mobil versiyani buzadigan xatolar

• Faqat desktop yig‘ilgan. Kichik ekranlarda elementlar bir-birining ustiga chiqadi yoki chetdan ketadi.
• Matn rasm ko‘rinishida. Uni qidiruv tizimlari ko‘rmaydi, u xiralashadi va masshtablanmaydi. Matn elementlaridan foydalaning.
• Matn blokining qat’iy balandligi. Shrift boshqa o‘lchamlar bilan yuklansa yoki matn uzaysa, u qo‘shnilarni to‘sib qo‘yadi.
• Tekshirilmagan Window container’dagi bezak. Tor ekranda u kontentni yopib qo‘yishi mumkin.
• Og‘ir rasmlar. Rasmlarni siqing va bir necha megabaytlik asl fayllarni yuklamang.
• Bitta blokda juda ko‘p element. Bunday blokni qo‘llab-quvvatlash qiyin; uni bir nechta Zero Block’ga bo‘lgan ma’qul.
• Uzun blokdagi skroll animatsiyasi kuchsiz telefonlarda silliq ishlamasligi mumkin — mobil o‘lchamlar uchun uni soddalashtiring.