Sestavte animovanou stránku přistání na rozdělení

Vaše přistávací stránka je klíčovým prvkem ve vašem rozložení webových stránek . Je to první skutečná příležitost, kterou musíte představit své podnikání, nebo produkt, který prodáváte, takže jeho design je klíč. Přistávací stránky jsou navrženy s jediným zaměřeným cílem známým jako volání na akci (CTA). Použití barev a obrázků pro doplnění hovorů na akci a uživatelská zkušenost je nutností.

• Podívejte se na pracovní catchen pro tento tutoriál

V tomto tutoriálu budeme procházet, jak budovat zapojenou přistávací stránku pro fiktivní módní značku. Bude se soustředit kolem designu Split-Screen s velkými obrazy a animovanými přechody, které se stávají na vznášejících se. Tato stránka bude mít dvě volání k akčním tlačítek a budeme používat HTML, Sass. Pro styling a dotek vanilky JavaScript, který používá syntaxe ES6 (nezapomeňte se ujistit web hosting je vyhovován vašim potřebám webových stránek). Příliš složitý? Vytvořte webovou stránku bez nutnosti kódu, zkuste jednoduché Webové stránky Builder. .

01. Získejte nastavení

Pokud používáte Codepen, ujistěte se, že CSS je nastavena na 'SCSS' v nastavení pera. Tuto změnu můžete provést kliknutím na kartu Nastavení vyberte 'CSS' a změňte předprocesor CSS do SCSS v rozevíracím možnosti.

Pak můžeme začít přidávat v našem HTML. Budeme zabalit sekci s názvem "Left" a sekce zvanou "vpravo" v rámci kontejnerové třídy, s oběma sekcemi dané třídy "obrazovky".

 & lt; divá třída = "kontejner" & gt;
  & lt; sekce Class = "Obrazovka vlevo" & gt;
  & lt; / sekce & gt;
  & lt; sekce Class = "Screen Právo" & GT;
  & lt; / sekce & gt;
& lt; / div & gt; 

02. Dokončete html

Chcete-li dokončit HTML, přidáme titul pro každou sekci pomocí H1. štítek. Pod tím, že budeme muset přidat do tlačítka, což by odkazovalo na jinou stránku, pokud se jednalo o projekt reálného světa. Dáme tuto třídu knoflík udržet věci pěkné a jednoduché.

 & lt; divá třída = "kontejner" & gt;
   & lt; sekce Class = "Obrazovka vlevo" & gt;
    Pánská móda & lt; / h1 & gt;
      & lt; tlačítko & gt;
       tlačítko href = "#" třída = "tlačítko" & gt; dozvědět se více & lt; / a & gt;
      & lt; / tlačítko & gt;
    & lt; / sekce & gt;

    & lt; sekce Class = "Screen Právo" & GT;
       & lt; h1 & gt; dámské módy & lt; / h1 & gt;
        & lt; tlačítko & gt;
          tlačítko href = "#" třída = "tlačítko" & gt; dozvědět se více & lt; / a & gt;
        & lt; / tlačítko & gt;
     & lt; / sekce & gt; 

03. Prozkoumejte proměnné SASS

Jedna věc, kterou všichni milujeme o Sass, je použití proměnných. I když nativní CSS proměnné jsou stále více podpory, budeme mít věci v bezpečí pomocí SASS. Dáme je na vrcholu našeho .csss. a můžete si vybrat jakékoli barvy, které chcete, ale používáte RGBA. Hodnoty nám dávají větší flexibilitu.

 / ** proměnné ** /

$ Container-BGColor: # 444;
$ levicový bgColor: RGBA (136, 226, 247, 0,7);
$ Left-Button-Hover: RGBA (94, 226, 247, 0,7);
$ pravý-bgColor: RGBA (227, 140, 219, 0,8);
$ Pravo-button-Hover: RGBA (255, 140, 219, 0,7);
$ Hover-šířka: 75%;
$ Malá šířka: 25%;
$ AnimaceSpeed: 1000ms; 

04. Upravte styl těla

Za prvé, budeme vymazat všechny výchozí polstrování a okraj k tělu a pak nastavit rodinu písma k otevření sans. To bude mít vliv pouze na tlačítko, takže nezáleží příliš mnoho, co písmo používáme. Pak nastavíme šířku a výšku 100% A ujistěte se, že něco, co přetéká na ose X, se skrývá.

 Html, tělo {
  Polstrování: 0;
  marže: 0;
  Font-Family: 'Open Sans', Sans-Serif;
  šířka: 100%;
  výška: 100%;
  Přetečení-X: Skrytý;
} 

05. Styl Sekce tituly

