Tarkib
- 01. Sozlang
- 02. HTMLni tugating
- 03. Sass o'zgaruvchilarini o'rganing
- 04. Tananing uslubini sozlang
- 05. Bo'lim sarlavhalarini uslubga o'tkazing
- 06. CTA-larni ajralib turing
- 07. Konteyner fonini va ekranlarini o'rnating
- 08. Orqa fon rasmlarini qo'shing
- 09. O'tishlarni va hover effektlarini qo'shing
- 10. JavaScript-ga o'ting
- 11. Sinf qo'shing va olib tashlang
- 12. Buni sezgir qiling
Sizning ochilish sahifangiz veb-saytingizning hal qiluvchi elementidir. Bu sizning biznesingizni yoki siz sotadigan mahsulotni tanishtirishingiz kerak bo'lgan birinchi haqiqiy imkoniyat, shuning uchun uning dizayni muhim ahamiyatga ega. Ochilish sahifalari harakatga da'vat (CTA) deb nomlanuvchi bitta yo'naltirilgan maqsad bilan ishlab chiqilgan. Ranglar va tasvirlardan harakatga chaqiriqlarni va foydalanuvchi tajribasini to'ldirish uchun foydalanish shart.
- Ushbu qo'llanma uchun ishlaydigan CodePen-ga qarang
Ushbu qo'llanmada biz qanday qilib xayoliy moda brendi uchun jozibali ochilish sahifasini yaratishni ko'rib chiqamiz. U katta ekranli tasvirlar va animatsion o'tishlar bilan bo'linadigan ekranga bo'lingan ekran atrofida joylashgan bo'ladi.Ushbu sahifada ikkita aniq chaqiruv tugmasi bo'ladi va biz HTML, Sass uchun uslublar va vanil JavaScript-ni ES6 sintaksisidan foydalanamiz (veb-xosting veb-saytingiz ehtiyojlariga mos kelishini unutmang). Juda murakkabmi? Kod talab qilmasdan veb-sayt yarating, oddiy veb-sayt yaratuvchisini sinab ko'ring.
01. Sozlang
Agar siz CodePen-dan foydalanayotgan bo'lsangiz, Pen sozlamalarida CSS-ning "SCSS" ga o'rnatilganligiga ishonch hosil qiling. Sozlamalar yorlig'ini bosish orqali ushbu o'zgarishni amalga oshirishingiz mumkin, 'CSS' ni tanlang va ochiladigan variantlarda CSS Preprocessor-ni SCSS-ga o'zgartiring.
Keyin biz HTML-ga qo'shishni boshlashimiz mumkin. Biz "chap" deb nomlangan bo'limni va "o'ng" deb nomlangan qismni konteyner sinfi ichida o'rab olamiz, ikkala bo'limga ham "ekran" klassi berilgan.
div> bo'lim> / bo'lim> bo'lim> / bo'lim> / div>
02. HTMLni tugating
HTML-ni yakunlash uchun har bir bo'lim uchun sarlavha qo'shib, h1 yorliq. Buning ostidagi tugmachani kiritishimiz kerak bo'ladi, agar bu haqiqiy loyiha bo'lsa, boshqa sahifaga bog'lanishimiz mumkin. Biz bu sinfni beramiz tugmasi narsalarni chiroyli va sodda saqlash uchun.
div> section> h1> Mens Fashion / h1> button> a href = "#"> Batafsil ma'lumot / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Learn Batafsil / a> / tugma> / bo'lim>
03. Sass o'zgaruvchilarini o'rganing
Sassni barchamiz yaxshi ko'radigan narsa bu o'zgaruvchilardan foydalanish. Mahalliy CSS o'zgaruvchilari ko'proq qo'llab-quvvatlansa ham, biz Sass-dan foydalangan holda xavfsizlikni ta'minlaymiz. Biz ularni eng yuqori qismiga qo'yamiz .scss, va siz xohlagan ranglarni tanlashingiz mumkin, lekin foydalanib rgba qadriyatlar bizga ko'proq moslashuvchanlikni beradi.
/ * * O'zgaruvchilar * * / $ konteyner-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ chap tugmachani bosish: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ right-button-hover: rgba (255, 140, 219, 0.7); $ hover-width: 75%; $ kichik kengligi: 25%; $ animateSpeed: 1000ms;
04. Tananing uslubini sozlang
Birinchidan, biz barcha standart to'ldirishni tozalaymiz va tanaga margin qilamiz va shrift oilasini Open Sans-ga o'rnatamiz. Bu faqat tugmachaga ta'sir qiladi, shuning uchun biz qaysi shriftdan foydalanishimiz juda muhim emas. Keyin kenglik va balandlikni o'rnatamiz 100% va X o'qida to'lib toshgan narsa yashirin bo'lishiga ishonch hosil qiling.
html, body {padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; kengligi: 100%; balandligi: 100%; overflow-x: yashirin; }
05. Bo'lim sarlavhalarini uslubga o'tkazing
Bo'lim sarlavhalari uchun Google shriftini tanlash vaqti keldi - biz Playfair Display-ni tanladik. Keyin foydalanish translateX bo'lim sarlavhalari doimo X o'qi ustida joylashganligiga ishonch hosil qilishimiz mumkin.
h1 {shrift hajmi: 5rem; rang: #fff; pozitsiya: mutlaq; chap: 50%; yuqori: 20%; aylantirish: translateX (-50%); oq bo'shliq: nowrap; font-family: 'Playfair Display', serif; }
06. CTA-larni ajralib turing
Bizning tugmachalar bizning chaqiruvimiz vazifasini bajaradi, shuning uchun ular bosish oson bo'lgan joyda katta, qalin va joylashtirilgan bo'lishi kerak. Ikkala tugma ham oq chegaraga va qiziqarli o'tish effektiga ega bo'ladi. Ikkala tugma uchun standart uslublar bir xil bo'ladi, ammo biz ularning ranglarini hover ustiga o'zgartiramiz.
.button {display: block; pozitsiya: mutlaq; chap: 50%; yuqori: 50%; balandligi: 2.6rem; plomba-tepa: 1,2rem; kengligi: 15rem; matn bilan tekislash: markaz; rang: oq; chegara: 3px qattiq #fff; chegara radiusi: 4px; shrift og'irligi: 600; matnni o'zgartirish: katta harf; matnni bezatish: yo'q; aylantirish: translateX (-50%); o'tish: barcha .2s;
Asosiy tugmachalar yoqimli oddiy hover effektiga ega bo'ladi va biz rang uchun belgilagan Sass o'zgaruvchilaridan foydalanamiz, bu sahifaning orqa foniga o'xshash rang bo'ladi.
.screen.left .tugmasi: hover {background-color: $ left-button-hover; border-color: $ chap tugma-hover; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ right-button-hover;
07. Konteyner fonini va ekranlarini o'rnating
Konteyner klassi bizning sahifamizni o'rash vazifasini bajaradi va biz ekranlarni mutlaq joylashishga o'rnatishni xohlaganimiz uchun biz bu holatni nisbiyga o'rnatamiz. Biz konteynerga odatiy fon rangini beramiz, ammo, albatta, bu ko'rinmaydi, chunki biz ikkala ekran foniga ham turli xil ranglarni o'rnatamiz.
.container {pozitsiyasi: nisbiy; kengligi: 100%; balandligi: 100%; fon: $ container-BgColor; .screen {pozitsiyasi: mutlaq; kengligi: 50%; balandligi: 100%; toshib ketish: yashirin; }}
08. Orqa fon rasmlarini qo'shing
Ikkala chap va o'ng qismda ham rasm aks etadi va siz Unsplash, Pixabay yoki Pexels kabi veb-saytlardan (men ushbu qo'llanmada foydalanganman) royalti bo'lmagan stok rasmlarini topishingiz mumkin. Ishni osonlashtirish uchun men imgbb deb nomlangan bepul rasmlarni joylashtirish va almashish xizmatidan foydalanganman, biz ularni CSS-ga bog'lay olamiz.
.screen.left {chap: 0; fon: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) markazining markazi takrorlanmaydi; fon hajmi: qopqoq; &: before {position: mutlaq; tarkib: ""; kengligi: 100%; balandligi: 100%; fon: $ left-bgColor; }}
Sahifaning o'ng tomonida imgbb yordamida fon tasviri ham ko'rsatiladi va biz fon rangini pushti rangga o'rnatamiz. Shunga qaramay, biz fon o'lchamini o'rnatdik qopqoq. Bu bizga o'z ichiga olgan elementni to'liq qamrab olishga imkon beradi .ekran sinf.
.screen.right {o'ng: 0; fon: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) markaz markazi takrorlanmaydi; fon hajmi: qopqoq; &: before {position: mutlaq; tarkib: ""; kengligi: 100%; balandligi: 100%; fon: $ right-bgColor; }}
09. O'tishlarni va hover effektlarini qo'shing
Ikkala ekranda bizning hover effektimiz uchun animatsiya tezligi o'zgaruvchimiz qiymatini ushlab turuvchi o'tish orqali boshqariladi $ animateSpeed, bu 1000ms (bir soniya) ga teng. Keyin biz animatsiyani biroz yumshatish bilan tugatamiz, bu bizga osonroq animatsiya berishga yordam beradigan kirish va chiqish qulayligi.
.screen.left, .screen.right, .screen.right: oldin, .screen.left: oldin {o'tish: $ animateSpeed all enay-in-out; }
Hozir biz nima qilishni xohlaymiz, chap ekranga o'tsangiz, ushbu bo'limga JavaScript-dan foydalangan holda sinf qo'shiladi (biz keyingi bosqichda yozamiz). Ushbu sinf qo'shilsa, u ekran biz ko'rsatgan o'zgaruvchining kengligi qancha bo'lishiga qarab kengayadi - bu 75% ni tashkil qiladi, so'ngra o'ng tomon kichikroq o'zgaruvchiga o'rnatiladi (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left. right: oldin {z-index: 2; }
Bu JavaScript-ni ishlatib, sichqoncha tugmachasiga yangi sinf qo'shiladigan chap tomon bilan bir xil ishlaydi va o'ng ekran shunga mos ravishda cho'zilib ketadi. Bundan tashqari, bunga ishonch hosil qilishimiz kerak z-indeks ga o'rnatildi 2 shuning uchun CTA tugmasi yanada ravshanroq bo'ladi.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: oldin {z-index: 2; }
10. JavaScript-ga o'ting
Biz CSS sinflarini qo'shish va o'chirishda yordam berish uchun vanil JavaScript-ni ishlatamiz va ba'zi yangi ES6 funktsiyalaridan foydalanamiz. Bizga kerak bo'lgan birinchi narsa - bu o'zgarmas o'zgaruvchilarni e'lon qilishdir.
Chunki biz foydalanamiz hujjat deb nomlangan doimiy o'zgaruvchini o'rnatamiz hujjat va hujjatni shu ichida saqlang, shunda biz "hujjat" so'zini yoqimli va qisqa tutishimiz mumkin.
const doc = hujjat;
Endi biz saqlaydigan yana uchta konstantani o'rnatishimiz kerak .to'g'ri, .chap va .idish tanlovchilar. Konstantalardan foydalanishimizning sababi shundaki, biz bularning qiymatini o'zgartirishni xohlamasligimizni bilamiz, shuning uchun doimiylardan foydalanish mantiqan to'g'ri keladi. Hozirda o'rnatilgan narsalar bilan biz ularga sichqoncha hodisalarini qo'shishimiz mumkin.
const right = doc.querySelector (". o'ng"); const chap = doc.querySelector (". chap"); const konteyner = doc.querySelector (". konteyner");
Dan foydalanish chap doimiy o'zgaruvchini biz so'nggi bosqichda e'lon qildik, endi unga voqea tinglovchisini qo'shishimiz mumkin. Ushbu tadbir bo'ladi sichqoncha markazi voqea va qayta qo'ng'iroq qilish funktsiyasidan foydalanish o'rniga biz boshqa ES6 funktsiyasidan foydalanamiz Strelka funktsiyalari ’(() =>).
// hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");}) ustidagi konteyner elementiga sinf qo'shadi;
11. Sinf qo'shing va olib tashlang
So'nggi bosqichda tadbir tinglovchimiz qo'shdi sichqoncha markazi asosiy konteyner sinfiga yo'naltirilgan va yangi sinf qo'shilgan voqea chapga chap qism elementiga. Bu qo'shilgan deb nomlangan bo'lsa, endi uni olib tashlaganimizda olib tashlashimiz kerak. Buni yordamida amalga oshiramiz sichqonchani qoldirish voqea va olib tashlash () usul.
// hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");}) ustiga qo'shilgan sinfni olib tashlaydi;
Hozirgacha biz chap ekranda hamma narsani qildik. Endi biz JavaScript-ni tugatamiz va o'ng qism elementlariga sinflar qo'shamiz va olib tashlaymiz. Yana biz hamma narsani chiroyli va ozoda saqlash uchun bu erda o'q funktsiyasi sintaksisidan foydalandik.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Buni sezgir qiling
Hech bir loyiha - katta yoki kichik bo'lishidan qat'i nazar - javob berishdan qochmasligi kerak. Shunday qilib, ushbu bosqichda biz CSS-ga ba'zi ommaviy axborot so'rovlarini qo'shamiz va ushbu kichik loyihani iloji boricha mobil qurilmalarga moslashtiramiz. Buning qanday ishlashini ko'rish uchun asl CodePen-ni tekshirishga arziydi.
@media (max-width: 800px) {h1 {font-size: 2rem; } .button {width: 12rem; }
Bizning sahifamizning kengligi 800 pikselga tushganda shrift va tugmalar hajmi kichrayishiga ishonch hosil qildik. Shunday qilib, ishlarni tugatish uchun biz ham balandlikni nishonga olmoqchimiz va sahifa balandligi 700 pikseldan pastga tushganda tugmachalarimiz sahifada pastga siljishini xohlaymiz.
@media (maksimal balandlik: 700px) {.tugma {yuqori: 70%; }}
O'z sahifalaringizni saqlamoqchimisiz? Ularni PDF formatida eksport qiling va xavfsiz bulutli xotirada saqlang.
Veb-dizayndagi tadbir Londonni yarating 2018 yil 19-21 sentyabr kunlari qaytib keladi, sanoatning etakchi ma'ruzachilarining to'liq jadvalini, to'liq kunlik seminarlar va qimmatbaho tarmoq imkoniyatlarini taklif qiladi - uni o'tkazib yubormang. Generate chiptangizni hoziroq oling.
Ushbu maqola dastlab net jurnalida chop etilgan 305-son. Hozir obuna bo'ling.
