యానిమేటెడ్ స్ప్లిట్-స్క్రీన్ ల్యాండింగ్ పేజీని రూపొందించండి

విషయము

• 01. ఏర్పాటు చేసుకోండి
• 02. HTML ని పూర్తి చేయండి
• 03. సాస్ వేరియబుల్స్ అన్వేషించండి
• 04. బాడీ స్టైలింగ్‌ను సర్దుబాటు చేయండి
• 05. విభాగం శీర్షికలను శైలి చేయండి
• 06. CTA లను ప్రత్యేకంగా నిలబెట్టండి
• 07. కంటైనర్ నేపథ్యం మరియు స్క్రీన్‌లను సెట్ చేయండి
• 08. నేపథ్య చిత్రాలను జోడించండి
• 09. పరివర్తనాలు మరియు హోవర్ ప్రభావాలను జోడించండి
• 10. జావాస్క్రిప్ట్‌లోకి వెళ్లండి
• 11. ఒక తరగతిని జోడించి తొలగించండి
• 12. ప్రతిస్పందించేలా చేయండి

మీ ల్యాండింగ్ పేజీ మీ వెబ్‌సైట్ లేఅవుట్‌లో కీలకమైన అంశం. ఇది మీ వ్యాపారాన్ని లేదా మీరు విక్రయించే ఉత్పత్తిని పరిచయం చేయడానికి మీకు లభించే మొదటి నిజమైన అవకాశం, కాబట్టి దీని రూపకల్పన కీలకం. ల్యాండింగ్ పేజీలు కాల్ టు యాక్షన్ (CTA) అని పిలువబడే ఒకే కేంద్రీకృత లక్ష్యంతో రూపొందించబడ్డాయి. కాల్స్ చర్యకు మరియు వినియోగదారు అనుభవాన్ని పూర్తి చేయడానికి రంగులు మరియు చిత్రాల ఉపయోగం తప్పనిసరి.

• ఈ ట్యుటోరియల్ కోసం వర్కింగ్ కోడ్‌పెన్ చూడండి

ఈ ట్యుటోరియల్‌లో, కల్పిత ఫ్యాషన్ బ్రాండ్ కోసం ఆకర్షణీయమైన ల్యాండింగ్ పేజీని ఎలా నిర్మించాలో మేము చూస్తాము. ఇది హోవర్‌లో జరిగే పెద్ద చిత్రాలు మరియు యానిమేటెడ్ పరివర్తనాలతో స్ప్లిట్-స్క్రీన్ డిజైన్ చుట్టూ కేంద్రీకృతమై ఉంటుంది.ఈ పేజీకి చర్య బటన్లకు రెండు స్పష్టమైన కాల్ ఉంటుంది మరియు మేము HTML, స్టైలింగ్ కోసం సాస్ మరియు ES6 వాక్యనిర్మాణాన్ని ఉపయోగించే వనిల్లా జావాస్క్రిప్ట్ యొక్క టచ్‌ను ఉపయోగిస్తాము (మీ వెబ్ హోస్టింగ్ మీ వెబ్‌సైట్ అవసరాలకు సరిపోతుందని నిర్ధారించుకోండి). చాలా క్లిష్టంగా ఉందా? కోడ్ అవసరం లేకుండా వెబ్‌సైట్‌ను సృష్టించండి, సాధారణ వెబ్‌సైట్ బిల్డర్‌ను ప్రయత్నించండి.

01. ఏర్పాటు చేసుకోండి

మీరు కోడ్‌పెన్ ఉపయోగిస్తుంటే, పెన్ సెట్టింగులలో CSS ‘SCSS’ కు సెట్ చేయబడిందని నిర్ధారించుకోండి. సెట్టింగుల ట్యాబ్‌పై క్లిక్ చేయడం ద్వారా మీరు ఈ మార్పు చేయవచ్చు, ‘CSS’ ఎంచుకోండి మరియు డ్రాప్-డౌన్ ఎంపికలలో CSS ప్రిప్రాసెసర్‌ను SCSS కు మార్చండి.

అప్పుడు మన HTML లో జోడించడం ప్రారంభించవచ్చు. మేము ‘ఎడమ’ అని పిలువబడే ఒక విభాగాన్ని మరియు కంటైనర్ క్లాస్‌లో ‘కుడి’ అని పిలువబడే ఒక విభాగాన్ని చుట్టబోతున్నాము, రెండు విభాగాలకు ‘స్క్రీన్’ తరగతి ఇవ్వబడుతుంది.