Je čas vybrat písmo Google pro tituly sekce - zvolili jsme zobrazení playfair. Pak pomocí TranslatEx. Můžeme se ujistit, že tituly sekce jsou vždy vycentrovány na ose X.

 H1 {
  Velikost písma: 5rem;
  Barva: #fff;
  Pozice: absolutní;
  vlevo: 50%;
  Top: 20%;
  Transformace: TranslatEx (-50%);
  Bílý prostor: Nowrap;

  FONT-FAMILY: 'DISPLAY PLAYFAIR', SERIF;
} 

06. Udělejte CTAS vyniknout

Naše tlačítka budou působit jako naše volání na akci, takže je třeba být velký, odvážný a umístěný tam, kde jsou snadno kliknuty. Obě tlačítka budou mít bílý okraj a zajímavý přechodový efekt. Výchozí styly pro obě tlačítka budou stejné, ale změníme jejich barvy na vznášející se.

 .button {
  Displej: blok;
  Pozice: absolutní;
  vlevo: 50%;
  top: 50%;
  Výška: 2.6rem;
  Padding-top: 1.2rem;
  šířka: 15rem;
  Text-ALIGN: CENTER;
  barva bílá;
  Hranice: 3px Solid #FFF;
  Poloměr hranic: 4px;
  Font-Hmotnost: 600;
  Textová transformace: velká;
  Textová dekorace: Žádný;
  Transformace: TranslatEx (-50%);
  Přechod: Všechny .2s; 

Hlavní tlačítka budou mít pěkný jednoduchý efekt vznášení a budeme používat proměnné SASS, které jsme zadali pro barvu, která bude podobná barva na pozadí stránky.

 .Screen.Left .button: Hover {
  Barva pozadí: $ levicový-cváč;
  Border-Color: $ Left-Button-Hover;
}

.screen.right. Button: Hover {
  Background-Color: $ Pravo-Button-Hover;
  Border-Color: $ Pravo-Button-Hover; 

07. Nastavte pozadí kontejneru a obrazovky

Třída kontejneru bude působit jako naší obálky stránky a budeme nastavit pozici tohoto příbuzného, ​​jednoduše proto, že chceme umístit obrazovky do absolutního umístění. Dáme kontejneru výchozí barvu pozadí, ale samozřejmě to nebude vidět, protože budeme nastavit různé barvy na pozadí obrazovky.

 .container {
  Pozice: Relativní;
  šířka: 100%;
  výška: 100%;
  Pozadí: $ Container-BGColor;
  
    .screen {
      Pozice: absolutní;
      šířka: 50%;
      výška: 100%;
      Přetečení: skryté;
    }
} 

08. Přidat obrázky na pozadí

Oba levé i pravé sekce zobrazí obrázek a můžete najít Stock fotografie z webových stránek, jako je Nesmyslný , Pixabay. nebo Pexels. (který jsem použil v tomto tutoriálu). Abychom usnadnili věci, použil jsem volný obraz hosting a sdílení služby nazvané IMGBB, na kterou můžeme spojit v našich CSS.

 .screen.left {
  vlevo: 0;
  Pozadí: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Centrum centrum no-repeat;
  Velikost na pozadí: kryt;
  
    & amp;: před {
       Pozice: absolutní;
      obsah: "";
      šířka: 100%;
      výška: 100%;
      Pozadí: $ levice-bgColor;
    }
} 

Na pravé straně stránky bude také zobrazit obrázek na pozadí pomocí IMGBB, a my nastavíme barvu pozadí na růžovou. Znovu nastavíme velikost pozadí Pokrýt . To nám umožní pokrytí celého obsahujícího prvku, který v našem případě je .obrazovka třída.

 .screen.right {
  vpravo: 0;
  Souvislosti: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Centrum centrum no-repeat;
  Velikost na pozadí: kryt;
  
   & amp;: před {
      Pozice: absolutní;
      obsah: "";
      šířka: 100%;
      výška: 100%;
      Pozadí: $ pravý-bgColor;
    }
} 

09. Přidejte přechody a vznášející se efekty

Rychlost animace pro náš vznášející se vliv na obou obrazovkách bude řízena přechodem, který má hodnotu naší proměnné $ AnimaceSpeed. , což je 1000ms (jedna sekunda). Pak skončíme tím, že dáte animaci nějakým uvolňováním, což je lehkost a ven, které nám pomůže, aby nám dala hladší animaci.

 .screen.left, .screen.right, .screen.right.right: před, .Screen.left: před {
  Přechod: $ AniMateSepeed Všechny usnadňující-in-out;
} 

To, co se chceme stát, je, že když se přesnáš přes levou obrazovku, bude do této sekce přidána třída pomocí JavaScriptu (který budeme psát v pozdějším kroku). Když je tato třída přidána, pak se obrazovka protáhnout na jakoukoliv šířku proměnné, kterou jsme zadali - která bude 75%, a pak bude pravá strana nastavena na menší šířku proměnnou (25%).

.
  Šířka: $ Hover-šířka;
}

vlevo vlevo .Right {
  Šířka: $ Malá šířka;
}
vlevo vlevo .Right: před {
  Z-index: 2;
} 

To funguje přesně stejně jako levá strana, kde bude přidána nová třída na Hover myši pomocí JavaScriptu, a pravý obrazovku se táhne odpovídajícím způsobem. Musíme také ujistit Z-index je nastaven na. \ t 2. Tlačítko CTA je tak výraznější.

.
  Šířka: $ Hover-šířka;
}

