O'tkazish uchun fon rasmlari tuzatildi.
Golovna Kimning darsidan biz zararsizlikni qanday yaratishni bilamiz fon rasmlari
, bu sahifani aylantirgan har soatda birma-bir o'zgartiriladi. Hozirgi kunda Internetda siz parallaks effekti bilan anonim veb-saytlarni yaratishingiz mumkin. Ushbu effektga CSS orqali erishish mumkin. G'oya shunchaki parallaks effektini fon tasvirlariga qo'llashdir..
Kim uchun bilasiz?
CSS kuch
HTML
juda oddiy: cherguemo elementlari
class.cd-fixed-bg bilan - fonni tuzatish uchun - elementlar bilan
class.cd-scrolling-bg bilan - fon uchun kengaytirilgan sozlamalar.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Shunga o'xshab ko'ringan, bir xilda buzilib ketgan, bir vaqtning o'zida avtomatik ravishda ishlaydigan mashina bilan bog'liq...
Uslublar
Fon-ilovaning kuchi uchun reklama ortidagi ma'no scroll bilan bir xil bo'lib, elementning fonini aylantirishni anglatadi.
Agar siz qiymatni fixed ga o'rnatsangiz, pozitsiya o'rnatiladi.
CSS
Tana, html, asosiy ( /* muhim */ balandlik: 100%; ) .cd-fixed-bg ( min-balandlik: 100%; fon o‘lchami: qopqoq; fon-ilova: qattiq; fon-takrorlash: takrorlanmaydi fon-pozitsiya: markaz markazi ) .cd-fixed-bg.cd-bg-1 (fon-tasvir: url("../img/cd-fon-1.jpg"); ) .cd-fixed- bg.cd-bg-2 (fon rasmi: url("../img/cd-background-2.jpg"); ) .cd-fixed-bg.cd-bg-3 (fon rasmi: url( "../img/cd-background-3.jpg" ) .cd-fixed-bg.cd-bg-4 (fon-tasvir: url("../img/cd-background-4.jpg" ); .cd-scrolling-bg (min. balandligi: 100%; )
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id = "cbp-fbscroller" klassi = "cbp-fbscroller" > |
U tezi Biz turli xil tasvirlarga ega bloklar bo'ylab harakat qilishni tanladik.
Hozirgi kunda Internetda siz parallaks effekti bilan anonim veb-saytlarni yaratishingiz mumkin.
Bu erda biz HTML belgilashni tugatdik.
Keling, uslublarga o'tamiz.
| 1 2 3 4 5 6 | Uslublarga kelsak, bu erda ularning ko'pi yo'q. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | Blokning balandligini iloji boricha robomo. Totto, Koristuvach brauzer oynasining balandligida. html , tana , .container, .cbp-fbscroller, .cbp-fbscroller boʻlimi (balandlik : 100% ; ) .cbp-fbscroller > nav (lavozim: qattiq;/* menyu bir vaqtning o'zida bir joyda */ z-indeks: 9999;/* menyuni bekor qilishning zarari yo'q */ o'ng: 100px;/* o'ng chetidan 100 piksel uzoqlikda bo'ladi */ yuqori: 50%;/* va vertikal ravishda sahifaning o'rtasida */ |
kengligi: 26px;
/* menyu kengligi */ -webkit-transform : translateY(-50% );
| 1 2 3 4 5 6 7 8 9 10 | -moz-transform : translateY(-50% ); |
-ms-transform: translateY(-50%);
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | transform: translateY(-50%); |
)</* menyuda teri elementi (tanlangan) uchun uslublar ostiga oʻting */.cbp-fbscroller > nav a (displey : blok ; joylashuv : nisbiy ; z-indeks : 9999 ; rang : shaffof ; kenglik : 26px ; balandlik : 26px ; kontur : yo‘q ; chekka : 25px 0 ; chegara ; chegara # : 4px fff ;) .no-touch .cbp-fbscroller > Nav a :hover #fff;)<Hokimiyatning xatti-harakatlari haqida fikr bildirar ekanman, men aniq o'ylaymanki, qanday kuch degani.
To'g'ri bo'lmagan har qanday narsa - izohlarda yozing!
Ana xolos. Ajoyib effekt, lekin bu qiyin emas, menimcha, saytga o'zingiznikini kiriting!
O'rnatish bilan bog'liq muammolar yuzaga kelsa, sizga muvaffaqiyat tilayman - izohlarda yozing :)
PS: Sayt dizaynini o'zgartirdim.
Menimcha, sharob tezroq va sodda.
Eslatib o'tamiz, agar siz veb-sahifani fon bilan aylantirsangiz, fon boshqa elementlar bilan birga aylanadi.
- Ba'zan bu o'rinli, lekin ba'zida siz fon tasviri orqali ko'rsatilgan rasm o'z hurmatini yo'qotishini xohlaysiz.
- Ushbu holatni boshqarish uchun fon biriktirish kuchi muhim ahamiyatga ega.
- Fon-ilova qiymati Quvvat tananing xatti-harakatlarini sozlash uchun uchta ma'noga ega bo'lishi mumkin: aylantirish (aylantirishdan keyingi qiymatlar) - veb-sahifa aylantirilganda fon tasvirlari boshqa elementlar bilan birga harakatlanadi. sobit - qiymat fon tasvirini o'zgartiradi va uni aylantirishga sezgir emas. Sahifani aylantirganingizda, fondagi fon buzilmaydi. mahalliy - ma'no berilgan qiymatlarga mahalliy aylantirish bilan ochiladigan ro'yxatdagilar orqali qo'shildi aylantiring
shunday harakat qil belgilangan.
Agar muhim bo'lsa
mahalliy
Fon element bilan bir vaqtda aylantiriladi va agar u aylantirilmasa (yoki elementning o'zi bilan aylantirilmasa) aylanmaydi.
Operatsiyani yaxshiroq tushunish uchun quyidagi dumbalarga qarang.
Ularni tenglashtirishingiz uchun barcha uchta fon-ilova qiymatlari (biz qachon deb taxmin qilamiz o'zgartirilgan CSS Siz bugungi ish stoli brauzeridan foydalanyapsiz!).
fon-ilova: aylantiring fon-ilova: belgilangan
fon-ilova: mahalliy Brauzerni qo'llab-quvvatlash IE9+, Edge 12+, Firefox 25+, Chrome (barcha versiyalar), Safari 5+, Opera 11.5+ ish stoli brauzerlarida fon-ilovaning barcha qiymatlarini qo'shimcha qo'llab-quvvatlash.
Z
Buzilmagan rasm effektiga erishish uchun fon quyidagi atributlarning CSS uslublar jadvalini qo'shimcha sozlashni talab qiladi: fon-ilova: sobit;
Keling, kengaytmalar.css bilan hujjatingizda mavjud bo'lgan CSS uslublar jadvali haqida gapiraylik
Bizga kerak bo'lgan narsalarni o'rnatishning ko'plab usullari mavjud.
1-usul. Biz rasmni tanlaymiz, go'yo kulimiz bor. U bu yigitga):
Men bu rasmni olaman (ko'proq ko'rish uchun eskiz ustiga bosing) yangi o'lcham U hujjati
css uslublari
, bu erda biz BODY parametrlarini o'rnatamiz, biz quyidagi konstruktsiyani kiritamiz:
BODY(fon-tasvir: url(fon tasvirining manzillari); fon-ilova: qattiq; fon-takrorlash: takrorlanmaydi; fon-pozitsiyasi: tepa;) Ushbu misolda biz fon tasviri sifatida butun ekranni to'ldiradigan katta rasmni olamiz (masalan, 1280 dan 1024 pikselgacha).
Eslatma:
Agar sizda CSS uslubidagi hujjat bo'lmasa, unda ko'rsatilganidek, uni yaratishingiz kerak - va o'sha darsda ko'rsatilganidek, html sahifangiz kodida CSS uslubidagi hujjatga xabar yozishingiz kerak.
Bundan tashqari, eksa va parametrlar qo'shimcha uslublar yordamida o'rnatiladi:
Fon rasmi: url (fon tasvirining manzillari);
- 1280 ga 1024 piksel o'lchamdagi fon rasmimiz manziliga yozing.
Fon-ilova: belgilangan;
css uslublari
- biz fon qutisini o'zgarmas qilib qo'ydik, shunda u buzilmaydi.
Fon-takrorlash: takrorlanmaslik;
- fonni ko'paytirmaslik uchun o'rnating.
Fon holati: yuqori;
- fon tasvirining o'rnini o'rnating: uni sahifaning yuqori chetiga joylashtiring.
Endi biz CSS uslublari hujjatiga BODY-ga ushbu konstruktsiyaning o'qini kiritdik:
Men ekranning 70 foizida oddiy jadval yaratdim va ravshanlik uchun unga matn va ikkita rasm joylashtirdim.
Sahifada bizda shunday narsa bor: (buzilmagan fon effektini olish uchun sahifani yuqoriga va pastga aylantiring).
BODY (fon: # e0ddd8 url (fon tasvirining manzillari) takrorlanmaydigan sobit chap tepa)
Fon:#e0ddd8 url (fon tasvirining manzillari) - fon tasviri ostidagi rang - bej, rasmning o'zi fonining rangi ostida.
Rasmimiz fonga tushmasligi uchun ehtiyot bo'ling (rasm faqat ekranning bir qismini egallaydi).
Takrorlanmaslik - rasm qayta tiklanmaydi (mening sevimli amerikalik aktyorlardan biri - Robert Duvall bilan bitta ajoyib rasm bor).
Ruxsat etilgan - fon o'rnatilgan, shuning uchun u buzilmaydi.
