Építsen egy animált osztott képernyő céloldalt

A céloldala kulcsfontosságú elem az Ön számára honlap elrendezés . Ez az első igazi lehetőség, hogy be kell mutatnia vállalkozását, vagy az eladott terméket, így a tervezés kulcsfontosságú. A céloldalakat egy olyan fókuszált objektívnek tervezték, mint a cselekvés (CTA) hívására. A színek és képek használata a cselekvéshez és a felhasználói tapasztalat elengedhetetlen.

• Lásd a munkamódszert a bemutatóhoz

Ebben a bemutatóban sétálunk, hogyan lehet építeni egy vonzó céloldalt egy fiktív divat márkához. A megosztott képernyő kialakításának középpontjában nagyméretű képekkel és animációs átmenetekkel lesznek, amelyek lebegnek történnek. Ez az oldal kétértelműen hívja a cselekvési gombokat, és html-t használunk, Sass A vanília-JavaScript stílusához és az ES6 szintaxist (ne feledje, hogy győződjön meg róla, hogy biztos web hosting megfelel a webhely igényeinek). Túl összetett? Hozzon létre egy webhelyet a kód szükségessége nélkül, próbáljon ki egy egyszerű weboldal építője .

01. Szerezd meg a beállításokat

Ha a CODEPEN-t használja, győződjön meg róla, hogy a CSS beállítása "SCSS" -re van beállítva a tollbeállításaiban. Ezt a módosítást a Beállítások fülön kattintva választhatja ki, válassza a "CSS" lehetőséget, és módosítsa a CSS előfeldolgozóját a legördülő opciókban.

Ezután elkezdhetjük hozzáadni a HTML-ben. Egy "balra" nevű részt, és egy "jobbra" nevű részt egy konténer osztályon belül, mindkét szakasz egy "képernyő" osztályával rendelkeznek.

 & lt; div osztály = "konténer" & gt;
  & lt; szekció osztály = "képernyő balra" & gt;
  & lt; / szekció & gt;
  & lt; szekció osztály = "Képernyő jobb" & gt;
  & lt; / szekció & gt;
& lt; / div & gt; 

02. Befejezze a HTML-t

A HTML véglegesítéséhez minden egyes részhez hozzáadunk egy címet egy h1 címke. Alul, hogy hozzá kell adnunk egy gombba, amely egy másik oldalhoz kapcsolódik, ha ez valós projekt volt. Ezt egy osztályt adunk gomb hogy szép és egyszerű dolgokat tartsanak.

 & lt; div osztály = "konténer" & gt;
   & lt; szekció osztály = "képernyő balra" & gt;
    & lt; h1 & gt; Férfi divat & lt; / h1 & gt;
      & lt; gomb és gt;
       & lt; egy href = "#" osztály = "gomb" & gt; További információ & lt; / a / a gt;
      & lt; / gomb és gt;
    & lt; / szekció & gt;

    & lt; szekció osztály = "Képernyő jobb" & gt;
       & lt; h1 & gt; Womens Fashion & Lt; / h1 & gt;
        & lt; gomb és gt;
          & lt; egy href = "#" osztály = "gomb" & gt; További információ & lt; / a / a gt;
        & lt; / gomb és gt;
     & lt; / szekció & gt; 

03. Fedezze fel a Sass változókat

Az egyetlen dolog, amit mindannyian szeretünk a SASS-ről, a változók használata. Annak ellenére, hogy a natív CSS változók egyre több támogatást kapnak, a dolgokat biztonságban tartjuk a Sass használatával. Ezeket a csúcsra helyezzük .scss , és kiválaszthatja a kívánt színt, de használja rgba Az értékek nagyobb rugalmasságot adnak nekünk.

 / ** Változók ** /

$ konténer-bgcolor: # 444;
$ bal-bgcolor: RGBA (136, 226, 247, 0,7);
$ bal gomb-hover: RGBA (94, 226, 247, 0,7);
$ Right-Bgcolor: RGBA (227, 140, 219, 0,8);
$ Right-Button-Hover: RGBA (255, 140, 219, 0,7);
$ Hover-Szélesség: 75%;
$ kis szélesség: 25%;
$ animatespeed: 1000ms; 

04. A test stílusa beállítása

Először is, tisztázzuk az összes alapértelmezett párnázatot és margót a testnek, majd beállítjuk a betűtípus családt, hogy megnyitja a Sans-t. Ez csak a gombot érinti, így nem számít túl sok, amit használunk. Ezután beállítjuk a szélességet és a magasságot 100% És győződjön meg róla, hogy az x tengelyen túlfolyó bármi rejtve lesz.

 HTML, test {
  Padding: 0;
  Margó: 0;
  Font-Család: "Open Sans", Sans-Serif;
  Szélesség: 100%;
  Magasság: 100%;
  Overflow-X: Rejtett;
} 

05. Stílus A szakaszcímek

