Sisältö
- 01. Valmistaudu
- 02. Viimeistele HTML
- 03. Tutki Sass-muuttujia
- 04. Säädä vartalon muotoilua
- 05. Tyylittele osaston otsikot
- 06. Tee CTA: t erottuviksi
- 07. Aseta säiliön tausta ja näytöt
- 08. Lisää taustakuvia
- 09. Lisää siirtymiä ja leijuefektejä
- 10. Siirry JavaScriptiin
- 11. Lisää ja poista luokka
- 12. Tee siitä reagoiva
Laskeutumissivusi on tärkeä osa verkkosivustosi asettelua. Se on ensimmäinen todellinen tilaisuus esitellä yritystäsi tai myymääsi tuotetta, joten sen muotoilu on avainasemassa. Laskeutumissivut on suunniteltu yhdellä kohdennetulla tavoitteella, joka tunnetaan toimintakehotuksena. Värien ja kuvien käyttö toimintakehotusten ja käyttökokemuksen täydentämiseksi on välttämätöntä.
- Katso tämän opetusohjelman työskentelystä CodePen
Tässä opetusohjelmassa käydään läpi miten luoda mielenkiintoinen aloitussivu fiktiiviselle muotibrändille. Se keskittyy jaetun näytön muotoiluun, jossa on suuria kuvia ja animoituja siirtymiä, jotka tapahtuvat leijuvan.Tällä sivulla on kaksi selkeää toimintakehotuspainiketta, ja käytämme muotoiluun HTML: ää, Sassia ja ripaus vanilja JavaScriptiä, joka käyttää ES6: n syntaksia (muista varmistaa, että verkkopalvelusi sopii verkkosivustosi tarpeisiin). Liian monimutkainen? Luo verkkosivusto ilman koodia, kokeile yksinkertaista verkkosivustojen rakentajaa.
01. Valmistaudu
Jos käytät CodePeniä, varmista, että kynän asetuksissa CSS-asetukseksi on valittu SCSS. Voit tehdä tämän muutoksen napsauttamalla asetusvälilehteä, valitsemalla CSS ja vaihtamalla CSS-esiprosessorin asetukseksi SCSS avattavista vaihtoehdoista.
Sitten voimme aloittaa HTML-koodin lisäämisen. Kääritään osasto nimeltä 'vasen' ja 'oikea' osioon konttiluokkaan siten, että molemmille osioille annetaan luokka 'näyttö'.
div> jakso> / section> osio> / section> / div>
02. Viimeistele HTML
Viimeistelläksemme HTML: n, lisäämme jokaiselle osalle otsikon käyttämällä h1 tag. Sen alle meidän on lisättävä painike, joka linkittäisi toiselle sivulle, jos tämä olisi tosielämän projekti. Annamme tälle luokan -painiketta pitää asiat mukavina ja yksinkertaisina.
div> jakso> h1> Miesten muoti / h1> -painike> a href = "#"> Lisätietoja / a> / button> / section> section> h1> Naisten muoti / h1> button> a href = "#"> Learn Lisää / a> / painike> / osio>
03. Tutki Sass-muuttujia
Yksi asia, jota me kaikki rakastamme Sassissa, on muuttujien käyttö. Vaikka alkuperäiset CSS-muuttujat saavat enemmän tukea, pidämme asiat turvassa käyttämällä Sassia. Laitamme nämä ylhäältä .scss, ja voit valita haluamasi värit, mutta käyttämällä rgba arvot antavat meille enemmän joustavuutta.
/ * * Muuttujat * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ vasemmalla painikkeella hover: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ hiiren oikealla painikkeella: rgba (255, 140, 219, 0,7); $ hover-width: 75%; $ pieni leveys: 25%; $ animateSpeed: 1000 ms;
04. Säädä vartalon muotoilua
Ensinnäkin tyhjennämme kaikki oletuspehmusteet ja marginaalin rungolle ja asetamme sitten kirjasinperheeksi Open Sans. Tämä vaikuttaa vain painikkeeseen, joten sillä ei ole väliä liikaa mitä kirjasinta käytämme. Sitten asetamme leveyden ja korkeuden arvoon 100% ja varmista, että kaikki X-akselilla ylivuoto piiloutuu.
html, body {täyte: 0; marginaali: 0; font-family: ”Open Sans”, sans-serif; leveys: 100%; korkeus: 100%; ylivuoto-x: piilotettu; }
05. Tyylittele osaston otsikot
On aika valita Google-fontti osioiden nimille - olemme valinneet Playfair Display -palvelun. Käytä sitten kääntääX voimme varmistaa, että osioiden otsikot ovat aina X-akselin keskellä.
h1 {font-size: 5rem; väri: #fff; sijainti: absoluuttinen; jäljellä: 50%; yläosa: 20%; muunnos: translateX (-50%); valkoinen tila: nowrap; font-family: ”Playfair Display”, serif; }
06. Tee CTA: t erottuviksi
Painikkeet toimivat toimintakehotuksina, joten niiden on oltava isoja, rohkeita ja sijoitettuja sinne, missä niitä on helppo napsauttaa. Molemmilla painikkeilla on valkoinen reunus ja mielenkiintoinen siirtymävaikutus. Molempien painikkeiden oletustyylit ovat samat, mutta vaihdamme niiden väriä hiirellä.
.painike {display: block; sijainti: absoluuttinen; jäljellä: 50%; yläosa: 50%; korkeus: 2,6rem; toppaus: 1.2rem; leveys: 15rem; tekstin tasaus: keskellä; väri valkoinen; reunus: 3px kiinteä #fff; reunan säde: 4 kuvapistettä; kirjasimen paino: 600; tekstimuunnos: isot kirjaimet; tekstikoristelu: ei mitään; muunnos: translateX (-50%); siirtymä: kaikki .2s;
Päänäppäimillä on mukava yksinkertainen leijuva vaikutus, ja käytämme värille määrittelemiäsi Sass-muuttujia, jotka ovat samanlaisia värejä kuin sivun taustalla.
.screen.left .button: hover {background-color: $ left-button-hover; reunaväri: $ vasen painike-hover; } .screen.right .button: hiiren osoitin {background-color: $ right-button-hover; reunaväri: $ oikeanpuoleinen painike;
07. Aseta säiliön tausta ja näytöt
Säilöluokka toimii sivun kääreenä ja asetamme tämän sijainnin suhteelliseksi yksinkertaisesti siksi, että haluamme sijoittaa näytöt absoluuttiseen sijaintiin. Annamme säiliölle oletusarvoisen taustavärin, mutta tätä ei tietenkään näe, koska asetamme eri värit molemmille näytön taustoille.
.kontti {sijainti: suhteellinen; leveys: 100%; korkeus: 100%; tausta: $ container-BgColor; .näyttö {sijainti: absoluuttinen; leveys: 50%; korkeus: 100%; ylivuoto piilotettu; }}
08. Lisää taustakuvia
Sekä vasen että oikea osio näyttävät kuvan, ja löydät rojaltivapaita kuvakuvia verkkosivustoilta, kuten Unsplash, Pixabay tai Pexels (joita olen käyttänyt tässä opetusohjelmassa). Asioiden helpottamiseksi olen käyttänyt ilmaista kuvien isännöinti- ja jakamispalvelua nimeltä imgbb, johon voimme linkittää CSS: ssä.
.screen.left {vasen: 0; tausta: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) keskellä keskustaa ei-toista; taustakoko: kansi; &: ennen {sijainti: absoluuttinen; sisältö: ""; leveys: 100%; korkeus: 100%; tausta: $ left-bgColor; }}
Sivun oikeassa reunassa näkyy myös taustakuva käyttämällä imgbb: ää, ja asetamme taustavärin vaaleanpunaiseksi. Jälleen asetamme taustakoon peite. Tämän avulla voimme kattaa koko sisältävän elementin, joka meidän tapauksessamme on .näyttö luokassa.
.screen.right {right: 0; tausta: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) keskellä keskustaa ei toista; taustakoko: kansi; &: ennen {sijainti: absoluuttinen; sisältö: ""; leveys: 100%; korkeus: 100%; tausta: $ right-bgColor; }}
09. Lisää siirtymiä ja leijuefektejä
Hover-vaikutuksemme animaationopeutta molemmissa näytöissä ohjataan siirtymällä, joka pitää muuttujamme arvon $ animateSpeed, joka on 1000 ms (yksi sekunti). Sitten lopetamme antamalla animaatiolle jonkin verran keventämistä, mikä on helppous sisään ja ulos, mikä antaa meille sujuvamman animaation.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {siirtyminen: $ animateSpeed all-in-out; }
Haluamme nyt tapahtua siinä, että kun viet hiiren osoittimen vasemman näytön päälle, kyseiseen osioon lisätään luokka JavaScriptin avulla (jonka kirjoitamme myöhemmin). Kun tämä luokka lisätään, kyseinen näyttö venyy haluamaasi muuttujan leveyteen - mikä on 75%, ja sitten oikea puoli asetetaan pienempään leveysmuuttujaan (25%).
.hover-left .left {width: $ hover-width; } .overin vasemmalla .right {width: $ small-width; } .overin vasemmalla puolella .oikea: ennen {z-index: 2; }
Tämä toimii täsmälleen samalla tavalla kuin vasen puoli, jossa uusi luokka lisätään hiiren hoveriin JavaScriptiä käyttämällä, ja oikea näyttö venyy vastaavasti. Meidän on myös varmistettava z-indeksi on asetettu 2 joten CTA-painike tulee näkyvämmäksi.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .overi-oikea .left: ennen {z-index: 2; }
10. Siirry JavaScriptiin
Aiomme lisätä ja poistaa CSS-luokkia käyttämällä vaniljan JavaScriptiä, ja käytämme myös joitain uusia ES6-ominaisuuksia. Ensimmäinen asia, joka meidän on tehtävä, on julistaa muutamia muuttujia.
Koska käytämme asiakirja useammin kuin kerran asetamme vakiomuuttujan nimeltä dos ja säilytä asiakirja siinä, jotta voimme pitää sanan ”asiakirja” mukavan ja lyhyenä.
const doc = asiakirja;
Nyt meidän on asetettava vielä kolme vakiota, jotka tallentavat oikeassa, . vasen ja .kontti valitsimet. Syy vakioiden käyttämiseen on, koska tiedämme, ettemme halua muuttaa näiden arvoa, joten vakioiden käyttäminen on järkevää. Kun nämä on nyt asetettu, voimme mennä eteenpäin ja lisätä niihin joitain hiirtapahtumia.
const right = doc.querySelector (". oikea"); const left = doc.querySelector (". left"); const container = doc.querySelector (". säilö");
Käyttämällä vasemmalle vakiomuuttuja, jonka ilmoitimme viimeisessä vaiheessa, voimme nyt lisätä siihen tapahtumakuuntelijan. Tämä tapahtuma on hiiren keskitin tapahtuman aikana ja sen sijaan, että käytämme soittopyyntöä, käytämme toista ES6-ominaisuutta nimeltä Nuolitoiminnot ’(() =>).
// lisää luokan säilytyselementtiin hiiren vasemmalla.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Lisää ja poista luokka
Viimeisessä vaiheessa tapahtumakuuntelijamme lisäsi a hiiren keskusta tapahtuma, joka kohdistuu pääkonttiluokkaan ja lisää uuden luokan hiiren vasemmalle vasemmalle osaelementille. Kun tämä nimi on lisätty, meidän on nyt poistettava se, kun siirrämme sen päälle. Teemme tämän käyttämällä hiirellä tapahtuma ja .Poista() menetelmä.
// poistaa kursorin, joka lisättiin hiiren vasemmalle.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Tähän asti olemme tehneet kaiken vasemmalla näytöllä. Nyt lopetamme JavaScriptin ja lisätään ja poistetaan luokkia oikean osan elementeistä. Jälleen olemme tässä käyttäneet nuolitoiminnon syntaksia pitämään kaiken hyvältä ja siistiltä.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Tee siitä reagoiva
Mikään projekti - riippumatta siitä kuinka suuri tai pieni - ei saisi välttää reagoimista. Joten tässä vaiheessa lisäämme joitain mediakyselyjä CSS: ään ja teemme tästä pienestä projektista mahdollisimman mukautuvan mobiililaitteisiin. Kannattaa tarkistaa alkuperäinen CodePen nähdäksesi, miten tämä toimii.
@media (max-width: 800px) {h1 {font-size: 2rem; } .painike {leveys: 12rem; }
Olemme varmistaneet, että kun sivumme leveys on 800 pikseliä, fontin ja painikkeiden koko pienenee. Joten lopuksi haluamme kohdistaa myös korkeuden ja varmistaa, että painikkeemme liikkuvat sivua alaspäin, kun sivun korkeus on alle 700 kuvapistettä.
@media (max-height: 700px) {.painike {yläosa: 70%; }}
Haluatko tallentaa sivusi? Vie ne PDF-tiedostoiksi ja tallenna ne turvalliseen pilvitallennustilaan.
Verkkosuunnittelutapahtuma Luo Lontoo palaa 19.-21. syyskuuta 2018, tarjoten pakatun aikataulun alan johtavia puhujia, koko päivän työpajoja ja arvokkaita verkostoitumismahdollisuuksia - älä missaa sitä. Hanki Generate-lippusi nyt.
Tämä artikkeli julkaistiin alun perin verkkolehdessä numero 305. Tilaa nyt.
