Экранның бөлінген қону парағын құрыңыз

Мазмұны

• 01. Орнатыңыз
• 02. HTML-ді аяқтаңыз
• 03. Sass айнымалыларын зерттеңіз
• 04. Дененің сәндеуін реттеңіз
• 05. Бөлім тақырыптарын стильдеу
• 06. CTA-ларды ерекшелендіріңіз
• 07. Контейнердің фонын және экрандарын орнатыңыз
• 08. Фондық кескіндерді қосыңыз
• 09. Өтпелі кезеңді және эффектілерді қосыңыз
• 10. JavaScript-ке көшу
• 11. Сыныпты қосу және жою
• 12. Сезімтал етіп жасаңыз

Сіздің кіру бетіңіз сіздің сайтыңыздың орналасуындағы шешуші элемент болып табылады. Бұл сіздің бизнесіңізді немесе сіз сататын өнімді таныстырудың алғашқы нақты мүмкіндігі, сондықтан оның дизайны шешуші болып табылады. Қондырғыш беттер іс-әрекетке шақыру (CTA) деп аталатын бір бағытталған мақсатпен жасалған. Әрекет шақыруларын және пайдаланушы тәжірибесін толықтыру үшін түстер мен кескіндерді пайдалану міндетті болып табылады.

• Осы оқулық үшін жұмыс кодын қараңыз

Бұл оқулықта біз сәнді сән бренді үшін тартымды кіру парағын қалай құруға болатынын қарастырамыз. Ол экранға бөлінген экранның дизайнында үлкен кескіндермен және анимациялық ауысулармен айналасында болады.Бұл бетте екі нақты шақыру батырмасы болады және біз HTML, Sass сәндеу үшін және ES6 синтаксисін қолданатын ванильді JavaScript қолданамыз (сіздің веб-хостингіңіз сіздің веб-сайтыңыздың қажеттіліктеріне сәйкес келетіндігін ұмытпаңыз). Тым күрделі ме? Кодексіз веб-сайт жасаңыз, қарапайым веб-сайт құрастырушысын қолданып көріңіз.

01. Орнатыңыз

Егер сіз CodePen-ді қолдансаңыз, Pen параметрлерінде CSS-тің ‘SCSS’ күйіне орнатылғанына көз жеткізіңіз. Параметрлер қойындысын басу арқылы осы өзгерісті енгізуге болады, ‘CSS’ таңдаңыз және ашылмалы опцияларда CSS Preprocessor-ді SCSS-ке өзгертіңіз.

Содан кейін HTML-ге қосуды бастауға болады. Біз «сол жақ» деп аталатын бөлімді және «оң жақ» деп аталатын бөлімді контейнер сыныбының ішіне орамақпыз, екі бөлімге де «экран» сыныбы беріледі.

div> бөлім> / бөлім> бөлім> / бөлім> / div>

02. HTML-ді аяқтаңыз

HTML-ді аяқтау үшін біз әр бөлімге тақырыпты қосамыз h1 тег. Оның астына батырма қосу керек, егер бұл шынайы жоба болса, басқа бетке сілтеме жасайды. Біз бұған сыныпты береміз батырмасы заттарды жақсы әрі қарапайым етіп сақтау.

div> section> h1> Mens Fashion / h1> button> a href = «#»> Қосымша мәліметтер / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = «#»> Learn Толығырақ / a> / түймесі> / бөлім>

03. Sass айнымалыларын зерттеңіз

Sass-ті жақсы көретін нәрсе - айнымалыларды қолдану. CSS-тің жергілікті айнымалылары көбірек қолдау тауып отырса да, біз Sass көмегімен қауіпсіздікті қамтамасыз етеміз. Біз бұларды өзіміздің жоғарғы жағымызға қоямыз .scss, және сіз қалаған түстерді таңдай аласыз, бірақ қолдана отырып rgba құндылықтар бізге икемділік береді.

/ * * Айнымалылар * * / $ контейнер-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ сол жақ батырма: 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%; $ кіші ені: 25%; $ animateSpeed: 1000 мс;

04. Дененің сәндеуін реттеңіз

Біріншіден, біз барлық әдепкі төсемдерді алып тастаймыз және денеге шетін шығарамыз, содан кейін қаріптер тобын Open Sans етіп орнатамыз. Бұл батырмаға ғана әсер етеді, сондықтан біз қандай шрифт қолданатынымыз өте маңызды емес. Содан кейін ені мен биіктігін орнатамыз 100% және X осінен асып түсетін кез-келген нәрсе жасырылатынына көз жеткізіңіз.

html, негізгі мәтін {padding: 0; маржа: 0; font-family: ‘Open Sans’, sans-serif; ені: 100%; биіктігі: 100%; толып кету-x: жасырын; }

05. Бөлім тақырыптарын стильдеу