Itt az ideje, hogy válasszon egy Google betűtípust a szekciócímekhez - a Playfair kijelzőt választottuk. Ezután használja fordulatszám Biztosíthatjuk, hogy a szakaszcímek mindig az X tengelyen középre kerüljenek.

 H1 {
  betűméret: 5REM;
  Szín: #FFF;
  Pozíció: abszolút;
  Bal: 50%;
  Top: 20%;
  Átalakítás: Translatex (-50%);
  Fehér tér: mostrap;

  Font-család: "Playfair kijelző", Serif;
} 

06. A CTA-k kiemelkedése

A gombok a cselekvési hívásokként fognak működni, így ezeknek nagy, merésznek kell lenniük, és helyezkednek el, ahol könnyen kattintanak. Mindkét gomb fehér határon és érdekes átmeneti hatással lesz. A mindkét gomb alapértelmezett stílusai megegyeznek, de a színek megváltoztatjuk a színeket.

 .Button {
  Kijelző: blokk;
  Pozíció: abszolút;
  Bal: 50%;
  Top: 50%;
  Magasság: 2.6Rem;
  Padding-Top: 1.2Rem;
  Szélesség: 15Rem;
  Text-Align: Center;
  fehér szín;
  Határ: 3px szilárd #FFF;
  Border-RADIUS: 4PX;
  betűtípus: 600;
  Szöveges transzformáció: nagybetűk;
  Szöveges dekoráció: nincs;
  Átalakítás: Translatex (-50%);
  Átmenet: minden .2s; 

A fő gombok szép egyszerű hatása lesz, és az általunk megadott SASS változókat használjuk, amely hasonló színű lesz az oldal hátteréhez.

 .screen.left .kutton: Hover {
  Háttérszín: $ bal gomb-hover;
  Border-Color: $ bal gomb-hover;
}

.screen.right .Button: Hover {
  Háttérszín: $ Right-Button-Hover;
  Border-Color: $ Right-Button-Hover; 

07. Állítsa be a tartály hátterét és képernyőt

A konténer osztály fog működni, mint a mi Oldalburkoló és mi helyzetének beállításához, hogy ez relatív, egyszerűen azért, mert azt akarjuk, hogy helyezze el a képernyők abszolút pozicionálás. A konténer alapértelmezett háttérszínt adunk, de természetesen ezt nem fogjuk látni, mert különböző színeket fogunk beállítani mindkét képernyő hátterére.

 .container {
  Pozíció: relatív;
  Szélesség: 100%;
  Magasság: 100%;
  Háttér: $ konténer-bgcolor;
  
    .screen {
      Pozíció: abszolút;
      Szélesség: 50%;
      Magasság: 100%;
      túlcsordulás: rejtett;
    }
} 

08. Háttérképek hozzáadása

Mind a bal, mind a jobb szakaszok megjelenítik a képet, és megtalálhatja a royalty free stock képeket, mint a weboldalak, mint például Kimerít , Pixabay vagy Plexerek (amit ebben a bemutatóban használtam). A dolgok könnyebbé tétele érdekében egy szabad képüzenetet és megosztási szolgáltatást használtam az IMGBB-nak, hogy kapcsolatba léphetünk a CSS-ben.

 .screen.left {
  balra: 0;
  Háttér: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Központ nem ismétlés;
  Háttér méret: fedél;
  
    & amp;: előtt {
       Pozíció: abszolút;
      tartalom: "";
      Szélesség: 100%;
      Magasság: 100%;
      Háttér: $ bal-bgcolor;
    }
} 

Az oldal jobb oldali oldala szintén megjeleníti a háttérképet az IMGBB segítségével, és a háttérszínt rózsaszínre állítja. Ismét beállítottuk a háttérméretet borító . Ez lehetővé teszi számunkra, hogy lefedjünk az egész tartalmú elemet, amely esetünkben a .képernyő osztály.

 .screen.right {
  Jobb: 0;
  Háttér: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Központ nem ismétlés;
  Háttér méret: fedél;
  
   & amp;: előtt {
      Pozíció: abszolút;
      tartalom: "";
      Szélesség: 100%;
      Magasság: 100%;
      Háttér: $ Right-Bgcolor;
    }
} 

09. Átmenetek és lebegő hatások hozzáadása

Az animációs sebességet a hover hatása mindkét képernyőre egy átmenet vezérli, amely a változó értékét tartja $ animatespeed , amely 1000 ms (egy másodperc). Ezután befejezzük az animációt, hogy enyhítjük, ami könnyedén be- és kielégíti, hogy segítsen nekünk egy simább animációt.

 .screen.left, .screen.right, .screen.right: korábban, .screen.left: előtt {
  Átmenet: $ animatespeed minden könnyű-in-out;
} 

Most, hogy most meg akarunk történni, az, hogy ha a bal oldali képernyő fölé mozdul, akkor a JavaScript használatával hozzáadott osztály lesz (amit később írunk). Ha ezt az osztályt adjuk hozzá, akkor a képernyő, amely a megadott változó szélességétől függetlenül, amely 75% lesz, majd a jobb oldali érték a kisebb szélességváltozóra (25%) lesz beállítva.

 .hover balra .left {
  Szélesség: $ Hover-szélesség;
}

.hover balra .right {
  Szélesség: $ kis szélesség;
}
.hover-bal.
  Z-index: 2;
} 

Ez pontosan ugyanaz, mint a bal oldali, ahol egy új osztály kerül hozzáadásra az egérben a JavaScript segítségével, és a jobb képernyő ennek megfelelően ki van kapcsolva. Azt is meg kell győződnünk arról, hogy a z-index van beállítva 2 Tehát a CTA gomb egyértelműbbé válik.

 .hover-right .right {
  Szélesség: $ Hover-szélesség;
}

.HOVER-Right .left {
  Szélesség: $ kis szélesség;
}

.hover-right .left: előtt {
  Z-index: 2;
} 

10. Menjen a JavaScriptbe

A CSS-osztályok hozzáadásához és eltávolításához egy csomó JavaScriptet használunk, és az új ES6 funkciókat is használjuk. Az első dolog, amit meg kell tennünk, hogy bizonyos állandó változókat kell kijelenteni.

Mert használunk dokumentum Többször is beállítunk egy állandó változót doktor és tárolja a dokumentumot, így megtarthatjuk a "dokumentum" szót szép és rövid.

 CONST DOC = dokumentum; 

Most három konstansot kell beállítani, amelyek tárolják a .jobb , .bal és .tartály választók. A konstansok használata után azért van, mert tudjuk, hogy nem szeretnénk megváltoztatni ezeket az értéket, így a konstansok használata értelme van. Ezekkel a készletekkel előre tudunk menni, és hozzáadhatunk néhány egér eseményt.

 CONST JOW = DOC.QUERYSELECE (". JOBB");
const bal = doc.Queryselector (". balra");
CONST CONTAINER = doc.QuerySelector (". konténer"); 

Használni a bal Állandó változó Az utolsó lépésben bejelentettünk, most hozzáadhatunk egy eseményhallgatót. Ez az esemény lesz a mouseenter és a visszahívási funkció használata helyett egy másik ES6 funkciót használunk Arrow funkciók '(() = & gt;) .

 // egy osztályt ad hozzá a tartályelemhez a lebegéshez
balra.addeventlistener ("MouseTer", () = & gt; {
  konténer.Classlist.add ("Hover-bal");
}); 

11. Összehúzza és távolítsa el az osztályt

Az utolsó lépésben eseményhallgatójuk hozzáadta a mouseenter esemény, amely célozza meg a fő konténerosztályt, és hozzáad egy új osztályt lebeg a bal rész elemre. Ezzel a hívott hozzáadásával most el kell távolítanunk, amikor lebegítjük. Ezt a mouseleave esemény és a .remove () módszer.

 // eltávolítja a lebegéshez hozzáadott osztályt
balra.addeventlistener ("mouseleave", () = & gt; {
  konténer.Classlist.Remove ("Hover-bal");
}); 

Eddig mindent megtettünk a bal oldalon. Most befejezzük a JavaScriptet, és hozzáadjuk és eltávolítjuk az osztályokat a jobb oldali elemeken. Ismét használtuk a nyílfunkciót szintaxis, hogy mindent jól nézzen ki és rendben.

 Right.addeventlistener ("MouseTer", () = & gt; {
  konténer.Classlist.add ("Hover-Jobb");
});

right.addeventlistener ("mouseleave", () = & gt; {
  konténer.Classlist.Remove ("Hover-jobb");
}); 

12. Legyen reagálva

Nincs projekt - nem számít, milyen nagy vagy kicsi - kerülnie kell, hogy reagáljon. Tehát ebben a lépésben fogunk hozzá némi médialekérdezéseket a CSS, és hogy ez a kis projekt adaptív mobil eszközökre a lehető legjobban tudjuk. Érdemes megnézni a Eredeti kódpen hogy ez hogyan működik.

 @Media (max-szélesség: 800px) {
  H1 {
    betűméret: 2REM; }

  button {
    Szélesség: 12Rem;
  } 

Biztosítottuk, hogy ha az oldalunk szélessége 800px-ig leáll, a betűtípus és gombok mérete csökkentik. Tehát, hogy befejezze a dolgokat le szeretnénk megcélozni a magasságot is, és győződjön meg arról, mi a gombok lefelé az oldalt, ha az oldal magassága alá kerül 700 képpont.

 @Media (Max-Magasság: 700px) {
  button {
    Top: 70%;
}} 

Szeretné menteni az oldalakat? Exportálja őket PDF-ként, és mentse őket biztonságban felhő tároló .

Webdesign esemény London létrehozása 2018. szeptember 19-21-én való visszatérés, az iparág vezető hangszórók, a workshopok teljes napja és értékes hálózati lehetőségek - nem hagyja ki. Most kapja meg a Generate jegyet .

Ezt a cikket eredetileg közzétették a Net Magazine-ben 305 kiadása . Iratkozz fel most .

Olvass tovább:

• 5 szenzációs új webhelyet inspirálni kell
• Hozzon létre egy animált 3D szöveghatást
• 19 Nagy parallaxis görgetési webhelyek