Nilalaman
- 01. Mag-set up
- 02. Tapusin ang HTML
- 03. Galugarin ang mga variable ng Sass
- 04. Ayusin ang estilo ng katawan
- 05. Estilo ng mga pamagat ng seksyon
- 06. Patayin ang mga CTA
- 07. Itakda ang background ng container at mga screen
- 08. Magdagdag ng mga larawan sa background
- 09. Magdagdag ng mga pagbabago at hover effects
- 10. Lumipat sa JavaScript
- 11. Magdagdag at magtanggal ng isang klase
- 12. Gawin itong tumutugon
Ang iyong landing page ay isang mahalagang elemento sa layout ng iyong website. Ito ang unang real opportunity na mayroon ka upang ipakilala ang iyong negosyo, o ang produktong ibinebenta mo, kaya't ang disenyo nito ay susi. Ang mga landing page ay dinisenyo na may isang solong nakatuon na layunin na kilala bilang isang call to action (CTA). Ang paggamit ng mga kulay at imahe upang umakma sa mga tawag sa pagkilos at karanasan ng gumagamit ay kinakailangan.
- Tingnan ang gumaganang CodePen para sa tutorial na ito
Sa tutorial na ito, tatalakayin namin kung paano bumuo ng isang nakakaengganyong landing page para sa isang kathang-isip na tatak ng fashion. Ito ay nakasentro sa paligid ng isang disenyo ng split-screen na may malalaking mga imahe at animated na mga paglipat na nangyayari sa hover.Ang pahinang ito ay magkakaroon ng dalawang malinaw na mga pindutan ng call to action at gagamit kami ng HTML, Sass para sa estilo at isang ugnay ng vanilla JavaScript na gumagamit ng ES6 syntax (tandaan upang matiyak na ang iyong web hosting ay naaangkop sa mga pangangailangan ng iyong website). Masyadong kumplikado? Lumikha ng isang website nang hindi nangangailangan ng code, subukan ang isang simpleng tagabuo ng website.
01. Mag-set up
Kung gumagamit ka ng CodePen, tiyaking ang CSS ay nakatakda sa 'SCSS' sa mga setting ng Panulat. Maaari mong gawin ang pagbabagong ito sa pamamagitan ng pag-click sa tab na mga setting, piliin ang 'CSS' at palitan ang CSS Preprocessor sa SCSS sa mga drop-down na pagpipilian.
Pagkatapos ay maaari nating simulan ang pagdaragdag sa aming HTML. Balot namin ang isang seksyon na tinatawag na 'kaliwa' at isang seksyon na tinatawag na 'kanan' sa loob ng isang klase ng lalagyan, na may parehong seksyon na binigyan ng isang klase ng 'screen'.
div> seksyon> / seksyon> seksyon> / seksyon> / div>
02. Tapusin ang HTML
Upang tapusin ang aming HTML, magdagdag kami ng isang pamagat para sa bawat seksyon gamit ang isang h1 tag Sa ilalim nito kakailanganin naming idagdag sa isang pindutan, na mai-link sa isa pang pahina kung ito ay isang proyekto sa totoong mundo. Bibigyan namin ito ng isang klase ng pindutan upang mapanatili ang mga bagay na maganda at simple.
div> section> h1> Mens Fashion / h1> button> a href = "#"> Matuto Nang Higit Pa / isang> / pindutan> / seksyon> seksyon> h1> pindutan ng Womens Fashion / h1>> isang href = "#"> Alamin Higit pa / isang> / pindutan> / seksyon>
03. Galugarin ang mga variable ng Sass
Ang isang bagay na gusto nating lahat tungkol sa Sass ay ang paggamit ng mga variable. Kahit na ang mga katutubong CSS variable ay nakakakuha ng higit na suporta, mapanatili naming ligtas ang mga bagay sa pamamagitan ng paggamit ng Sass. Ilalagay namin ang mga ito sa tuktok ng aming .scss, at maaari kang pumili ng anumang mga kulay na gusto mo, ngunit ang paggamit rgba ang mga halagang magbibigay sa atin ng higit na kakayahang umangkop.
/ * * Mga variable * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ left-button-hover: rgba (94, 226, 247, 0.7); $ kanan-bgKulay: rgba (227, 140, 219, 0.8); $ kanang-pindutan-hover: rgba (255, 140, 219, 0.7); $ hover-width: 75%; $ maliit na lapad: 25%; $ animateSpeed: 1000ms;
04. Ayusin ang estilo ng katawan
Una, tatanggalin namin ang lahat ng default padding at margin sa katawan at pagkatapos ay itatakda ang pamilya ng font sa Open Sans. Maaapektuhan lang nito ang pindutan, kaya't hindi masyadong mahalaga kung anong font ang ginagamit namin. Pagkatapos ay itatakda namin ang lapad at taas sa 100% at tiyakin na ang anumang umapaw sa axis X ay maitago.
html, katawan {padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; lapad: 100%; taas: 100%; overflow-x: nakatago; }
05. Estilo ng mga pamagat ng seksyon
Panahon na upang pumili ng isang font ng Google para sa mga pamagat ng seksyon - pinili namin ang Playfair Display. Pagkatapos gamit isalinX maaari naming matiyak na ang mga pamagat ng seksyon ay laging nakasentro sa X axis.
h1 {font-size: 5rem; kulay: #fff; posisyon: ganap; kaliwa: 50%; itaas: 20%; ibahin ang anyo: translateX (-50%); puting-puwang: nowrap; font-family: 'Playfair Display', serif; }
06. Patayin ang mga CTA
Ang aming mga pindutan ay kikilos bilang aming mga tawag sa pagkilos, kaya't ang mga ito ay dapat na malaki, naka-bold at nakaposisyon kung saan madali silang mag-click. Ang parehong mga pindutan ay magkakaroon ng isang puting hangganan at isang nakawiwiling epekto sa paglipat. Ang mga default na estilo para sa parehong mga pindutan ay magiging pareho, subalit babaguhin namin ang kanilang mga kulay sa pag-hover.
.button {display: block; posisyon: ganap; kaliwa: 50%; itaas: 50%; taas: 2.6rem; padding-top: 1.2rem; lapad: 15rem; text-align: gitna; kulay puti; hangganan: 3px solid #fff; border-radius: 4px; font-weight: 600; text-transform: uppercase; dekorasyon sa teksto: wala; ibahin ang anyo: translateX (-50%); paglipat: lahat ng .2s;
Ang mga pangunahing pindutan ay magkakaroon ng magandang simpleng hover effect at gagamitin namin ang mga variable ng Sass na tinukoy namin para sa kulay, na magiging isang katulad na kulay sa background ng pahina.
.screen.left .button: i-hover {background-color: $ left-button-hover; border-color: $ left-button-hover; } .screen. right .button: i-hover {background-color: $ kanang-button-hover; kulay ng hangganan: $ kanang-pindutang-hover;
07. Itakda ang background ng container at mga screen
Ang klase ng lalagyan ay kikilos bilang aming pambalot ng pahina at itatakda namin ang posisyon nito sa kamag-anak, dahil lamang nais naming iposisyon ang mga screen sa ganap na pagpoposisyon. Bibigyan namin ang lalagyan ng isang default na kulay ng background, ngunit syempre hindi ito makikita dahil magtatakda kami ng iba't ibang mga kulay sa parehong mga background ng screen.
.container {posisyon: kamag-anak; lapad: 100%; taas: 100%; background: $ container-BgColor; . screen {posisyon: absolute; lapad: 50%; taas: 100%; overflow: nakatago; }}
08. Magdagdag ng mga larawan sa background
Ang parehong kaliwa at kanang mga seksyon ay magpapakita ng isang imahe, at maaari kang makahanap ng mga imahe ng stock na walang royalty mula sa mga website tulad ng Unsplash, pixel o Pexels (na ginamit ko sa tutorial na ito). Upang gawing mas madali ang mga bagay, gumamit ako ng isang libreng pag-host ng imahe at serbisyo sa pagbabahagi na tinatawag na imgbb na maaari naming mai-link sa aming CSS.
.screen.left {left: 0; background: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1..webp’) center center walang ulit; sukat ng background: takip; &: bago ang {posisyon: absolute; nilalaman: ""; lapad: 100%; taas: 100%; background: $ left-bgColor; }}
Ang kanang bahagi ng pahina ay magpapakita rin ng isang imahe sa background gamit ang imgbb, at itatakda namin ang kulay ng background sa rosas. Muli, itinakda namin ang laki ng background sa takip. Papayagan kaming sakupin ang buong naglalaman ng elemento, na sa aming kaso ay ang . screen klase
.screen. kanan {kanan: 0; background: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) center center walang ulit; laki ng background: takip; &: bago ang {posisyon: absolute; nilalaman: ""; lapad: 100%; taas: 100%; background: $ kanan-bgColor; }}
09. Magdagdag ng mga pagbabago at hover effects
Ang bilis ng animasyon para sa aming hover na epekto sa parehong mga screen ay makokontrol ng isang paglipat na humahawak sa halaga ng aming variable $ animateSpeed, na kung saan ay 1000ms (isang segundo). Pagkatapos ay tatapusin namin sa pamamagitan ng pagbibigay sa animas ng ilang pagbawas, na kung saan ay isang kadalian sa at labas na makakatulong upang bigyan kami ng isang mas malinaw na animasyon.
.screen.left, .screen. Right, .screen. Right: before, .screen.left: bago ang {transition: $ animateSpeed all easy-in-out; }
Ang nais naming mangyari ngayon ay kapag nag-hover ka sa kaliwang screen, magkakaroon ng isang klase na maidaragdag sa seksyong iyon gamit ang JavaScript (na isusulat namin sa susunod na hakbang). Kapag naidagdag ang klase na ito, pagkatapos ay ang screen na iyon ay maiunat sa anumang lapad ng variable na tinukoy namin - na magiging 75%, at pagkatapos ang kanang bahagi ay maitatakda sa mas maliit na variable ng lapad (25%).
.hover-left .kaliwang {lapad: $ hover-width; } .hover-left. Right {width: $ maliit na lapad; } .hover-left. Right: bago ang {z-index: 2; }
Gumagawa ito ng eksaktong kapareho ng kaliwang bahagi, kung saan ang isang bagong klase ay idaragdag sa pag-hover ng mouse gamit ang JavaScript, at ang kanang screen ay uunahin nang naaayon. Kailangan din nating tiyakin na ang z-index ay nakatakda sa 2 kaya't ang CTA button ay naging mas kilalang-kilala.
.hover-right. kanang {lapad: $ hover-width; } .hover-right .kaliwang {lapad: $ maliit na lapad; } .hover-right .kaliwa: bago ang {z-index: 2; }
10. Lumipat sa JavaScript
Gumagamit kami ng isang ugnay ng vanilla JavaScript upang matulungan kaming magdagdag at mag-alis ng mga klase ng CSS at gagamitin din namin ang ilan sa mga bagong tampok na ES6. Ang unang bagay na kailangan nating gawin ay upang ideklara ang ilang pare-pareho na mga variable.
Dahil gagamitin namin dokumento higit sa isang beses, magtatakda kami ng isang pare-pareho na variable na tinatawag dok at iimbak ang dokumento sa loob nito upang mapanatili nating maganda at maikli ang salitang 'dokumento'.
const doc = dokumento;
Ngayon kailangan naming magtakda ng tatlong iba pang mga Constant na maiimbak ang . tama, .kaliwa at .lalagyan mga pipili. Ang dahilan kung bakit ginagamit namin ang mga pare-pareho ay dahil alam namin na hindi namin nais na baguhin ang halaga ng mga ito, kaya may katuturan ang paggamit ng mga pare-pareho. Sa mga itinakdang ngayon, maaari kaming magpatuloy at magdagdag ng ilang mga kaganapan sa mouse sa kanila.
Const right = doc.querySelector (". kanan"); Const left = doc.querySelector (". left"); lalagyan ng lalagyan = doc.querySelector (". lalagyan");
Gamit ang umalis na pare-pareho ang variable na idineklara namin sa huling hakbang, maaari na kaming magdagdag ng isang tagapakinig ng kaganapan dito. Ang kaganapang ito ay ang mouseenter kaganapan at sa halip na gumamit ng isang function ng callback, gagamit kami ng isa pang tampok na ES6 na tinawag Mga Arrow Function ’(() =>).
// nagdadagdag ng isang klase sa elemento ng lalagyan sa hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Magdagdag at magtanggal ng isang klase
Sa huling hakbang, nagdagdag ang aming tagapakinig ng kaganapan a mouseenter kaganapan na tina-target ang pangunahing klase ng lalagyan at nagdaragdag ng isang bagong klase na tinawag palawit-kaliwa sa elemento ng kaliwang seksyon. Naidagdag na ang tinawag na ito, kailangan na namin itong alisin kapag hover off namin ito. Gagawin namin ito sa pamamagitan ng paggamit ng mouseleave kaganapan at ang . alisin () pamamaraan
// tinatanggal ang klase na naidagdag sa pag-hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Hanggang sa ngayon nagawa na namin ang lahat sa kaliwang screen. Ngayon ay tatapusin namin ang JavaScript at magdagdag at mag-aalis ng mga klase sa mga tamang elemento ng seksyon. Muli naming ginamit ang arrow function syntax dito upang panatilihing maganda at malinis ang lahat.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Gawin itong tumutugon
Walang proyekto - gaano man kalaki o maliit - ang dapat na maiwasan na maging madaling tumugon. Kaya, sa hakbang na ito ay magdagdag kami ng ilang mga query sa media sa aming CSS, at gagawin ang maliit na proyekto na ito bilang adaptive sa mga mobile device hangga't makakaya namin. Mahalaga na suriin ang orihinal na CodePen upang makita kung paano ito gumagana.
@media (max-width: 800px) {h1 {font-size: 2rem; } .button {lapad: 12rem; }
Natiyak namin na kapag ang lapad ng aming pahina ay bumaba sa 800px, ang font at mga pindutan ay magbabawas sa laki. Kaya, upang matapos ang mga bagay na nais naming i-target din ang taas at siguraduhin na ang aming mga pindutan ay lumipat pababa ng pahina kapag ang taas ng pahina ay makakakuha ng mas mababa sa 700px.
@media (max-taas: 700px) {.button {itaas: 70%; }}
Nais mong i-save ang iyong mga pahina? I-export ang mga ito bilang mga PDF at i-save ang mga ito sa ligtas na cloud storage.
Kaganapan sa disenyo ng web Bumuo ng London babalik sa 19-21 Setyembre 2018, na nag-aalok ng isang naka-pack na iskedyul ng mga nagsasalita ng nangunguna sa industriya, isang buong araw ng mga pagawaan at mahalagang pagkakataon sa networking - huwag palampasin ito. Kunin ang iyong tiket na Bumuo ngayon.
Ang artikulong ito ay orihinal na na-publish sa net magazine maglabas ng 305. Mag-subscribe ngayon.