Бөлім атаулары үшін Google қаріпін таңдау уақыты келді - біз Playfair Display таңдадық. Содан кейін пайдалану аударуX біз бөлімнің тақырыптары әрдайым X осінде орналасқандығына көз жеткізе аламыз.

h1 {қаріп өлшемі: 5rem; түс: #fff; позиция: абсолютті; сол жақта: 50%; жоғарғы: 20%; түрлендіру: translateX (-50%); ақ бос орын: nowrap; font-family: ‘Playfair Display’, serif; }

06. CTA-ларды ерекшелендіріңіз

Біздің батырмалар біздің іс-қимылға шақыруымыз ретінде әрекет етеді, сондықтан оларды басу оңай болатын жерлерде үлкен, батыл және орналастыру керек. Екі түйменің де ақ жиегі және қызықты өту әсері болады. Екі батырманың әдепкі мәнерлері бірдей болады, бірақ біз олардың түстерін жылжытқанда өзгертеміз.

.түймесі {дисплей: блок; позиция: абсолютті; сол жақта: 50%; жоғарғы: 50%; биіктігі: 2.6 рем; төсеме-үстіңгі жағы: 1,2 рем; ені: 15рем; мәтінмен туралау: орталық; түс: ақ; шекара: 3px қатты #fff; шекара радиусы: 4px; қаріп салмағы: 600; мәтінді түрлендіру: бас әріп; мәтіндік безендіру: жоқ; түрлендіру: translateX (-50%); ауысу: барлығы .2с;

Негізгі батырмалардың жылжу эффектісі жақсы болады және біз түс үшін біз анықтаған Sass айнымалыларын қолданамыз, бұл парақтың фонына ұқсас түс болады.

.screen.left .tugton: hover {background-color: $ left-button-hover; border-color: $ сол жақ батырма-hover; } .screen.right .түймешігі: hover {background-color: $ right-button-hover; border-color: $ right-button-hover;

07. Контейнердің фонын және экрандарын орнатыңыз

Контейнер сыныбы біздің парағымыздың орамы ретінде жұмыс істейді және біз бұл жағдайды салыстырмалы түрде қоямыз, өйткені біз экрандарды абсолютті позицияға орналастырғымыз келеді. Біз контейнерге әдепкі фон түсін береміз, бірақ, әрине, бұл көрінбейді, өйткені экранның екі фонына да әр түрлі түстер қоямыз.

.container {жағдайы: салыстырмалы; ені: 100%; биіктігі: 100%; өң: $ container-BgColor; .screen {позиция: абсолютті; ені: 50%; биіктігі: 100%; толып кету: жасырын; }}

08. Фондық кескіндерді қосыңыз

Сол жақта да, оң жақта да кескін бейнеленеді, және сіз Unsplash, Pixabay немесе Pexels сияқты веб-сайттардан роялтисіз акциялардың суреттерін таба аласыз (мен оны осы оқулықта қолдандым). Істерді жеңілдету үшін мен CSS-те байланыстыра алатын imgbb деп аталатын кескіндерді орналастыру және бөлісу қызметін қолдандым.

.screen.left {сол жақта: 0; фон: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) орталық орталығы қайталанбайды; фондық өлшем: мұқаба; &: дейін {позиция: абсолютті; мазмұны: »»; ені: 100%; биіктігі: 100%; өң: $ left-bgColor; }}

Беттің оң жағында imgbb көмегімен фондық сурет пайда болады, ал біз фон түсін қызғылт етіп қоямыз. Тағы да, біз фондық өлшемді орнаттық қақпақ. Бұл біздің құрамымыздағы элементті толығымен қамтуға мүмкіндік береді .экран сынып.

.screen.right {оң: 0; фон: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) орталық орталығы қайталанбайды; фондық өлшем: мұқаба; &: дейін {позиция: абсолютті; мазмұны: »»; ені: 100%; биіктігі: 100%; өң: $ right-bgColor; }}

09. Өтпелі кезеңді және эффектілерді қосыңыз

Екі экранда да біздің қозғалу эффектінің анимациялық жылдамдығы айнымалының мәнін сақтайтын ауысыммен басқарылады $ animateSpeed, бұл 1000 мс (бір секунд) құрайды. Содан кейін біз анимацияны жеңілдету арқылы аяқтаймыз, бұл бізге анимацияны жеңілдетуге көмектесетін жеңілдету және шығу.

.screen.left, .screen.right, .screen.right: before, .screen.left: before {o'tish: $ animateSpeed ​​all e-in-out; }

Біз қазір не істегіміз келеді, сол жақ экранға жылжытқан кезде JavaScript қолданатын бұл бөлімге сынып қосылады (біз оны келесі қадамда жазамыз). Осы сыныпты қосқан кезде сол экран біз көрсеткен айнымалының еніне қарай созылады - ол 75% құрайды, содан кейін оң жағы ені кішірек айнымалыға (25%) қойылады.

.hover-left .left {ені: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left. right: алдында {z-index: 2; }

Бұл сол жақпен бірдей жұмыс істейді, мұнда JavaScript-ті қолданып тышқанның апарылуына жаңа класс қосылады және оң жақ экран созылады. Біз сондай-ақ көз жеткізуіміз керек z-индексі орнатылған 2 сондықтан CTA батырмасы айқынырақ болады.

.hover-right .right {width: $ hover-width; } .hover-right .left {ені: $ кіші ені; } .hover-right .left: алдында {z-index: 2; }

10. JavaScript-ке көшу

Біз CSS кластарын қосу мен жоюға көмектесетін ванильді JavaScript қолданамыз, сонымен қатар кейбір жаңа ES6 мүмкіндіктерін қолданамыз. Бізге бірінші кезектегі айнымалыларды жариялау керек.

Біз қолданатын боламыз құжат деп аталатын тұрақты айнымалыны бірнеше рет орнатамыз док және құжатты сол жерде сақтаңыз, сонда біз ‘document’ сөзін жақсы әрі қысқа ұстай аламыз.

const doc = құжат;

Енді тағы үш тұрақтыларды орнату керек, олар сақтайтын болады .жақсы, .сол және .контейнер таңдауыштар. Тұрақтыларды қолдануымыздың себебі, біз бұлардың мәнін өзгерткіміз келмейтіндігімізді білеміз, сондықтан тұрақтыларды қолдану мағынасы бар. Оларды орнатқан кезде, біз оларға тышқанның бірнеше оқиғаларын қоса аламыз.

const right = doc.querySelector («. оң»); const left = doc.querySelector («. сол жақта»); const контейнер = doc.querySelector («. контейнер»);

Пайдалану сол біз соңғы қадамда тұрақты айнымалы деп жарияладық, енді оған оқиға тыңдаушысын қосуға болады. Бұл іс-шара болады тышқан орталығы оқиға және қоңырау шалу функциясын пайдаланудың орнына біз тағы бір ES6 функциясын қолданамыз Көрсеткі функциялары ’(() =>).

// контейнер элементіне сыныпты қосады left.addEventListener («тышқан орталығы», () => {container.classList.add («hover-left»);});

11. Сыныпты қосу және жою

Соңғы қадамда біздің тыңдаушы а тышқан орталығы контейнердің негізгі класына бағытталған және деп аталатын жаңа класты қосатын оқиға солға апарыңыз сол жақ элементіне. Қосылған деп аталатындықтан, біз оны алып тастаған кезде оны алып тастауымыз керек. Біз мұны тышқан іс-шара және .жою () әдіс.

// hover left.addEventListener («mouseleave», () => {container.classList.remove («hover-left»);}) үстінде қосылған классты жояды;

Осы уақытқа дейін біз сол экранда бәрін жасадық. Енді біз JavaScript-ті аяқтап, оң жақтағы элементтерге сыныптар қосамыз және алып тастаймыз. Біз мұнда бәрін әдемі және ұқыпты ұстау үшін көрсеткі функциясының синтаксисін қолдандық.

right.addEventListener («mouseenter», () => {container.classList.add («hover-right»);}); right.addEventListener («тышқан тасқыны», () => {container.classList.remove («hover-right»);});

12. Сезімтал етіп жасаңыз

Бірде-бір жоба - үлкенді-кішілі болсын - жауап беруден аулақ болу керек. Сонымен, бұл қадамда біз CSS-ке бірнеше медиа сұраныстарды қосып, осы шағын жобаны мүмкіндігінше мобильді құрылғыларға бейімдейтін етіп жасаймыз. Мұның қалай жұмыс істейтінін білу үшін CodePen-дің түпнұсқасын қарап шығу керек.

@media (максималды ені: 800px) {h1 {қаріптің өлшемі: 2rem; } .түйме {ені: 12рем; }

Біздің парағымыздың ені 800 пиксельге жеткенде, қаріп пен батырмалардың өлшемі кішірейетініне көз жеткіздік. Сонымен, жұмысты аяқтау үшін биіктікті де мақсат еткіміз келеді және парақтың биіктігі 700px-ден төмен болған кезде батырмалардың беттің төмен жылжуын қамтамасыз етеміз.

@media (максималды биіктігі: 700px) {.түймесі {жоғарғы: 70%; }}

Беттеріңізді сақтағыңыз келе ме? Оларды PDF форматында экспорттаңыз және қауіпсіз бұлт қоймасында сақтаңыз.

Веб-дизайн іс-шарасы Лондон құру 2018 жылдың 19-21 қыркүйегінде қайтарады, жетекші спикерлердің кестесін, семинарлардың толық күнін және құнды желі мүмкіндіктерін ұсынады - жіберіп алмаңыз. Generate билетіңізді қазір алыңыз.

Бұл мақала алғашында нет журналда жарияланған 305 шығарылым. Қазір жазылыңыз.