Tarkib
- 01. Rollover matn effekti
- 02. CSS yarating
- 03. So'zni joylashtiring
- 04. Yuqorida va orqada
- 05. Pastga siljish
- 06. Odamlar uchun avtomatik
- 07. O'zgaruvchan sinflarni qo'shing
O'tkazib yuborish havolalari foydalanuvchi e'tiborini jalb qilishning ajoyib usuli, ayniqsa ular g'ayrioddiy yoki o'ziga xos bir narsa qilsalar. O'rta bola har qanday harfni yozib olgan va ularni animatsiya bilan ajratib turadigan boshqa joyda kamdan-kam uchraydigan ajoyib ta'sirga ega, bu mehmon so'zni bosib o'tganda boshlanadi. Animatsiya sendvich brendining o'ynoqi xarakterini etkazishga yordam beradi.
Ushbu maqolada biz sizning saytingizdagi effektni qanday tiklashni ko'rsatamiz. Ko'proq ilhom olish uchun eng yaxshi CSS animatsiyasi misollari bo'yicha qo'llanmani ko'rib chiqing (ularni qanday kodlash bo'yicha ko'rsatmalar bilan). Biroz boshqacha narsa uchun eng yaxshi veb-sayt yaratuvchisini yoki eng yaxshi bulutli saqlash joyini tanlang. Va agar siz o'zingizning saytingizni yanada murakkablashtirsangiz, veb-xosting bir joyda ekanligiga ishonch hosil qiling.
01. Rollover matn effekti
O'rta bola veb-saytidagi eng yaxshi matn effektlaridan biri bu menyuda rollar effektlari bo'lib, u erda harflar matnga bo'linib, biroz aylanadi. Buni oddiy HTML teglar bilan boshlang.
div> div> nonushta / div> / div>
02. CSS yarating
Quyidagi CSS qoidalarini qo'shish uchun alohida CSS fayli yoki uslub teglaridan foydalaning va tanani va o'ramning to'liq balandligini olishini ta'minlash orqali sahifani brauzerning to'liq hajmini to'ldiring.
tanasi {kengligi: 100%; balandligi: 100%; margin: 0; to'ldirish: 0; } .wrapper {displey: panjara; balandligi: 100%; }
03. So'zni joylashtiring
The so'z sinf tarmoqdagi so'zni markazlashtiradi. Berilgan har qanday matn so'z sinfda buni qo'llash mumkin. The yuqoriga sinf har bir boshqa harfga nisbatan qo'llaniladi va ular yuqoriga qarab siljiydi.
.word {font-size: 3em; margin: auto auto; } .word .up {display: inline-block; aylantirish: translate3d (0px, 0px, 0px) aylantirish (0deg); o'tish: barcha 0,5 soniyalarda qulaylik; }
04. Yuqorida va orqada
Endi pastga class juda o'xshash sozlamalarni baham ko'radi yuqoriga lekin sichqoncha yuqoriga qarab harakatni ko'rsatadi yuqoriga Yangi mahsulot sotuvga chiqarish; muddatini uzaytirish; ishga tushirish. Tashqi ko'rinishini yaxshilash uchun yuqoriga qarab bir oz aylantiriladi.
.word .down {display: inline-block; aylantirish: translate3d (0px, 0px, 0px) aylantirish (0deg); o'tish: barcha 0,5 soniyalarda qulaylik; } .word: hover .up {transform: translate3d (0px, -8px, 0px) aylantirish (12deg); rang: # 058b05}
05. Pastga siljish
Foydalanuvchi matn ustida harakatlanayotganda pastki sinf matnni pastga siljitadi. Keyinchalik JavaScript-da matn alohida oraliqlarga bo'linadi, sinflar avtomatik ravishda qo'shimcha oraliqlarga qo'shiladi.
.word: hover .down {transform: translate3d (0px, 8px, 0px) aylantirish (-12deg); rang: # 058b05; }
06. Odamlar uchun avtomatik
Har bir harfni turli sinflar bilan almashinadigan oraliqlarga qo'yish juda qiyin, shuning uchun biz selektordan so'rab, har bir harfni olish uchun JavaScript-ni olish orqali jarayonni avtomatlashtiramiz. Mana str o'zgaruvchisi matnni ko'rib chiqayotganda joriy harfni ushlaydi.
skript> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementlar [i] .innerHTML = ’’;
07. O'zgaruvchan sinflarni qo'shing
Endi boshqa tsikl har bir harfni o'z span elementiga joylashtiradi va ikkitasini qo'shadi yuqoriga yoki pastga oralig'iga sinf. Agar siz bunga brauzerda qarasangiz, matnni har bir harf yuqoriga va pastga, bir oz aylantirib bo'lingan holda ko'rasiz.
Amaldagi ta'sirni "O'rta bola" veb-saytida ko'rishingiz mumkin.
uchun (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); elementlar [i] .appendChild (spn); spn.textContent = str [j]; pos = (j% 2) bo'lsinmi? 'Yuqoriga': 'pastga'; spn.classList.add (pos); }} / skript>
Ushbu maqola dastlab veb-dizayn jurnalida nashr etilgan Veb-dizayneri.286-sonni sotib oling yoki obuna bo'lish.
