Css3 -da oddiy bannerlar yaratish. CSS3 animatsion banner

CSS3 yordamida reklama bannerini yarataylik. Hozirgi vaqtda faqat CSS3 animatsiyalarini to'liq qo'llab -quvvatlaydi Firefox brauzerlari va WebKit. Bannerni boshqa brauzerlarda ishlash juda oson. Biroq, siz CSS -ning eng yangi texnikasi bilan tajriba o'tkazishda hamma joyda (ayniqsa IE 7 va undan yuqori) ajoyib ishlashni kutmasligingiz kerak.

Eslatma: Sahifada joyni tejash uchun brauzer sotuvchilarining barcha prefikslari qoldirilgan. Manba kodini ko'ring.

HTML formatlash

Birinchidan, HTML -da banner tuzilishini ko'rib chiqaylik. Ushbu bosqichda biz animatsiya qanday ishlashini tasavvur qilishimiz kerak:

Belgilash tuzilishini chuqurroq tushunish uchun qayiqqa e'tibor qarataylik:

Qayiq bilan uchta animatsiya davom etmoqda:

Qayiqni chapga siljitish. Tartibga solinmagan ro'yxatga (guruhga) tegishli.

Suv ustida tebranayotgan qayiqqa taqlid. Ro'yxat bandiga (qayiqqa) tegishli.

Savol belgisining paydo bo'lishi. Div elementiga qo'llaniladi (savol belgisi).

Agar siz demo -sahifaga qarasangiz, ro'yxat elementi (qayiq) animatsiyasi uning ichidagi div elementiga ham ta'sir qilishini ko'rishingiz mumkin (savol belgisi). Shuningdek, tartiblanmagan ro'yxat uchun "siljitish" animatsiyasi ro'yxat elementiga ta'sir qiladi (qayiq va savol belgisi).

Shunday qilib, xulosa qilishimiz mumkinki, bolalar o'z harakatlaridan tashqari, ota -onalarining animatsiyasini ham olishadi. Endi ota -ona / bola tuzilmalarini ro'yxatga olishgina qoladi.

CSS

Animatsiyani qanday yaratishni tahlil qilishni boshlashdan oldin, uni taqdim etish kerak orqaga qarab moslik eski brauzerlar bilan.

orqaga qarab moslik

Biz CSS -da hech qanday animatsiya bo'lmaganidek, markirovkani oddiy qilib, orqaga qarab muvofiqlikni ta'minlaymiz. Agar kimdir eski brauzerda sahifaga qarasa, u bo'sh bo'sh joyni emas, balki oddiy statik tasvirni ko'radi.

Masalan: agar CSS dan foydalansangiz? Quyidagiga o'xshash, keyin muammolar bo'ladi:

/* To'g'ri emas! * / @keyframe bizning animatsiyamiz o'chadi (0% (shaffoflik: 0;) 100% (shaffoflik: 1;)) div (shaffoflik: 0; / * Bu div sukut bo'yicha yashirilgan-oh! * / animatsiya: bizning animatsiyamiz o'chirildi 1s 1;)

Agar brauzer animatsiyalarni qo'llab -quvvatlamasa, div elementi foydalanuvchi uchun ko'rinmas bo'lib qoladi.

Biz eski brauzerlar bilan orqaga qarab muvofiqlikni shunday ta'minlaymiz:

/ * To'g'ri * / @keyframe bizning animatsiyamiz yo'qolgan (0% (shaffoflik: 0;) 100% (shaffoflik: 1;)) div (shaffoflik: 1; / * Bu div sukut bo'yicha ko'rinadi / / animatsiya: bizning animatsiyamiz o'chirildi 1s 1;)

Endi animatsiya boshlanmasa ham div elementi ko'rsatiladi. Va zamonaviy brauzerlarda div birinchi navbatda animatsiya paytida yashiriladi.

Poydevor

Endi biz orqaga qarab muvofiqlikni qanday ta'minlash kerakligini bilamiz (bu haqiqiy loyihalar bilan ishlashda muammolardan qochishga yordam beradi). Bizning CSS kodimiz asosini yaratish vaqti keldi.

Esda tutish kerak bo'lgan 3 nuqta bor:

Banner turli saytlarda qo'llanilishi sababli, biz hamma narsani qilamiz CSS tanlovchilari maxsus Ularning barchasi # ad-1 identifikatoridan boshlanadi. Shunday qilib, biz o'z kodimiz va sayt kodini bir -biriga yopishtirib qo'ymaslikka harakat qilamiz.

Biz qasddan animatsiyaning kechikishiga e'tibor bermaymiz inshootlarda. Agar siz elementlarning ko'rinishi mumkin bo'lgan uslublarni o'rnatishda animatsiya kechikishidan foydalansangiz, bannerning tuzilishi animatsiya tugagandan so'ng tasvir qismlarining to'satdan yo'qolishi yoki qayta paydo bo'lishi bilan buziladi. Animatsiyaning kechikishi kadrlarning davomiyligi va sozlanishi bilan taqlid qilinadi.

Iloji bo'lsa bir nechta elementlar uchun bitta animatsiyadan foydalaning. Shunday qilib, biz vaqtni tejaymiz va kod hajmini kamaytiramiz.

Shunday qilib, bayrog'imiz uchun asos yarataylik. Keling, ichki elementlarni to'g'ri joylashtirish uchun nisbiy joylashishni belgilaymiz. Shuningdek, u elementdan tashqaridagi hamma narsani yashiradi:

# ad-1 (kengligi: 720 piksel; balandligi: 300 piksel; suzish: chap; chegara: 40 piksel avtomatik 0; fon tasviri: url (../ tasvirlar / ad-1 / fon.png); fon-pozitsiyasi: markaz; orqa -takrorlash: takrorlanmaydi; toshib ketish: yashirin; pozitsiya: nisbiy; quti-soya: 0px 0px 6px # 000;)

Keyin biz matn va kiritish maydonlarini uslublashtiramiz. Biz tegishli animatsiyalarni chaqiramiz. Bundan tashqari, kontent bir-biriga mos kelmasligi uchun harakatlanuvchi qismlar uchun eng yuqori z-indeksiga ega ekanligiga ishonch hosil qilishingiz kerak:

# ad-1 #kontent (kenglik: 325 piksel; suzish: o'ng; chekka: 40 piksel; matnni tekislash: markaz; z-indeks: 4; pozitsiya: nisbiy; to'lib ketish: ko'rinadigan;) # ad-1 h2 (shrift oilasi: "Alfa Slab One", kursiv; rang: # 137dd5; shrift o'lchami: 50px; chiziq balandligi: 50px; matn soyasi: 0px 0px 4px #fff; animatsiya: kechiktirilgan xira animatsiya 7s 1 osonlik bilan chiqish; / * Tashqi ko'rinish h2 simulyatsiyali kechikish bilan * /) # ad-1 h3 (shrift oilasi: "Boogaloo", kursiv; rang: # 202224; shrift o'lchami: 31 piksel; chiziq balandligi: 31 piksel; matn soyasi: 0 piksel 0 piksel 4 piksel #fff; animatsiya: kechiktiriladigan animatsiya 10s 1 osonlik bilan chiqib ketishi; / * h3 ning simulyatsion kechikish bilan ko'rinishi * /) # ad-1 shakli (chegara: 30px 0 0 6px; pozitsiya: nisbiy; animatsiya: shakl) -animatsiya 12s 1 osonlik bilan chiqish; / * Osonlik bilan; / * Simulyatsiya qilingan kechiktirilgan elektron pochta shaklini suring * /) # ad-1 # pochta (kengligi: 158 piksel; balandligi: 48 piksel; suzish: chap; to'ldirish) : 0 20 piksel; shrift o'lchami: 16 piksel; shrift oilasi: "Lucida Grande", sans-serif; rang: #fff; matn soyasi: 1px 1px 0px # a2917d; chegara-chapdan yuqori radiusi: 5 piksel; borde r-pastki-chap-radius: 5 piksel; chegara: 1 pikselli qattiq # a2917d; kontur: yo'q; quti -soya: -1px -1px 1px #fff; fon rangi: # c7b29b; fon-tasvir: chiziqli-gradient (pastki, rgb (216,201,185) 0%, rgb (199,178,155) 100%); ) # ad-1 # pochta: fokus (fon tasviri: chiziqli gradyan (pastda, rgb (199,178,155) 0%, rgb (199,178,155) 100%);) # ad-1 # yuborish (balandlik: 50 piksel; suzish: chapda) ; kursor: ko'rsatgich; to'ldirish: 0 20 piksel; shrift o'lchami: 20 piksel; shrift oilasi: "Boogaloo", kursiv; rang: # 137dd5; matn soyasi: 1 piksel 1 piksel 0 piksel #fff; chegara-yuqori o'ngdagi radius: 5 piksel ; chegara-pastki-o'ng-radius: 5 piksel; chegara: 1 piksel qattiq # bcc0c4; chegara-chap: yo'q; fon rangi: #fff; fon tasviri: chiziqli gradyan (pastki, rgb (245,247,249) 0%, rgb ( 255,255,255) 100%);) # ad-1 #submit: hover (background-image: lineer-gradient (bottom, rgb (255,255,255) 0%, rgb (255,255,255) 100%));)

Keling, suvga uslub beramiz va tegishli animatsiyani chaqiramiz:

# ad-1 ul # water ( / * Agar sizga suv uchun boshqa animatsiya kerak bo'lsa, uni shu erga qo'shishingiz mumkin * /) # ad-1 li # water-back (eni: 1200px; balandligi: 84px; fon tasviri: url ( ../tasvirlar/ad-1/water-back.png); fon-takrorlash: takrorlash-x; z-indeks: 1; pozitsiya: mutlaq; pastda: 10 piksel; chapda: -20 piksel; animatsiya: suv orqasidagi animatsiya 3s cheksiz yengillik; / * To'lqinni taqillatishni simulyatsiya qilish * /) # ad-1 li # water-front (eni: 1200px; balandligi: 158px; fon tasviri: url (../ rasmlar / ad-1 / suv) -front .png); fon-takrorlash: takrorlash-x; z-indeks: 3; pozitsiya: mutlaq; pastda: -70 piksel; chapda: -30 piksel; animatsiya: suv oldidagi animatsiya 2s cheksiz qulaylik; / * Boshqa to'lqinlarning taqillatilishi. Animatsiya biroz tezroq ishlaydi va istiqbolli effekt yaratadi. * /)

Keling, qayiqni va uning elementlarini bezatamiz. Shuningdek, biz tegishli animatsiyalarni chaqiramiz:

# ad-1 ul # qayiq (kenglik: 249 piksel; balandlik: 215 piksel; z-indeks: 2; pozitsiya: mutlaq; pastda: 25 piksel; chapda: 20 piksel; to'lib toshish: ko'rinadigan; animatsiya: qayiqda-animatsiya 3s 1 osonlik bilan ; / * Reklama boshlanganda guruhni siljitadi * /) # ad-1 ul # qayiq li (kengligi: 249 piksel; balandligi: 215 piksel; fon tasviri: url (../ rasmlar / ad-1 / qayiq.png); pozitsiya: mutlaq; pastda: 0 piksel; chapda: 0 piksel; toshib ketish: ko'rinadigan; animatsiya: qayiq-animatsiya 2s cheksiz osonlik bilan;- * Suv ustida qayiqni simulyatsiya qilish-xuddi suvning o'zida ishlatilgan. * /) # ad-1 # savol belgisi (kengligi: 24 piksel; balandligi: 50 piksel; fon tasviri: url (../ tasvirlar / ad-1 / savol-belgisi.png); pozitsiya: mutlaq; o'ng: 34 piksel; tepa: -30 piksel; animatsiya: kechiktirilgan rangsizlanish 4s 1 osonlik bilan chiqib ketish; / * Savol belgisida yo'qolish * /)

Keling, bulutlarni bezatamiz. Buning uchun biz cheksiz harakat effektli animatsiyadan foydalanamiz. rasm g'oyaning mohiyatini ko'rsatadi:

Va bu erda CSS kodi:

# ad-1 # bulutlar (pozitsiya: mutlaq; tepa: 0 piksel; z-indeks: 0; animatsiya: 30-yillar bulutli animatsiyasi cheksiz chiziqli; / * Bulutlarni chapga siljiting, qayta o'rnating va takrorlang * /) # ad-1 # bulutli guruh -1 (kenglik: 720 piksel; pozitsiya: mutlaq; chap: 0 piksel;) # reklama-1 # bulut-guruh-2 (kenglik: 720 piksel; pozitsiya: mutlaq; chap: 720 piksel;) # reklama-1. bulut 1 (kenglik: 172 piksel; balandlik: 121 piksel; fon tasviri: url (../ tasvirlar / ad-1 / bulut-1.png); pozitsiya: mutlaq; tepada: 10 piksel; chapda: 40 piksel;) # reklama-1. bulut-2 (kengligi: 121 piksel; balandligi: 75 piksel; fon tasviri: url (../ tasvirlar / reklama-1 / bulut-2.png); pozitsiya: mutlaq; tepada: -25 piksel; chapda: 300 piksel;) # reklama -1. Bulut-3 (kengligi: 132 piksel; balandligi: 105 piksel; fon tasviri: url (../ tasvirlar / ad-1 / bulut-3.png); pozitsiya: mutlaq; tepa: -5 piksel; chap: 530 piksel; )

Animatsiyalar

Eslatma: Shu paytdan boshlab, aslida hech narsa jonlanmaydi. Agar hozir bizning bannerga qarasangiz, siz statik rasmni ko'rasiz. Bu erda yuqoridagi kodda chaqirilgan animatsiyalar yaratiladi.

Keling, go'zal statik rasmimizga hayot bag'ishlaymiz:

/ * Simulyatsiyali kechiktirishli animatsiya bir nechta elementlarni ko'rsatish uchun ishlatiladi. Kechiktirish simulyatsiya qilinadi, bu jarayonni animatsiyaning 80% davom etishi bilan boshlanadi (darhol emas). Shunday qilib, har qanday kechiktirishni simulyatsiya qilish mumkin: * / @keyframes kechiktiruvchi animatsiya (0% (shaffoflik: 0;) 80% (shaffoflik: 0;) 100% (shaffoflik: 1;)) / * Ko'rsatish uchun animatsiya. bilan shakllantiradi E-pochta manzili va tugma. Kechiktirish simulyatsiyasi ham ishlatiladi * / @keyframes form -animatsiyasi (0% (shaffoflik: 0; o'ng: -400 piksel;) 90% (shaffoflik: 0; o'ng: -400 piksel;) 95% (shaffoflik: 0,5; o'ng: 20 piksel; ) 100% (shaffoflik: 1; o'ng: 0px;)) / * Bu animatsiya videoning boshida qayiqni ekranga chiqarish uchun ishlatiladi: * / @keyframes qayiqda-animatsiya (0% (chapda: -200px; ) 100% (chapda: 20 piksel;)) / * Bulutlar uchun animatsiya. Bulutlarning birinchi guruhi markazdan, ikkinchisi - ekranning o'ng tomonida harakat qila boshlaydi. Birinchi guruh ekrandan sekin ko'rinadi, ikkinchisi esa o'ngda. Chap guruh butunlay yashirilgandan so'ng, bulutlar asl holatiga juda tez qaytadi: * / @keyframes bulutli animatsiyasi (0% (chapda: 0 piksel;) 99,9999% (chapda: -720 piksel;) 100% (chapda: 0 piksel); )) / * Oxirgi uchta animatsiya deyarli bir xil - farq elementlarning joylashuvida. Ular okean to'lqinlarini simulyatsiya qilishadi: * / @keyframes qayiq -animatsiyasi (0% (pastda: 0px; chapda: 0px;) 25% (pastda: -2px; chapda: -2px;) 70% (pastda: 2 piksel; chapda: - 4px;) 100% (pastda: -1px; chapda: 0px;)) @keyframes suv orqasidagi animatsiya (0% (pastda: 10px; chapda: -20px;) 25% (pastda: 8 piksel; chapda: -22 piksel); ) 70% (pastda: 12 piksel; chapda: -24 piksel;) 100% (pastda: 9 piksel; chapda: -20 piksel;)) @keyframes suv -old -animatsiyasi (0% (past: -70 piksel; chap: -30 piksel;) 25% (pastki: -68px; chap: -32px;) 70% (pastki: -72px; chap: -34px;) 100% (pastki: -69 piksel; chap: -30 piksel;))

Xulosa

Bu darslikda biz bir nechta asosiy tushunchalarni bilib oldik:

1. Urug'li elementlar o'z animatsiyalaridan tashqari ota -onasidan ham animatsiya oladilar.
2. Banner yaratishda kodni mavjud CSS loyihasi bilan bir -biriga mos kelmasligi uchun yagona identifikatordan foydalanishga harakat qilish kerak.
3. Elementlarning pozitsiyasi va uslubi orqaga moslikni saqlab qolish uchun animatsiya mavjud emasdek tanlanishi kerak.
4. Iloji bo'lsa, bir nechta elementlar uchun bitta animatsiyadan foydalanish kerak.

Shubhasiz, eng yorqinlardan biri tendentsiyalar 2012 rivojlanish davom etmoqda CCS3, HTML5. Bugun biz misollarning katta va juda foydali sharhini taklif qilamiz " 20+: CSS3 uchun ijodiy va foydali darsliklar. da taklif qilingan SpeckyBoy... Barcha misollar ustida tuzilgan JavaScript holda tozalash, taqdim etilgan o'quv qo'llanmalarida demo va yuklab olish uchun tayyor CSS3 fayllari mavjud.

Ishonchimiz komilki, bu texnikalar va uslublar veb -ishlab chiquvchilar uchun foydali bo'ladi!

CSS3 bo'yicha darslar :

1. CS3 rasm galereyalari, slayderlar, tasvir effektlari

1.1 CSS3 slayder

Men ishonmayman, lekin har xil effektli bu slayder faqat CSS3 -da yaratilgan, juda ta'sirli.

1.2. CSS3 slayder effekti bilan to'liq ekranli fon

Veb -dizaynerlar uzoq vaqtdan beri sayt uchun turli xil fonlarni sinab ko'rishgan, lekin hozirgacha sof CSS yordamida juda kam ish qilish mumkin edi, siz JS -dan foydalanishingiz kerak edi. Endi CSS3 sizning saytingiz fonini xohlaganingizcha bajarishga imkon beradi - sizda yuqori sifatli fotosurat bilan bitta fon bo'lishi mumkin, siz turli xil effektlarga ega bo'lgan bir nechta fonni o'zgartirishingiz mumkin, va ekran parametrlariga qarab fonning o'lchamlari o'zgaradi. . Umuman olganda, ijodiy saytlar uchun ajoyib imkoniyat.

1.3. Lightbox CSS3 uchun

Ushbu qo'llanmada siz sof CSS -da turli xil effektlarga ega Lightbox -ni yaratishni o'rganishingiz mumkin.

1.4. CSS3 tasvir xususiyatlari

Bu darslik tasvirlar xususiyatlari uchun yumaloq burchaklar, soyalar va boshqa effektlar uchun yangi CSS3 xususiyatlarini namoyish etadi.

1.5. CSS3 animatsion banner

1.6 CSS3 yuklash paneli

1.7. CSS3 -dagi 3D tasma

Demo ko'rish yoki CSS3 kod fayllarini yuklab olish →

2. CSS3 menyusi, navigatsiya va tugmalar

2.1. CSS3 -da Apple.com menyusi

CSS3 yordamida mashhur Apple.com menyusini qanday yaratishni bilib oling.

2.2. CSS3 -da animatsion gorizontal menyu

CSS3 -ning har xil effektli menyusini qanday yasashni ko'rsatadigan oddiy darslik.

2.3. CSS3 -da animatsion vertikal menyu

2.4. CSS3 animatsion tugmalari

Animatsion ijodiy tugmalarning 7 ta namunasi bilan ajoyib darslik.

2.5. CSS3 tasvirli ijodiy animatsion menyu

Bu darsda 10 ta misoldan faqat ko'zlar oqadi. Bunday murakkab ijodiy menyular faqat JS yordamida yaratilgan. Ta'sirchan!

2.6. CSS3 bilan aylana bo'ylab harakatlanish effekti

Rasm tasvirlangan aylana shaklida tanlangan navigatsiya elementi ustida harakatlanayotganda g'ayrioddiy effekt. E'tibor bering!

2.7. CSS3 -da ochiladigan menyu

CSS3 pastki darajalari bilan oddiy ochiladigan menyuni amalga oshirish bo'yicha qo'llanma.

2.8. CSS3 -da animatsion o'tish bilan navigatsiya

3. CSS3 ga har xil effektlar

3.1. CSS3 -da jQuery holda animatsion asboblar paneli

Do'stlar, hammaga salom. Bugun biz Google Web Designer -da HTML5 formatida 3D effektli bannerlar yaratishda davom etamiz.

Va bu tushunarli, html5 va css3 -da yaratilgan bannerlar har qanday ekranda, ham kompyuterda, ham televizorda, ham mobil qurilmalarda ko'rsatiladi. Flash bannerlar haqida ham shunday deyish mumkin emas.

Bunga qo'shimcha ravishda, bu bannerlar shunchaki ishlatilishi mumkin va banner har qanday ekranda ajoyib ko'rinadi.

Va haqiqatni hisobga olsak mobil qurilmalar Internet resurslarini ko'rib chiqish uchun tobora ko'proq foydalanilmoqda, keyin - bu juda muhim.

Men oxirgi maqolada asosiyini va uning saytga joylashishini tasvirlab berdim. Shunday qilib, bugun men 3D effektini yaratish va velosipedni sozlash (qayta ko'rsatish) ga e'tibor qarataman. Shuningdek, "hodisalar" uchun bir nechta sozlamalarni ko'rib chiqamiz.

Bu jarayonni batafsil tasvirlab berish juda qiyin, shuning uchun men sizning e'tiboringizga video darsini taqdim etaman. Bu materialni o'zlashtirishni ancha osonlashtiradi. Bundan tashqari, mening bannerim loyihasi bilan arxivni misol sifatida yuklab oling.

3D effektli banner yaratishga tayyorgarlik.

Bannerning oxirgi ko'rinishi tayyorgarlikka bog'liq. Google Web Designer muharriri sizga haqiqiy 3D effektlarni yaratishga imkon beradi va bularning barchasi yoziladi html kodi, Vizual muharrirda hamma narsani to'g'ri birlashtirish kerak.

Yuqori sifatli 3D effektini yaratish uchun siz Photoshop-da bo'sh joylarni oldindan kesib olishingiz kerak, keyinchalik ularni Google Web Designer-ga qo'shish kerak bo'ladi.

Misol sifatida men quyidagi bo'sh joylarni tayyorladim:

Men bu bo'shliqlarni Photoshop -da yaratdim, lekin Internetda shunga o'xshash tasvirlar juda ko'p. Siz zo'riqishingiz shart emas, lekin tayyor variantlarni tanlang.

Eslatma: Agar siz bunday shablonlarni yaratish jarayoniga qiziqsangiz, bu haqda izohlarda yozing.

Umumiy banner tarkibi va ssenariysi haqida ham o'ylash kerak. Bannerni umuman qanday qabul qilish bunga bog'liq.

Google Web Designer -da 3D ob'ekt yaratish.

Shunday qilib, oxirgi maqolaga o'xshab, tahrirlovchini ishga tushiring, yangi loyiha yarating.

3D effekti kompozitsion tasvirni, ya'ni kerakli proyeksiyada joylashgan bir nechta bo'laklardan iborat tasvirni bildiradi.

Bu bir nechta rasmlarni guruhga birlashtirish yoki DIV blokiga joylashtirish kerak. Va falonchi to'g'ri bo'ladi. Lekin, men uchun DIV tomoni bilan ishlash qulayroq.

Qadam 1. DIV blokini yarating.

Shunday qilib, DIV blokini yaratish uchun chap panelda tanlang "Teglar bilan ishlash vositasi (D) ".

Shaxsiy identifikatorni belgilashga ishonch hosil qiling. Va bo'lim yordamida o'lchamlarini o'zgartiring "Xususiyatlar" o'ng oynada.

Endi biz blokni tanlashimiz kerak. Buning uchun chap panelda tanlang "Tanlov vositasi (V) " va sichqonchaning chap tugmachasini ikki marta bosish orqali DIV blokining ramkasini bosing. Shu bilan birga, u qizil rangga o'zgaradi.

Qadam 2. Rasmlarni joylashtiring.

Va endi eng mashaqqatli jarayon boshlanadi. Bitta tasvirning barcha elementlarini ochish kerak.

Mening ixtiyorimda quyidagi elementlar bor:

- Yuqori tomon.

- Yon (uchta alohida qismdan iborat).

Birinchidan, tasvirning orqa (orqa) qismini joylashtiring va bannerning o'rtasiga va yuqori chetiga tekislang.

Xuddi shu tarzda old tomonni qo'shing. Z o'qi bo'ylab tekislang va siljiting.

Yon kengligi 4 piksel (piksel) bo'lgani uchun men old va orqa tomonlarini Z o'qi bo'ylab 2 piksel va -2 pikselga o'tkazdim. Bu tasvirlar orasidagi bo'shliqni ta'minlaydi.

Eslatma: aniq siljish ko'rsatkichlari uchun skrinshotlarga qarang.

Keyin, yon qismni, barcha qismlarni alohida -alohida qo'shing. O'rnatish qulayligi uchun asboblardan foydalaning "3D ish maydonini aylantirish " va "Tarozi"... Ular sizga barcha tafsilotlarni aniq joylashtirishga yordam beradi.

Boshlash uchun, men unga barcha tasvirlarni bir tomonga, so'ngra nusxa ko'chirishni va boshqa tarafdagi ko'zgu proektsiyasiga joylashtirishni taklif qilaman.

Keyingi qadam yuqori chap burchakni qurishdir.

Endi yon tomonning markaziy qismi.

Va pastki burchak chap tomonda.

Yonning barcha elementlarini Y o'qi bilan 90 0 ga tenglashtirishga ishonch hosil qiling.

Endi siz kerakli qatlamni nusxalashingiz va uni yana joylashtirishingiz kerak, joylashuv parametrlarini qayta nomlashingiz va o'zgartirishingiz kerak, shuning uchun biz elementlarni o'ng tomonga olamiz.

Buning uchun pastki paneldagi rasmni tanlang - CTRL + C tugmalar birikmasini bosing (nusxa ko'chirish) va takroriy CTRL + V ni joylashtiring.

Dala tomondan yuqoridan pastgacha bo'lgani kabi boshlaylik, lekin faqat o'ngdan.

Yuqori o'ng qopqoq.

Men pastki qismini qilmadim, chunki u rasmda ko'rinmaydi.

Eng qiyin ish tugadi. Endi siz animatsiyani sozlashni boshlashingiz mumkin. Vizual namoyish sifatida tasvirni aylantiramiz.

Google Web Designer -da aylanish effektini yaratish.

Birinchi qadam - tasvirning barcha elementlarini o'z ichiga olgan DIV blokidan chiqish. Ya'ni, biz blok ichida aniq tasvirlar bilan ishlaganmiz va endi biz DIV blokini boshqarib, bir vaqtning o'zida barcha tasvirlar bilan ishlashimiz kerak bo'ladi.

Birinchidan, pastki paneldagi DIV tugmachasini bosing.

Shunday qilib, vaqt chaletida o'ng tugma sichqoncha, ikkita asosiy kadr yarating. Bu shunday ko'rinishi kerak:

Manba ramkasining o'rnini Y shkalasi bo'yicha -90 0 ga o'rnating.

Y shkalasi bo'yicha birinchi kalit kvadratni (ketma -ket ikkinchi) 0 0 ga o'rnating.

Y shkalasi bo'yicha ikkinchi kalit kadrni (ketma -ket uchinchi) 90 0 ga o'rnating.

Hammasini natijani tekshirish mumkin. Buning uchun tugmani bosing O'ynang.

To'g'ri, bizning tasvirimiz faqat bitta burilishni amalga oshiradi. Rasm doimiy aylanishi yoki bir necha marta aylanishi uchun siz tsiklik parametrlarni sozlashingiz kerak.

Google Web Designer -da pastadir o'rnatish.

Dasturda siz davriylik (takrorlanish) uchun bir nechta variantni sozlashingiz mumkin. Shunday qilib, siz bannerning barcha elementlari uchun yoki har bir element uchun alohida takrorlashni o'rnatishingiz mumkin.

Shuningdek, davriylik takrorlanishlar soni bilan cheklanishi yoki cheksiz bo'lishi mumkin.

Pastki panelda, har bir element yonida belgilar mavjud Qulf, ko'z, teskari o'q.

Shunday qilib, tsiklni o'rnatish uchun siz belgini bosishingiz kerak "Teskari o'q". Va cheklangan miqdordagi takrorlashni yoki cheksiz variantni tanlang.

Men animatsiyaning cheksiz aylanishini tanladim. Kelgusida men sozlashni xohlayman "Rivojlanishlar" shunday qilib, sichqoncha kursorini suring va aylanish olib tashlangach, aylanish to'xtaydi.

Sichqoncha kursorini banner ustiga olib borishda aylanishni to'xtating.

Birinchidan, birinchi kalit kadrga yorliq o'rnating (ketma -ket ikkinchi). Buni amalga oshirish uchun sichqonchaning o'ng tugmachasini ramka ustidan bosing va menyu bandini tanlang "Yorliq qo'shish"... Yorliq nomini kiriting va Enter tugmasini bosing.

Va keyingi bosqichda qabul qiluvchini tanlang « Sahifa 1 "... U erda boshqa variantlar bo'lmaydi.

Va oxirgi qadam, dastlabki bosqichda yaratgan yorliqni tanlang.

Voqealarni saqlang va tekshiring. Sichqoncha kursorini yorliq yaratilgan ramkaga olib borganingizda bannerning aylanishi to'xtaydi.

Sichqoncha kursorini siljitgandan so'ng aylanishni tiklash.

Qaytish davom etishi uchun kursorni yon tomonga o'tkazgandan so'ng, yana bitta hodisani o'rnating.

U avvalgisiga o'xshash tarzda tuzilgan, faqat ikkita farq bor.

Tadbir tanlangan "Sichqoncha"— « sichqoncha ".

Voqea - sichqonchani o'g'irlash

Va harakat sifatida Vaqt chizig'i — « togglePlay ".

Amal - Davom etish

3D effektli bannerimiz tayyor. Va siz har xil effektlar haqida o'ylashingiz mumkin.

Sichqonchani bosish va havolani ochish uchun voqea qilishni unutmang. Banner go'zallik uchun yaratilgan emas, axir.

Dastlab, bu jarayon murakkab bo'lib tuyulishi mumkin, lekin bir nechta banner yasaganingizdan so'ng, siz endi bunday ko'rinmay qolasiz.

Bugun hammasi shu, do'stlar. Barchangizga muvaffaqiyatlar tilayman, sharhlaringizni kutaman va sizni yangi maqolalar va video darslarida ko'ramiz.

Hurmat bilan, Maksim Zaytsev.

Veb -texnologiyalar va zamonaviy brauzerlarning rivojlanishi tufayli biz ko'p effektlarni ularsiz yaratishimiz mumkin Javascript yordamida... Bu veb -ishlab chiquvchilarning hayotini ancha osonlashtirdi. Axir, endi biz Javascriptdan foydalanmasdan sof CSS -da effektlar yaratishimiz mumkin. Shuning uchun, ushbu maqolada men sizga sof CSS -da bannerlar yaratish mumkinmi yoki yo'qmi, buning uchun nima kerakligi, shuningdek, ushbu yondashuvning ijobiy va salbiy tomonlari haqida aytib bermoqchiman.

CSS3 keng imkoniyatlarni taqdim etadi, faqat ulardan to'g'ri foydalanish kerak. Misol tariqasida, avvalgi "Sof CSS -dagi belgilar" ishimga havola berishni xohlayman:

Birinchidan, men CSS bannerlariga misollar keltirmoqchiman. Ehtimol, siz ularni allaqachon saytda ko'rgansiz, lekin ular nima va qanday yaratilganligini ham bilmagansiz.

Demo haqida: har bir misolning (bannerning) pastki qismida davomiyligi sekundlarda, shuningdek bannerni boshidan ko'rsatishni boshlaydigan "Yangilash" tugmasi mavjud.

Banner # 1 - "Sayt qurilishida individual trening":

Men bu bannerni taxminan 2 kun yaratdim. Nega buncha uzoq? Chunki koordinatalarni qayta hisoblashda bannerni moslashtirishga (uni rezina qilish uchun) biroz vaqt kerak bo'ldi. Endi uning o'lchami asosiy blokning kengligiga bog'liq (u CSS bannerini o'z ichiga oladi).

Men bu bannerni atigi 2-2,5 soat ichida yaratdim. Yaratish jarayonini sekinlashtirgan yagona narsa piktogramma tanlash edi. Chunki ular banner mavzusiga yaqin tanlanishi kerak edi.

Bu banner, shuningdek, u joylashgan blokli idishning kengligiga qarab cho'ziladi. Uni yaratish uchun taxminan 1,5 soat vaqt ketdi.

Bu bannerlar juda chiroyli ko'rinadi, lekin hamma narsa oddiymi? Keling, bannerlarni yaratishning ijobiy va salbiy tomonlarini ko'rib chiqaylik.

CSS bannerlarining afzalliklari va kamchiliklari:

CSS bannerini qanday yaratish mumkin?

1 Fikr

Birinchidan, siz bannerda qanday animatsiya bo'lishi kerakligini aniq bilishingiz kerak (nima, qaerdan va qaerdan ko'chishi va qaerda paydo bo'lishi kerak). Siz A4 varag'i olishingiz va har bir element qayerda harakatlanishini va bannerda nima bo'lishi kerakligini chizishingiz mumkin.

Agar siz nima bo'lishi kerakligini va qanday ishlashini bilmasangiz, siz banner yaratishni boshlay olmaysiz.

2 HTML tuzilishi

Keyingi qadam, elementlarni ko'chirish (va ular uchun animatsiya) qilish uchun HTML formatini yaratishdir. Ya'ni, siz hamma narsani bitta tasvir bilan qila olmaysiz, u o'ngga yoki chapga siljiydi va bu erda animatsiya tugadi.

Qoida tariqasida, boshqalari joylashgan bitta umumiy blok mavjud. Va bu umumiy blokda biz kerakli elementlarni boshqarishimiz mumkin.

3 CSS animatsiya

Oxirgi bosqich - bu bloklar uchun animatsiya yaratish, shuningdek ular uchun yozish uslublari, chunki animatsiyaning ba'zi qismlari sukut bo'yicha yashiringan.

Banner yaratish uchun siz CSS va HTML asoslarini yaxshi bilishingiz kerak.

Ushbu qo'llanma yordamida CSS -ning asosiy animatsiyasini o'rganing.

Chiqish

Hamma narsa zamonaviy brauzerlar CSS3 xususiyatlarini qo'llab -quvvatlang, ya'ni bannerlar bunday brauzerlarda to'g'ri ko'rsatiladi. Ammo JS plaginlari yordamida siz eski brauzerlar uchun CSS bannerlarini yaratishingiz mumkin. CSS animatsiyasi asoslarini o'rganganingizdan so'ng, siz bannerlar yaratish jarayonini tushunasiz va tez orada sof CSS -da birinchi banneringizni yaratasiz! 😉

Bugun biz CSS3 animatsiyasi yordamida banner yaratmoqchimiz.

Hozirda faqat Firefox va WebKit brauzerlari CSS animatsiyasini qo'llab -quvvatlaydilar, lekin biz bu bannerlarni boshqa brauzerlarda qanday ishlashini ko'rib chiqamiz (men ularni XVIII asr brauzerlari deb atayman). Biroq, zamonaviy CSS texnologiyalari bilan tajriba o'tkazishda barcha brauzerlarda (ayniqsa, IE 7 va undan pastda) katta qo'llab -quvvatlash kutilmasligi kerak.

Shunday qilib, keling, animatsion bannerlar yarataylik!

E'tibor bering: joyni tejash uchun brauzerning barcha prefikslari o'chirildi. To'liq CSS uchun manba fayllarini ko'ring. Agar siz CSS animatsiyasini bilmasangiz, tavsiya qilamanBirinchidanbuni o'qing.

HTML formatlash

Birinchidan, biz banner tuzilishini yaratamiz HTML yordam... Bu erda biz animatsiya qanday ishlashini xohlashimiz haqida o'ylashimiz kerak - bu bizning belgilarimiz tarkibidagi bolalar va ota -onalarga qanday ta'sir qiladi (men buni quyida tushuntiraman):