Rakenna animoitu split-näytön aloitussivu

Aloitussivusi on ratkaiseva elementti Verkkosivuston asettelu . Se on ensimmäinen todellinen tilaisuus, jota sinun on esitettävä yrityksesi tai myymääsi tuote, joten sen muotoilu on avain. Laskeutumissivut on suunniteltu yhdellä keskittynellä tavoitteella, joka tunnetaan toimintaan (CTA). Värien ja kuvien käyttöä täydentämään toimintoja ja käyttäjäkokemus on pakko.

• Katso tämän opetusohjelman työkoodi

Tässä opetusohjelmassa kävelemme, miten rakentaa kaivertavan aloitussivun kuvitteellinen muotimerkki. Se keskittyy split-näytön suunnitteluun, jossa on suuria kuvia ja animoituja siirtymiä, jotka tapahtuvat hover. Tällä sivulla on kaksi selkeää puhelua toimintopainikkeisiin ja käytämme HTML: tä, Sass Styling ja Vanilla JavaScriptin kosketus, joka käyttää ES6-syntaksia (muista varmistaa, että sivujen ylläpito sopii verkkosivustosi tarpeisiin). Liian monimutkainen? Luo verkkosivusto ilman koodin tarvetta, kokeile yksinkertaista Verkkosivuston rakentaja .

01. Hanki käyttöön

Jos käytät Codepenia, varmista, että CSS on asetettu "SCS: iin" kynän asetuksissa. Voit tehdä tämän muutoksen napsauttamalla Asetukset-välilehteä, valitse "CSS" ja muuta CSS-esikäsittelyä SCS: iin pudotusvalikoimissa.

Sitten voimme aloittaa lisäämisen HTML: ssä. Aiomme kääriä osan nimeltä "Vasen" ja osio nimeltä "oikea" konttiluokassa, molemmilla osioilla annetaan "näytön" luokka.

 & lt; div luokka = "kontti" & gt;
  & lt; osion luokka = "näyttö vasemmalle" & gt;
  & lt; / osa & gt;
  & lt; osioluokka = "SCREEN OIKEA" & GT;
  & lt; / osa & gt;
& lt; / div & gt; 

02. Viimeistele HTML

Viimeistelemme HTML: n, lisäämme jokaisen osan nimikkeeseen h1 tag. Alapuolella, että meidän on lisättävä painike, joka yhdistyy toiseen sivuun, jos tämä oli reaalimaailman projekti. Annamme tämän luokan painike pitää asiat mukavat ja yksinkertaiset.

 & lt; div luokka = "kontti" & gt;
   & lt; osion luokka = "näyttö vasemmalle" & gt;
    & lt; h1 & gt; miesten muoti & lt; / h1 & gt;
      & lt; button & gt;
       & lt; a href = "#" class = "button" & gt; Lue lisää & lt; / a & gt;
      & lt; / button & gt;
    & lt; / osa & gt;

    & lt; osioluokka = "SCREEN OIKEA" & GT;
       & lt; h1 & gt; Naisten muoti & lt; / h1 & gt;
        & lt; button & gt;
          & lt; a href = "#" class = "button" & gt; Lue lisää & lt; / a & gt;
        & lt; / button & gt;
     & lt; / osa & gt; 

03. Tutustu SASS-muuttujiin

Yksi asia, jota me kaikki rakastamme Sassista on muuttujien käyttö. Vaikka alkuperäiset CSS-muuttujat saavat enemmän tukea, pidämme asioita turvassa käyttämällä Sassia. Laitamme nämä huipulle .SSSS , ja voit valita haluamasi värejä, mutta käyttää rgba Arvot antavat meille lisää joustavuutta.

 / ** Muuttujat ** /