.hover-vpravo .left {
  Šířka: $ Malá šířka;
}

vpravo vpravo.
  Z-index: 2;
} 

10. Přechod do JavaScriptu

Budeme používat dotek vanilkové JavaScriptu, který vám pomůže přidat a odebrat CSS třídy a budeme také používat některé nové funkce ES6. První věc, kterou musíme udělat, je deklarovat některé neustálé proměnné.

Protože budeme používat dokument Více než jednou, nastavíme neustálou proměnnou doc a uložte dokument v tom, abychom mohli udržet slovo "dokument" pěkný a krátký.

 CONST DOC = dokument; 

Nyní musíme nastavit tři více konstanty, které ukládají .že jo , .vlevo, odjet a .kontejner selektory. Důvodem, proč používáme konstanty, je proto, že víme, že nechceme změnit hodnotu těchto, takže použití konstant dává smysl. S nimi nyní nastavit, můžeme jít dopředu a přidat do nich některé události myši.

 CONST vpravo = doc.QuerySelektor (". Vpravo");
CONST vlevo = doc.QuerySelektor (". vlevo");
Konstrukční kontejner = doc.QuerySelektor (". Kontejner"); 

Za použití vlevo, odjet Konstantní proměnná jsme prohlásili v posledním kroku, můžeme k tomu přidat posluchače události. Tato akce bude MouseSenter. Událost a namísto použití funkce zpětného volání budeme používat jinou funkci ES6 nazvanou Funkce šipek '(() = & gt;) .

 // přidá třídu do kontejnerového prvku na vznášení
Left.addeventListener ("MousEnter", () = & gt; {
  Kontejner.Classlist.add ("Hover-Left");
}); 

11. Přidat a odebrat třídu

V posledním kroku přidal náš posluchač událostí MouseSenter. událost, která se zaměřuje na hlavní kontejnerovou třídu a přidá novou třídu vznášet se vlevo prvek sekce. S tímto zvaným přidáním, nyní musíme odstranit, když jsme to vznášeli. Uděláme to pomocí Mousealeave. událost a. .odstranit() metoda.

 // Odstraní třídu, která byla přidána na příjmu
levic.AddeventListener ("mousealeave", () = & gt; {
  Kontejner.Classlist.Remove ("Hover-Left");
}); 

Až do teď jsme udělali všechno na levé obrazovce. Nyní skončíme javascript a přidáme a odebrat třídy na pravé části prvků. Opět jsme použili syntaxi funkce šipky, aby vše vypadalo pěkně a uklizené.

 pravý.AddEventListener ("MousEnter", () = & gt; {
  Kontejner.Classlist.add ("Sover-vpravo");
});

pravý.AddeventListener ("mousealeave", () = & gt; {
  Kontejner.Classlist.Remove ("Sover-vpravo");
}); 

12. Aby to reagovalo

Žádný projekt - bez ohledu na to, jak velká nebo malá - by se měla vyhnout reagování. Takže v tomto kroku přidáme některé mediální dotazy na naše CSS, a učiníme tento malý projekt jako adaptivní pro mobilní zařízení, co nejlépe můžeme. Stojí za to zkontrolovat Originální Codepen. vidět, jak to funguje.

 @Media (max. Šířka: 800px) {
  H1 {
    Velikost písma: 2rem; }

  .knoflík {
    šířka: 12rem;
  } 

Ujistili jsme se, že když se šířka naší stránky dostane na 800px, písmo a tlačítka se sníží velikost. Chcete-li tedy dokončit věci, chceme také zaměřit na výšku a ujistěte se, že naše tlačítka se pohybují po stránce, když se zobrazí výška stránky pod 700px.

 @Media (maximální výška: 700px) {
  .knoflík {
    top: 70%;
}} 

Chcete uložit své stránky? Exportujte je jako pdfs a uložte je v bezpečném cloudové úložiště .

Web Design Event. Generovat Londýn Vrátí se 19. - 21. září 2018, který nabízí zabalený harmonogram předních reproduktorů, celý den workshopů a cenných příležitostí sítě - Nenechte si ujít. Získejte svůj generátor .

Tento článek byl původně publikován v Čistém časopise Vydání 305. . Přihlásit se nyní .

Přečtěte si více:

• 5 Senzační nové webové stránky, které mají být inspirovány
• Vytvořit animovaný 3D textový efekt
• 19 Skvělé paralaxové rolovací webové stránky