div> విభాగం> / విభాగం> విభాగం> / విభాగం> / div>

02. HTML ని పూర్తి చేయండి

మా HTML ని ఖరారు చేయడానికి, మేము ప్రతి విభాగానికి ఒక శీర్షికను జోడిస్తాము h1 ట్యాగ్. దాని క్రింద మనం ఒక బటన్‌లో జోడించాల్సి ఉంటుంది, ఇది వాస్తవ ప్రపంచ ప్రాజెక్ట్ అయితే మరొక పేజీకి లింక్ అవుతుంది. మేము దీనికి ఒక తరగతి ఇస్తాము బటన్ విషయాలు చక్కగా మరియు సరళంగా ఉంచడానికి.

div> section> h1> మెన్స్ ఫ్యాషన్ </ h1> బటన్> a href = "#"> మరింత తెలుసుకోండి / a> / button> / విభాగం> విభాగం> h1> మహిళల ఫ్యాషన్ </ h1> బటన్> a href = "#"> తెలుసుకోండి మరిన్ని </ a> / బటన్> / విభాగం>

03. సాస్ వేరియబుల్స్ అన్వేషించండి

సాస్ గురించి మనమందరం ఇష్టపడే ఒక విషయం వేరియబుల్స్ వాడకం. స్థానిక CSS వేరియబుల్స్‌కు ఎక్కువ మద్దతు లభిస్తున్నప్పటికీ, మేము సాస్‌ను ఉపయోగించడం ద్వారా వాటిని సురక్షితంగా ఉంచుతాము. వీటిని మన పైభాగంలో ఉంచుతాము .scss, మరియు మీకు కావలసిన రంగులను ఎంచుకోవచ్చు, కానీ ఉపయోగించడం rgba విలువలు మాకు మరింత సౌలభ్యాన్ని ఇస్తాయి.

/ * * వేరియబుల్స్ * * / $ కంటైనర్- Bg కలర్: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ ఎడమ-బటన్-హోవర్: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ కుడి-బటన్-హోవర్: rgba (255, 140, 219, 0.7); $ హోవర్-వెడల్పు: 75%; $ చిన్న-వెడల్పు: 25%; $ యానిమేట్‌స్పీడ్: 1000 మి;

04. బాడీ స్టైలింగ్‌ను సర్దుబాటు చేయండి

మొదట, మేము శరీరానికి అన్ని డిఫాల్ట్ పాడింగ్ మరియు మార్జిన్లను క్లియర్ చేసి, ఆపై ఫాంట్ ఫ్యామిలీని ఓపెన్ సాన్స్ కు సెట్ చేస్తాము. ఇది బటన్‌ను మాత్రమే ప్రభావితం చేస్తుంది, కాబట్టి మనం ఏ ఫాంట్‌ను ఉపయోగిస్తున్నామనేది పెద్దగా పట్టింపు లేదు. అప్పుడు మేము వెడల్పు మరియు ఎత్తును సెట్ చేస్తాము 100% మరియు X అక్షం మీద పొంగిపోయే ఏదైనా దాచబడకుండా చూసుకోండి.

html, బాడీ {పాడింగ్: 0; మార్జిన్: 0; font-family: ’ఓపెన్ సాన్స్’, సాన్స్-సెరిఫ్; వెడల్పు: 100%; ఎత్తు: 100%; ఓవర్ఫ్లో- x: దాచబడింది; }

05. విభాగం శీర్షికలను శైలి చేయండి

విభాగం శీర్షికల కోసం Google ఫాంట్‌ను ఎంచుకునే సమయం ఇది - మేము ప్లేఫేర్ ప్రదర్శనను ఎంచుకున్నాము. అప్పుడు ఉపయోగించడం translateX విభాగం శీర్షికలు ఎల్లప్పుడూ X అక్షంపై కేంద్రీకృతమై ఉన్నాయని మేము నిర్ధారించుకోవచ్చు.