$ Container-BGColor: # 444;
$ Left-Bgcolor: RGBA (136, 226, 247, 0,7);
$ vasen painike-hover: RGBA (94, 226, 247, 0,7);
$ Oikea-BGColor: RGBA (227, 140, 219, 0,8);
$ oikea-painike-hover: RGBA (255, 140, 219, 0.7);
$ hover-leveys: 75%;
$ pieni leveys: 25%;
$ AnimaSpeed: 1000ms; 

04. Säädä kehon muotoilua

Ensinnäkin puhumme kaikki oletuspehmusteet ja marginaali kehoon ja aseta sitten fonttiperhe avaamaan Sans. Tämä vaikuttaa vain painikkeeseen, joten sillä ei ole väliä liikaa mitä fonttia käytämme. Sitten asetetaan leveys ja korkeus 100% Ja varmista, että kaikki, jotka ylittävät X-akselin ylivuoto piiloutuvat.

 HTML, Body {
  Pehmuste: 0;
  Marginaali: 0;
  Font-perhe: "avoin sans", sans-serif;
  Leveys: 100%;
  Korkeus: 100%;
  Overflow-X: piilotettu;
} 

05. Tyyli osan otsikot

On aika valita Google-fontti osioiden nimikkeisiin - Olemme valinneet PlayFair-näytön. Käytä sitten Translatex Voimme varmistaa, että osan otsikot keskittyvät aina X-akseliin.

 H1 {
  Fontti-koko: 5rem;
  Väri: #FFF;
  Asema: Absoluuttinen;
  Vasen: 50%;
  Top: 20%;
  Muutos: Translatex (-50%);
  Valkoinen tila: Nowrap;

  Font-perhe: "Playfair-näyttö", serif;
} 

06. Tee CTA: t erottuvat

