Tarkib
- 01. HTML-hujjatni boshlang
- 02. Ko'rinadigan HTML tarkibi
- 03. CSS boshlash
- 04. Animatsion konteyner
- 05. Animatsiyani boshlash
- 06. Ko'rish uchun jonlantirish
- 07. Animatsiyani yakunlash
Kanadalik Jam3 tomonidan yo'qolgan muhabbat - bu yo'qolgan muhabbat atrofidagi doimiy tuyg'ular haqida chin yurakdan, chiroyli qorong'i, mobil telefonga tayyor interaktiv she'r. Veb-sayt tartibi HTML5-dan foydalangan holda GSAP kutubxonasi yordamida uning animatsiyasini kuchaytiradi, uning eng ko'zga ko'ringan xususiyatlaridan biri - bu haqiqatan ham Love Lost she'riyatini jonlantiruvchi animatsion 3D matni.
- Interfaol 3D tipografiya effektlarini yarating
Bu jahannam kabi ta'sirchan ko'rinadi va jozibali foydalanuvchi tajribasini yaratish uchun o'zingizning ishingizga qo'shilish qiyin emas; bu erda qanday amalga oshiriladi.
O'zingizni jalb qiladigan saytingizni yaratmoqchimisiz? Veb-sayt ishlab chiqaruvchisi vositasini sinab ko'ring va kerakli veb-xosting xizmatini tanlab, ishingizni uzluksiz bajaring.
01. HTML-hujjatni boshlang
Birinchi qadam HTML hujjatning tuzilishini aniqlashdir. Bunga bosh va tana qismlarini o'z ichiga olgan hujjatni boshlaydigan HTML konteyner kiradi. Bosh qismi birinchi navbatda tashqi CSS faylini yuklash uchun ishlatilgan bo'lsa, asosiy qism 2 bosqichda yaratilgan ko'rinadigan sahifa tarkibini saqlaydi.
! DOCTYPE html> html> head> title> 3D matn harakati / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 BU YERDA / body> / html>
02. Ko'rinadigan HTML tarkibi
Ko'rinadigan HTML tarkibi ko'rinadigan matnni o'z ichiga olgan maqola konteyneridan iborat. Maqola konteynerining muhim qismi - bu "ma'lumotlar-jonlantirish" atributidir, bu vizual effektlarni qo'llash uchun CSS tomonidan havola qilinadi. Maqola ichidagi matn h1 tegidan tarkibning sahifaning asosiy sarlavhasi ekanligini bildirish uchun qilingan.
article data-animate = "move in"> h1> Assalomu alaykum! / h1> / article>
03. CSS boshlash
'Styles.css' deb nomlangan yangi fayl yarating. Birinchi ko'rsatmalar sahifaning HTML konteynerini va tanasini qora fonga ega bo'lishiga, shuningdek, ko'rinadigan chegara oralig'iga ega emasligini belgilab qo'ydi. Oq rang, shuningdek, varaqdagi barcha asosiy elementlar uchun odatiy matn rangi sifatida o'rnatiladi; matnning standart qora rangidan qochish, tarkib ko'rinmas ko'rinadi.
html, tanasi {fon: # 000; to'ldirish: 0; margin: 0; rang: #fff; }
04. Animatsion konteyner
"Data-animate" atributi bilan havola qilingan tarkib konteynerida o'ziga xos uslublar qo'llaniladi. Uning kattaligi vw va vh o'lchov birliklari yordamida ekranning to'liq o'lchamiga mos ravishda o'rnatiladi, shuningdek biroz aylantiriladi. 20 soniya davom etadigan va cheksiz takrorlanadigan 'moveIn' animatsiyasi qo'llaniladi.
[data-animate = "move in"] {pozitsiya: nisbiy; kengligi: 100vv; balandligi: 100vh; shaffoflik: 1; animatsiya: moveIn 20s cheksiz; matn bilan tekislash: markaz; aylantirish: aylantirish (20deg); }
05. Animatsiyani boshlash
Oldingi bosqichda havola qilingan 'moveIn' animatsiyasi @keyframes yordamida ta'rifni talab qiladi. Animatsiyaning 0% dan boshlangan birinchi ramka shriftning standart o'lchamlarini, matnning joylashishini va ko'rinadigan soyani o'rnatadi. Bundan tashqari, element nol xiralik bilan o'rnatiladi, shunda u dastlab ko'rinmas bo'ladi - ya'ni. tashqi ko'rinishda ko'rsatiladi.
@keyframes moveIn {0% {font-size: 1em; chapda: 0; shaffoflik: 0; matn soyasi: yo'q; } * * * 6-QADAM BU YERDA}
06. Ko'rish uchun jonlantirish
Keyingi kadr animatsiya orqali 10% ga joylashtiriladi. Ushbu ramka xiralikni to'liq ko'rinadigan qilib o'rnatadi, natijada matn asta-sekin ko'rinishga animatsiya qilinadi.Bundan tashqari, matnga 3D chuqurlik xayolotini berish uchun ko'k va pasayadigan rang qiymatlari bilan bir nechta soyalar qo'shiladi.
10% {xira: 1; matn soyasi: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7-QADAM BU YERDA
07. Animatsiyani yakunlash
Yakuniy kadrlar 80% va animatsiya oxirida sodir bo'ladi. Ular shrift hajmini oshirish va elementni chap tomonga siljitish uchun javobgardir. Matn soyasini jonlantirish uchun yangi sozlamalar ham qo'llaniladi, shu bilan birga matn 80% dan 100% gacha ko'rinmaydi.
80% {shrift hajmi: 8em; chapda: -8em; shaffoflik: 1; } 100% {shrift hajmi: 10em; chapda: -10em; shaffoflik: 0; matn soyasi: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Izoh: qaysi loyihani boshlamoqchi bo'lsangiz ham, bulutli saqlash joyiga bardosh bera olasiz (bu bizning qo'llanmamiz yordam beradi).
Ushbu maqola dastlab veb-dizayn bo'yicha veb-dizayn jurnalining 273-sonida nashr etilgan. 273 sonini bu yerdan sotib oling yoki bu erda veb-dizaynerga obuna bo'ling.