h1 {font-size: 5rem; రంగు: #fff; స్థానం: సంపూర్ణ; ఎడమ: 50%; టాప్: 20%; పరివర్తన: అనువాద X (-50%); వైట్-స్పేస్: నౌరాప్; font-family: ’ప్లేఫేర్ డిస్ప్లే’, సెరిఫ్; }

06. CTA లను ప్రత్యేకంగా నిలబెట్టండి

మా బటన్లు చర్యకు మా కాల్స్ వలె పనిచేస్తాయి, కాబట్టి ఇవి పెద్దవి, ధైర్యంగా ఉండాలి మరియు అవి క్లిక్ చేయడానికి సులువుగా ఉంటాయి. రెండు బటన్లు తెల్లని అంచు మరియు ఆసక్తికరమైన పరివర్తన ప్రభావాన్ని కలిగి ఉంటాయి. రెండు బటన్ల డిఫాల్ట్ శైలులు ఒకే విధంగా ఉంటాయి, అయితే మేము వాటి రంగులను హోవర్‌లో మారుస్తాము.

.బటన్ {ప్రదర్శన: బ్లాక్; స్థానం: సంపూర్ణ; ఎడమ: 50%; టాప్: 50%; ఎత్తు: 2.6 రెమ్; పాడింగ్-టాప్: 1.2 రిమ్; వెడల్పు: 15rem; టెక్స్ట్-అలైన్: సెంటర్; రంగు: తెలుపు; అంచు: 3px ఘన #fff; సరిహద్దు-వ్యాసార్థం: 4px; ఫాంట్-బరువు: 600; టెక్స్ట్-ట్రాన్స్ఫార్మ్: అప్పర్ కేస్; టెక్స్ట్-డెకరేషన్: ఏదీ లేదు; పరివర్తన: అనువాద X (-50%); పరివర్తన: అన్నీ .2 సె;

ప్రధాన బటన్లు చక్కని సాధారణ హోవర్ ప్రభావాన్ని కలిగి ఉంటాయి మరియు మేము రంగు కోసం పేర్కొన్న సాస్ వేరియబుల్స్‌ని ఉపయోగిస్తాము, ఇది పేజీ యొక్క నేపథ్యానికి సమానమైన రంగు అవుతుంది.

.screen.left .బటన్: హోవర్ {background-color: $ left-button-hover; అంచు-రంగు: $ ఎడమ-బటన్-హోవర్; } .స్క్రీన్.రైట్ .బటన్: హోవర్ {నేపథ్య-రంగు: $ కుడి-బటన్-హోవర్; అంచు-రంగు: $ కుడి-బటన్-హోవర్;

07. కంటైనర్ నేపథ్యం మరియు స్క్రీన్‌లను సెట్ చేయండి

కంటైనర్ క్లాస్ మా పేజీ రేపర్ వలె పనిచేస్తుంది మరియు మేము స్క్రీన్‌లను సంపూర్ణ స్థానానికి ఉంచాలనుకుంటున్నాము కాబట్టి, దీని స్థానాన్ని సాపేక్షంగా సెట్ చేస్తాము. మేము కంటైనర్‌కు డిఫాల్ట్ నేపథ్య రంగును ఇస్తాము, అయితే ఇది కనిపించదు ఎందుకంటే మేము రెండు స్క్రీన్ నేపథ్యాలకు వేర్వేరు రంగులను సెట్ చేస్తాము.

.కంటైనర్ {స్థానం: సాపేక్ష; వెడల్పు: 100%; ఎత్తు: 100%; నేపథ్యం: $ కంటైనర్- BgColor; .స్క్రీన్ {స్థానం: సంపూర్ణ; వెడల్పు: 50%; ఎత్తు: 100%; ఓవర్ఫ్లో: దాచిన; }}

08. నేపథ్య చిత్రాలను జోడించండి

ఎడమ మరియు కుడి విభాగాలు రెండూ ఒక చిత్రాన్ని ప్రదర్శిస్తాయి మరియు మీరు అన్‌స్ప్లాష్, పిక్సబే లేదా పెక్సెల్స్ (నేను ఈ ట్యుటోరియల్‌లో ఉపయోగించినవి) వంటి వెబ్‌సైట్ల నుండి రాయల్టీ రహిత స్టాక్ చిత్రాలను కనుగొనవచ్చు. విషయాలు సులభతరం చేయడానికి, నేను మా 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. పరివర్తనాలు మరియు హోవర్ ప్రభావాలను జోడించండి

రెండు స్క్రీన్‌లపై మా హోవర్ ప్రభావం కోసం యానిమేషన్ వేగం మా వేరియబుల్ విలువను కలిగి ఉన్న పరివర్తన ద్వారా నియంత్రించబడుతుంది $ యానిమేట్ స్పీడ్, ఇది 1000ms (ఒక సెకను). అప్పుడు మేము యానిమేషన్‌కు కొంత సడలింపు ఇవ్వడం ద్వారా పూర్తి చేస్తాము, ఇది మాకు సున్నితమైన యానిమేషన్ ఇవ్వడానికి సహాయపడుతుంది.

.screen.left, .screen.right, .screen.right: ముందు, .screen.left: ముందు {పరివర్తన: $ animateSpeed ​​all easy-in-out; }

మేము ఇప్పుడు ఏమి చేయాలనుకుంటున్నామో, మీరు ఎడమ తెరపై హోవర్ చేసినప్పుడు, జావాస్క్రిప్ట్ ఉపయోగించి ఆ విభాగానికి ఒక తరగతి జోడించబడుతుంది (ఇది మేము తరువాతి దశలో వ్రాస్తాము). ఈ తరగతి జోడించబడినప్పుడు, ఆ స్క్రీన్ మనం పేర్కొన్న వేరియబుల్ యొక్క వెడల్పుకు విస్తరించి ఉంటుంది - ఇది 75% అవుతుంది, ఆపై కుడి వైపు చిన్న వెడల్పు వేరియబుల్ (25%) కు సెట్ చేయబడుతుంది.

.ఓవర్-ఎడమ. ఎడమ {వెడల్పు: $ హోవర్-వెడల్పు; } .ఓవర్-ఎడమ .రైట్ {వెడల్పు: $ చిన్న-వెడల్పు; } .ఓవర్-ఎడమ .రైట్: ముందు {z- సూచిక: 2; }

ఇది ఎడమ వైపులాగే పనిచేస్తుంది, ఇక్కడ జావాస్క్రిప్ట్ ఉపయోగించి మౌస్ హోవర్‌లో కొత్త తరగతి జోడించబడుతుంది మరియు కుడి స్క్రీన్ తదనుగుణంగా విస్తరించి ఉంటుంది. మేము కూడా నిర్ధారించుకోవాలి z- సూచిక కు సెట్ చేయబడింది 2 కాబట్టి CTA బటన్ మరింత ప్రముఖంగా మారుతుంది.

.ఓవర్-కుడి .రైట్ {వెడల్పు: $ హోవర్-వెడల్పు; } .ఓవర్-కుడి. ఎడమ {వెడల్పు: $ చిన్న-వెడల్పు; } .ఓవర్-కుడి. ఎడమ: ముందు {z- సూచిక: 2; }

10. జావాస్క్రిప్ట్‌లోకి వెళ్లండి

CSS తరగతులను జోడించడానికి మరియు తీసివేయడంలో మాకు సహాయపడటానికి మేము వనిల్లా జావాస్క్రిప్ట్ యొక్క టచ్‌ను ఉపయోగిస్తాము మరియు మేము కొన్ని కొత్త ES6 లక్షణాలను కూడా ఉపయోగిస్తాము. మనం చేయవలసిన మొదటి విషయం ఏమిటంటే కొన్ని స్థిరమైన చరరాశులను ప్రకటించడం.

ఎందుకంటే మేము ఉపయోగిస్తాము పత్రం ఒకటి కంటే ఎక్కువసార్లు, మేము స్థిరమైన వేరియబుల్ అని పిలుస్తాము పత్రం మరియు పత్రాన్ని దానిలో భద్రపరుచుకోండి, అందువల్ల మేము ‘పత్రం’ అనే పదాన్ని చక్కగా మరియు చిన్నదిగా ఉంచవచ్చు.

const doc = పత్రం;

ఇప్పుడు మనం నిల్వ చేసే మరో మూడు స్థిరాంకాలను సెట్ చేయాలి .రైట్, .లేఫ్ట్ మరియు .కంటైనర్ సెలెక్టర్లు. మేము స్థిరాంకాలను ఉపయోగిస్తున్న కారణం, వీటి విలువను మనం మార్చకూడదని మాకు తెలుసు, కాబట్టి స్థిరాంకాలను ఉపయోగించడం అర్ధమే. ఇప్పుడు సెట్ చేయబడిన వాటితో, మేము ముందుకు వెళ్లి వాటికి కొన్ని మౌస్ ఈవెంట్‌లను జోడించవచ్చు.

const right = doc.querySelector (". కుడి"); const left = doc.querySelector (". ఎడమ"); const container = doc.querySelector (". కంటైనర్");

ఉపయోగించి ఎడమ చివరి దశలో మేము ప్రకటించిన స్థిరమైన వేరియబుల్, ఇప్పుడు దానికి ఈవెంట్ వినేవారిని జోడించవచ్చు. ఈ ఈవెంట్ ఉంటుంది mouseenter ఈవెంట్ మరియు బ్యాక్ ఫంక్షన్‌ను ఉపయోగించటానికి బదులుగా, మేము మరొక ES6 లక్షణాన్ని ఉపయోగిస్తాము బాణం విధులు ’(() =>).

// హోవర్ లెఫ్ట్‌లోని కంటైనర్ ఎలిమెంట్‌కు క్లాస్‌ను జతచేస్తుంది. ADDEventListener ("mouseenter", () => {container.classList.add ("హోవర్-లెఫ్ట్");});

11. ఒక తరగతిని జోడించి తొలగించండి

చివరి దశలో, మా ఈవెంట్ వినేవారు జోడించారు a mouseenter ప్రధాన కంటైనర్ తరగతిని లక్ష్యంగా చేసుకుని, క్రొత్త తరగతిని జతచేసే ఈవెంట్ హోవర్-ఎడమ ఎడమ విభాగం మూలకానికి. ఈ జోడింపుతో, మేము ఇప్పుడు దాన్ని తీసివేసినప్పుడు దాన్ని తీసివేయాలి. మేము దీన్ని ఉపయోగించడం ద్వారా చేస్తాము మౌస్లీవ్ ఈవెంట్ మరియు .రెమోవ్ () పద్ధతి.

// హోవర్ ఎడమవైపు జోడించిన తరగతిని తొలగిస్తుంది .addEventListener ("mouseleave", () => {container.classList.remove ("హోవర్-లెఫ్ట్");});

ఇప్పటి వరకు మేము ఎడమ తెరపై ప్రతిదీ చేసాము. ఇప్పుడు మేము జావాస్క్రిప్ట్ను ముగించి, కుడి విభాగం అంశాలపై తరగతులను జోడించి తీసివేస్తాము. ప్రతిదీ చక్కగా మరియు చక్కగా చూడటానికి ఇక్కడ బాణం ఫంక్షన్ సింటాక్స్ ఉపయోగించాము.

right.addEventListener ("mouseenter", () => {container.classList.add ("హోవర్-రైట్");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("హోవర్-రైట్");});

12. ప్రతిస్పందించేలా చేయండి

ప్రాజెక్ట్ లేదు - ఎంత పెద్దది లేదా చిన్నది అయినా - ప్రతిస్పందించకుండా ఉండకూడదు. కాబట్టి, ఈ దశలో మేము మా CSS కు కొన్ని మీడియా ప్రశ్నలను జోడిస్తాము మరియు ఈ చిన్న ప్రాజెక్ట్ను మొబైల్ పరికరాలకు అనుకూలమైనదిగా మనకు సాధ్యమైనంత ఉత్తమంగా చేస్తాము. ఇది ఎలా పనిచేస్తుందో చూడటానికి అసలు కోడ్‌పెన్‌ను తనిఖీ చేయడం విలువ.

@ మీడియా (గరిష్ట-వెడల్పు: 800px) {h1 {font-size: 2rem; } .బటన్ {వెడల్పు: 12 రెమ్; }

మా పేజీ యొక్క వెడల్పు 800px కి తగ్గినప్పుడు, ఫాంట్ మరియు బటన్లు పరిమాణంలో తగ్గుతాయని మేము నిర్ధారించాము. కాబట్టి, పనులను పూర్తి చేయడానికి మేము ఎత్తును కూడా లక్ష్యంగా చేసుకోవాలనుకుంటున్నాము మరియు పేజీ ఎత్తు 700px కన్నా తక్కువకు వచ్చినప్పుడు మా బటన్లు పేజీని క్రిందికి కదిలించేలా చూడాలి.

@ మీడియా (గరిష్ట ఎత్తు: 700 పిక్స్‌) {.బటన్ {టాప్: 70%; }}

మీ పేజీలను సేవ్ చేయాలనుకుంటున్నారా? వాటిని PDF లుగా ఎగుమతి చేసి, వాటిని సురక్షిత క్లౌడ్ నిల్వలో సేవ్ చేయండి.

వెబ్ డిజైన్ ఈవెంట్ లండన్ సృష్టించండి 19-21 సెప్టెంబర్ 2018 న తిరిగి వస్తుంది, పరిశ్రమ-ప్రముఖ స్పీకర్ల ప్యాక్ షెడ్యూల్, పూర్తి రోజు వర్క్‌షాప్‌లు మరియు విలువైన నెట్‌వర్కింగ్ అవకాశాలను అందిస్తోంది - దాన్ని కోల్పోకండి. ఇప్పుడే మీ జనరేట్ టికెట్ పొందండి.

ఈ వ్యాసం మొదట నెట్ మ్యాగజైన్‌లో ప్రచురించబడింది సంచిక 305. ఇప్పుడే సభ్యత్వాన్ని పొందండి.