Painikkeemme toimivat toimintahakemuksina, joten ne ovat suuria, rohkeita ja sijoitettuja, joissa ne ovat helposti klikkaus. Molemmilla painikkeilla on valkoinen raja ja mielenkiintoinen siirtymävaikutus. Molempien painikkeiden oletustyylit ovat samat, mutta voimme muuttaa värejä hover.

 .button {
  Näyttö: Block;
  Asema: Absoluuttinen;
  Vasen: 50%;
  Top: 50%;
  Korkeus: 2.6rem;
  Padding-top: 1.2rem;
  Leveys: 15rem;
  Teksti-kohdistus: keskus;
  väri valkoinen;
  Ryhmä: 3px kiinteä #fff;
  Border-RADIUS: 4PX;
  Fonttipaino: 600;
  Teksti-muunnos: isot kirjaimet;
  Tekstisuunnittelu: Ei mitään;
  Muutos: Translatex (-50%);
  Siirtyminen: kaikki .2S; 

Pääpainikkeilla on mukava yksinkertainen hover vaikutus, ja käytämme SASS-muuttujia, jotka olemme määrittäneet värille, joka on samanlainen väri sivun taustalle.

 .screen.left .Button: Hover {
  Tausta-väri: $ Left-button-hover;
  Border-väri: $ vasen painike-hover;
}

.screen.right .button: Hover {
  Tausta-väri: $ oikeanpuoleinen -painike;
  Border-väri: $ oikea-painike-hover; 

07. Aseta säiliön tausta ja näytöt

Säiliön luokka toimii sivuna kääreinä ja asetamme tämän aseman suhteelliseksi, koska haluamme asettaa näytöt absoluuttiseen paikannus. Annamme säiliön oletusarvon väri, mutta tietenkin tätä ei näy, koska asetamme eri värejä molemmille näytön taustalle.

 .container {
  Asento: Suhteellinen;
  Leveys: 100%;
  Korkeus: 100%;
  Taustaa: $ Container-Bgcolor;
  
    .screen {
      Asema: Absoluuttinen;
      Leveys: 50%;
      Korkeus: 100%;
      ylivuoto piilotettu;
    }
} 

08. Lisää taustakuvia

Sekä vasemmalla että oikealla osassa näytetään kuva, ja voit löytää kuvia verkkosivustoilta, kuten Unsplash , Pixabay tai PEXELS (jota olen käyttänyt tässä opetusohjelmassa). Jotta asiat helpottavat, olen käyttänyt ilmaista IMGBB: tä, jota voimme linkittää CSS: ssä.

 .screen.left {
  Vasen: 0;
  Taustaa: URL ("https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg ') Center Center Ei-Toista;
  Tausta-koko: kansi;
  
    & amp;: ennen {
       Asema: Absoluuttinen;
      sisältö: "";
      Leveys: 100%;
      Korkeus: 100%;
      Tausta: $ Left-Bgcolor;
    }
} 

Sivun oikea puoli näyttää myös taustakuvan IMGBB: n avulla ja asetamme taustavärin vaaleanpunaiseksi. Jälleen, asetamme taustakoko peite . Näin voimme kattaa koko sisältävä elementti, joka meidän tapauksessamme on .screen Luokka.

 .screen.right {
  Oikea: 0;
  Taustaa: URL ("https://preview.bb.co/mtopcr/seth_doyle_82563_1.jpg") Center Center Ei-REPEAT;
  Tausta-koko: kansi;
  
   & amp;: ennen {
      Asema: Absoluuttinen;
      sisältö: "";
      Leveys: 100%;
      Korkeus: 100%;
      Tausta: $ oikealla bgcolor;
    }
} 

09. Lisää siirtymiä ja hover-vaikutuksia

Molempien näyttöjen siirtymävaiheen animaation nopeutta ohjataan siirtymällä, joka pitää muuttujan arvoa $ AnimaSpeed , joka on 1000 mm (yksi sekunti). Sitten lopetamme animaation helpottamalla animaation, mikä on helppous sisään ja ulos, joka auttaa antamaan meille pehmeämmän animaation.

 .screen.left, .screen.right, .screen.right: ennen, .screen.left: ennen {
  Siirtyminen: $ animaatitPeed kaikki helppokäyttöiset;
} 

Mitä haluamme nyt, on se, että kun siirrät vasemmanpuoleisen näytön yli, on luokka, joka lisätään tähän osaan JavaScript (jota kirjoitamme myöhemmässä vaiheessa). Kun tämä luokka lisätään, tämä näyttö ulottuu mihin tahansa määrittämäsi muuttujan leveys - joka on 75% ja sitten oikea puoli asetetaan pienempään leveysmuuttujaan (25%).

 .Hover-vasen .Left {
  Leveys: $ hover-leveys;
}

.hover-vasen. "
  Leveys: $ pieni leveys;
}
.hover-vasen. Oikea: ennen {
  Z-indeksi: 2;
} 

Tämä toimii täsmälleen samana kuin vasen puoli, jossa uusi luokka lisätään hiiren leikataan JavaScriptin avulla ja oikea näyttö venyttää vastaavasti. Meidän on myös varmistettava z-indeksi on asetettu 2 Joten CTA-painike tulee näkyvämmäksi.

 .Hover-Oikea. Oikea {
  Leveys: $ hover-leveys;
}

.hover-oikea .left {
  Leveys: $ pieni leveys;
}

.hover-oikea .Left: ennen {
  Z-indeksi: 2;
} 

10. Siirry JavaScriptiin

Käytämme Vanilla JavaScriptin kosketusta, joka auttaa meitä lisäämään ja poistamaan CSS-luokat ja käytämme myös uusia ES6-ominaisuuksia. Ensimmäinen asia, jota meidän on tehtävä, on julistaa joitakin jatkuvia muuttujia.

Koska käytämme asiakirja Yli kerran, asetamme vakion muuttujan doc ja tallenna asiakirja siinä, joten voimme pitää sanan "asiakirja" mukava ja lyhyt.

 Const doc = asiakirja; 

Nyt meidän on asetettava kolme muuta vakiota, jotka säilyttävät . on , .la ja .container Valitsimet. Syy, jota käytämme vakioita, on siksi, että tiedämme, ettet halua muuttaa näiden arvoa, joten vakioiden käyttö on järkevää. Näiden nyt asetettuja voimme mennä eteenpäin ja lisätä hiiren tapahtumia heille.

 Const Right = doc.querySelector (". Oikea");
const vasen = doc.querySelector (". vasen");
const container = doc.querySelector (". kontti"); 

Käyttämällä vasemmalle Jatkuva muuttuja, jonka julistimme viimeisessä vaiheessa, voimme nyt lisätä tapahtumien kuuntelijalle. Tämä tapahtuma on moonentti Tapahtuma ja soittopyynnön käyttämisen sijasta käytämme toista ES6-ominaisuutta Arrow Toiminnot '(() = & gt;) .

 // Lisää luokan säiliöelementtiin hover
vasen.addeventListener ("Mouseventer", () = & gt; {
  Container.classlist.Add ("Hover-Left");
}); 

11. Lisää ja poista luokka

Viimeisessä vaiheessa tapahtuman kuuntelija lisäsi a moonentti Tapahtuma, joka kohdistaa tärkein konttiluokan ja lisää uuden luokan kutsutaan Hover-vasen vasempaan osaan. Tätä kutsutaan lisättäväksi, nyt meidän on poistettava se, kun pidämme sen pois. Teemme tämän käyttämällä mouseleave tapahtuma ja .Poista() menetelmä.

 // poistaa luokan, joka on lisätty hover
vasen.addeventlistener ("mouseleave", () = & gt; {
  Container.classlist.Remove ("Hover-Left");
}); 

Tähän asti olemme tehneet kaiken vasemmalla näytöllä. Nyt lopetamme JavaScriptin ja lisäämällä ja poistamalla luokat oikealla osiossa. Jälleen olemme käyttäneet nuolinäytteen syntaksia täällä pitämään kaikki näköinen mukava ja siisti.

 Oikea.AddeventListener ("Moonenter", () = & gt; {
  kontti.classlist.Add ("Hover-Right");
});

oikea.AddeventListener ("Mouseleave", () = & gt; {
  kontti.classlist.Remove ("Hover-Right");
}); 

12. Tee se reagoiva

Ei projektia - riippumatta siitä, kuinka suuri tai pieni - pitäisi välttää reagoiva. Joten tässä vaiheessa lisäämme mediakysymyksiä CSS: lle ja tehdä tämän pienen projektin mukautuvaksi mobiililaitteisiin parhaimmillaan. On syytä tarkistaa Alkuperäinen koodi nähdä, miten tämä toimii.

 @Media (max-leveys: 800px) {
  h1 {
    Fontti-koko: 2rem; }

  .button {
    Leveys: 12rem;
  } 

Olemme varmistaneet, että kun sivun leveys laskee 800px: een, fontti ja painikkeet pienenevät kooltaan. Joten, lopeta asiat pois haluamme kohdistaa myös korkeuden ja varmistaa, että painikkeet siirtyvät sivulle, kun sivun korkeus on alle 700px.

 @Media (max-korkeus: 700px) {
  .button {
    Yläosa: 70%;
}} 

Haluatko tallentaa sivusi? Viedä ne PDF-tiedostoina ja tallenna ne turvassa pilvivarasto .

Web Design Tapahtuma Luo Lontoo Palauttaa 19.-21. Syyskuuta 2018, joka tarjoaa pakatun aikataulun teollisuuden johtavista puhujista, koko päivän työpajoista ja arvokkaista verkostoitumismahdollisuuksista - älä missaa sitä. Hanki tuottavat lippu nyt .

Tämä artikkeli julkaistiin alun perin Net-lehdessä Issue 305 . Tilaa nyt .

Lue lisää:

• 5 Sensaatiomainen uusi sivusto, joka on innoitettu
• Luo animoitu 3D-tekstivaikutus
• 19 Suuri parallax vieritys sivustot