Tarkib
- 01. Sahifangizning asosiy yorlig'iga kod qo'shing
- 02. Displeyni stilizatsiya qilish
- 03. Nosozlikni namoyish qilish
- 04. Hamma narsani ushlab turing
- 05. Nosozlikni boshqarish
- 06. Oddiy holatga qaytish
- Nyu-Yorkni yaratish uchun chiptangizni hoziroq oling
E'tiborni jalb qilishning eng yaxshi usuli - bu sizning iqtidoringizni tashqaridan namoyish qiladigan veb-sayt maketini yaratish (munosib veb-sayt yaratuvchisi qurilishda yordam berishi mumkin). Ukraina Vintage veb-agentligining sayti buning ajoyib namunasidir, u sizni VR dizayn portfelingizga shisha zarrachalardan qurilgan pulsatsiyalovchi logotipning kombinatsiyasi va hoverda faollashadigan yoqimsiz qism bilan jalb qiladi.
- Veb-animatsiya: Kod talab qilinmaydi
Kam ishlatilgan oddiy nosozlik effekti saytingizga vizual qiziqishning ozgina qo'shimcha qismini berishi mumkin va uni amalga oshirish ajablanarli darajada oson. Mana buni qanday qilish kerakligi.
Yodingizda bo'lgan murakkab veb-saytni bilasizmi? Veb-xostingingiz vazifani bajarishiga ishonch hosil qiling. Dizayn fayllaringizni bulutli saqlashda saqlang.
Fayllarni yuklab oling ushbu qo'llanma uchun.
01. Sahifangizning asosiy yorlig'iga kod qo'shing
Oddiy nosozlik effektini yaratish juda ko'p turli xil usullar bilan amalga oshirilishi mumkin. Bu erda biz matnning yuqori qismida animatsion GIF-ni bosib, displeyda yoqilgan va o'chirilgan holda bajaramiz. Avval ushbu sahifani tanangiz yorlig'iga qo'shing.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Displeyni stilizatsiya qilish
Tarkibda Google Fonts-dan Work Sans deb nomlangan ma'lum bir shrift ishlatiladi. U erdan havolani oling va bosh qismingizga qo'ying; keyin CSS-ni uslub teglariga yoki alohida CSS-faylga qo'shing. Sahifa oq matn bilan qora rangga bo'yalgan va egasi matn uchun shakllangan.
tanasi {fon: # 000; font-family: 'Work Sans', sans-serif; rang: #fff; } #holder {font-size: 6em; kengligi: 500 piksel; balandligi: 300 piksel; margin: 0 avtomatik; pozitsiya: nisbiy; }
03. Nosozlikni namoyish qilish
Glitch effekti to'g'ridan-to'g'ri matnning yuqori qismiga joylashtirilgan fon tasviri bo'ladi. Bu erda muhim narsa shundaki, u foydalanuvchi matn bilan o'zaro aloqada bo'lmaguncha ko'rinmasligi uchun xiralikni nolga kamaytirish orqali ko'rinmas holga keltiriladi.
#glitch {pozitsiyasi: mutlaq; yuqori: 0; chapda: 0; z-indeks: 10; kengligi: 100%; balandligi: 100%; fon: url (glitch.gif); shaffoflik: 0; }
04. Hamma narsani ushlab turing
Asosiy qismning oxiriga skript teglarini qo'shing va hujjatdagi 'glitch' div haqida keshlangan ma'lumotnoma yarating. Keyin 'over' nomli o'zgaruvchi false qiymatiga o'rnatiladi. Bu foydalanuvchi matn ustida harakat qilganda yoqiladi va o'chiriladi.
var gl = document.getElementById ("glitch"); var over = false;
05. Nosozlikni boshqarish
Sichqoncha matn ustida harakatlanganda glitch funktsiyasi chaqiriladi. Agar nosozlik ishlamayotgan bo'lsa, unda nosozlik ko'rinishi yoqiladi va u bir yarim soniyadan so'ng o'chadi.Siz bu bilan tajriba o'tkazishingiz va tasodifiy sonni ishlatib, uni oldindan aytib bo'lmaydi.
funktsiya glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Oddiy holatga qaytish
Nosozlik effekti foydalanuvchini juda bezovta qiladigan bo'lib qolmasligi kerak, ammo interaktiv element sifatida u yaxshi ishlaydi. Bu erda kod shaffoflikni nolga qaytaradi, shunda u matnning yuqori qismida ko'rinmaydi.
normal funktsiya () {gl.style.opacity = "0"; }
Nyu-Yorkni yaratish uchun chiptangizni hoziroq oling
Generate New York-ning uch kunlik veb-dizayn tadbirlari qaytib keldi. 2018 yil 25-27 aprel kunlari bo'lib o'tadigan sarlavhali ma'ruzachilar orasida SuperF Friendly's Dan Mall, veb-animatsiya bo'yicha maslahatchi Val Xed, JavaScript-ni to'liq ishlab chiquvchisi Wes Bos va boshqalar bor. Shuningdek, to'liq kunlik seminarlar va qimmatbaho tarmoq imkoniyatlari mavjud - uni o'tkazib yubormang. Generate chiptangizni hoziroq oling.
Ushbu maqola dastlab veb-dizayn bo'yicha veb-dizayn jurnalining 270-sonida nashr etilgan. 270 sonini bu erda sotib oling yoki bu erda veb-dizaynerga obuna bo'ling.
