Zbuduj animowany podzielony na ekranie Page

Twoja strona docelowa jest kluczowym elementem Układ strony internetowej. . Jest to pierwsza prawdziwa okazja, którą musisz przedstawić swoją firmę lub sprzedawać produkt, więc jego projekt jest kluczowy. Strony docelowe są zaprojektowane z jednym skoncentrowanym obiektywem znanym jako połączenie do działania (CTA). Korzystanie z kolorów i obrazów do uzupełnienia połączeń do działania i doświadczenie użytkownika jest koniecznością.

• Zobacz Pracujący kodeksu dla tego samouczka

W tym samouczku przejdziemy przez to, jak zbudować angażującą stronę docelową dla fikcyjnej marki mody. Zostanie wyśrodkowany wokół projektu podzielonego na ekranie z dużymi obrazami i animowanymi przejściami, które zdarzają się na HOVER. Ta strona będzie miała dwa jasne przyciski akcji i będziemy korzystać z HTML, Sass. Do stylizacji i dotyku wanilii JavaScript, który używa składni ES6 (pamiętaj, aby upewnić się, że upewnij się hosting jest dostosowany do Twoich potrzeb witryny). Zbyt skomplikowane? Utwórz stronę internetową bez potrzeby kodu, spróbuj prosty Kreator strony internetowej .

01. Ustaw się

Jeśli używasz Codepen, upewnij się, że CSS jest ustawiony na "SCSS" w ustawieniach pióra. Możesz dokonać tej zmiany, klikając kartę Ustawienia, wybierz "CSS" i zmień obrysową CSS do SCSS w opcjach rozwijanych.

Następnie możemy rozpocząć dodawanie w naszym HTML. Zamierzamy owijać sekcję o nazwie "w lewo", a sekcja zwana "prawa" w klasie kontenera, a obie sekcje biorąc pod uwagę klasę "ekranu".

02. Zakończ HTML

Aby sfinalizować nasz HTML, dodamy tytuł dla każdej sekcji za pomocą H1. etykietka. Pod spodem będziemy musieli dodać przycisk, który połączy się z inną stroną, jeśli był to real-świat. Damy tę klasę przycisk Aby zachować ładne i proste.

03. Przeglądaj zmienne Sass

Jedną rzeczą, którą wszyscy kochamy w Sass, jest stosowanie zmiennych. Nawet jeśli rodzime zmienne CSS otrzymują więcej wsparcia, będziemy bezpiecznie bezpiecznie za pomocą Sass. Umieścimy je na szczycie naszego .ssss. i możesz wybrać dowolne kolory, które chcesz, ale używając rgba. Wartości dadzą nam większą elastyczność.

 / ** Zmienne ** /

$ kontener-bgColor: # 444;
$ Left-BgColor: RGBA (136, 226, 247, 0,7);
$ Left-Button-Hover: RGBA (94, 226, 247, 0,7);
$ Right-bgColor: RGBA (227, 140, 219, 0,8);
$ prawe-przyciski-hover: RGBA (255, 140, 219, 0,7);
$ hover-szerokość: 75%;
$ Mała szerokość: 25%;
$ animatespeed: 1000ms; 

04. Dostosuj stylizacji ciała

Po pierwsze, wyczyścimy wszystkie domyślne wyściełanie i margines do ciała, a następnie ustawić rodzinę czcionki, aby otworzyć sans. Wpłynie to tylko na przycisk, więc nie ma znaczenia za dużo, czym używamy czcionki. Następnie ustawimy szerokość i wysokość 100% i upewnij się, że wszystko, co przelewa się na osi X, zostaje ukryta.

 HTML, Ciało {
  Wyściółka: 0;
  Marża: 0;
  Czcionka: "Open Sans", Sans-Serif;
  Szerokość: 100%;
  Wysokość: 100%;
  Przepełnienie-X: Ukryte;
} 

05. Styl tytuły sekcji

Nadszedł czas, aby wybrać czcionkę Google dla tytułów sekcji - wybraliśmy wyświetlacz Playfair. Następnie używa Translatex. Możemy upewnić się, że tytuły sekcji są zawsze wyśrodkowane na osi X.

 H1 {
  rozmiar czcionki: 5Rem;
  Kolor: #FFF;
  pozycja: absolutna;
  po lewej: 50%;
  Top: 20%;
  Transform: Translatex (-50%);
  Biała przestrzeń: Nowrap;

  Rodzina czcionek: "Playfair Display", Serif;
} 

06. Wyróżnij CTA

Nasze przyciski działają jako nasze połączenia do działania, więc muszą być duże, odważne i umieszczone, gdzie są łatwe do kliknięcia. Oba przyciski będą miały białą granicę i interesujący efekt przejścia. Domyślne stylami dla obu przycisków będą takie same, jednak zmienimy swoje kolory na unosa.

 .Button {
  Blok wyświetlacza;
  pozycja: absolutna;
  po lewej: 50%;
  Top: 50%;
  Wysokość: 2.6rem;
  Padding-Top: 1.2Rem;
  Szerokość: 15Rem;
  Tekst-Wyrównuj: Centrum;
  kolor biały;
  Granica: 3px Solid #FFF;
  Border-Radius: 4px;
  Czcionka: 600;
  Transformacja tekstowa: wielkie litery;
  Tekst dekoracji: Brak;
  Transform: Translatex (-50%);
  Przejście: wszystkie .2s; 

Główne przyciski będą miały ładny prosty efekt usypywania i użyjemy zmiennych Sass określonych dla koloru, który będzie podobnym kolorem do tła strony.

 .Screen.left .Button: Hover {
  tła-kolor: $ lewicy-hover;
  Border-Color: $ Left-Button-Hover;
}

.Screen.Right .Button: Hover {
  Background-Color: $ Right-Button-Hover;
  Border-Color: $ Light-Button-Hover; 

07. Ustaw tło kontenera i ekrany

Klasa kontenerów będzie działać jako nasza opakowanie strony, a my ustawimy pozycję do stosunku do krewnego, po prostu dlatego, że chcemy ustawić ekrany do pozycjonowania bezwzględnego. Damy pojemnikowi domyślny kolor tła, ale oczywiście nie będzie to widoczne, ponieważ będziemy ustawiamy różne kolory do obu tła ekranu.

 .Container {
  Pozycja: krewna;
  Szerokość: 100%;
  Wysokość: 100%;
  Tło: $ kontener-bgColor;
  
    .Screen {
      pozycja: absolutna;
      Szerokość: 50%;
      Wysokość: 100%;
      Przepełnienie: Ukryte;
    }
} 

08. Dodaj obrazy tła

Zarówno lewe, jak i odpowiednie sekcje wyświetlają obraz i znajdziesz obrazy royalty-free obrazów z stron internetowych, takich jak Nieodpłatny , Pixabay. lub Pexels. (które użyłem w tym samouczku). Ułatwiłem rzeczy, korzystałem z bezpłatnego hostingu i usługi udostępniania ImgBB, które możemy połączyć się z naszymi CSS.

 .Screen.left {
  Po lewej: 0;
  Tło: URL ("https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg") Center Center No Repeat;
  Rozmiar tła: okładka;
  
    & amp;: przed {
       pozycja: absolutna;
      zawartość: "";
      Szerokość: 100%;
      Wysokość: 100%;
      Tło: $ lewicy bgolor;
    }
} 

Prawa strona strony wyświetli również obraz tła przy użyciu IMGBB, a my ustawić kolor tła na różowo. Ponownie ustawimy rozmiar tła pokrywa . Pozwoli nam to pokryć cały element zawierający, który w naszym przypadku jest .ekran klasa.

 .screen.right {
  Prawo: 0;
  Tło: URL ("https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg") Center Center No Repeat;
  Rozmiar tła: okładka;
  
   & amp;: przed {
      pozycja: absolutna;
      zawartość: "";
      Szerokość: 100%;
      Wysokość: 100%;
      Tło: $ Right-BgColor;
    }
} 

09. Dodaj przejścia i efekty wlewów

Szybkość animacji dla naszego efektu na oba ekrany będzie kontrolowana przez przejście, które posiada wartość naszej zmiennej $ animatespeed. , co ma 1000 ms (jedna sekunda). Wtedy skończymy, dając animację niektóre złagodzenie, co jest łatwością, co pomoże dać nam płynniejszą animację.

 .Screen.left, .Screen.right, .Screen.right: wcześniej, .Screen.left: przed {
  przejście: $ animatespeed wszystkie łatwość;
} 

Teraz chcemy się wydarzyć, że po najechaniu na lewym ekranie zostanie dodana klasa do tej sekcji przy użyciu JavaScript (który będziemy pisać w późniejszym kroku). Gdy ta klasa zostanie dodana, ten ekran rozciągnie się do niezależnie od szerokości określonej zmiennej - co będzie 75%, a następnie po prawej stronie zostanie ustawiona na mniejszą zmienną szerokości (25%).

 .Hover-lewy .left {
  Szerokość: $ Hover-szerokość;
}

.Hover-lewy.
  Szerokość: $ Mała szerokość;
}
.Hover-lewy. pright: przed {
  Z-index: 2;
} 

Działa to dokładnie tak samo, jak lewa strona, w której można dodać nową klasę na myszy przy użyciu JavaScript, a właściwy ekran się rozciąga odpowiednio. Musimy również upewnić się, że z-index. jest ustawione na 2. Więc przycisk CTA staje się bardziej widoczny.

 .Hover-prawe .right {
  Szerokość: $ Hover-szerokość;
}

.hover-prawe .left {
  Szerokość: $ Mała szerokość;
}

.Hover-prawe .left: przed {
  Z-index: 2;
} 

10. Przejdź do JavaScript

Będziemy korzystać z dotyku wanilii JavaScript, aby pomóc nam dodać i usunąć klasy CSS, a także będziemy korzystać z niektórych z nowych funkcji ES6. Pierwszą rzeczą, którą musimy zrobić, to zadeklarować niektóre stałe zmienne.

Ponieważ będziemy używać dokument Więcej niż raz, ustawimy stałą zmienną o nazwie DOC. i przechowuj dokument w tym, abyśmy mogli zachować słowo "dokument" ładny i krótki.

 Const Doc = Dokument; 

Teraz musimy ustawić trzy kolejne stałe, które będą przechowywać .dobrze , .lewo i .pojemnik Selektory. Powodem, dla którego używamy stałych, jest dlatego, że wiemy, że nie chcemy zmieniać wartości ich, więc użycie stałych ma sens. Dzięki tym teraz możemy iść dalej i dodać do nich zdarzenia myszy.

 Const Prawo = doc.QuerySelector (". PRAWO");
Const Left = Doc.QuerySelector (". Lewa");
Const Container = DOC.QuerySelector (". Kontener"); 

Używając lewo Stała zmienna, którą zadeklarowaliśmy w ostatnim kroku, możemy teraz dodać słuchacza zdarzenia. To wydarzenie będzie myszy Wydarzenie i zamiast korzystać z funkcji wywołania wywołania, wywołamy kolejną funkcję ES6 Funkcje strzałek "(() = & gt;) .

 // dodaje klasę do elementu kontenera na HOVER
Left.addeventlistener ("Mobiweer", () = & gt; {{
  kontener.classlist.add ("Hover-left");
}); 

11. Dodaj i usuń klasę

W ostatnim kroku nasz słuchacz zdarzeń dodał myszy wydarzenie, które skierowane jest do klasy głównej kontenera i dodaje nową klasę o nazwie hover-lewy do lewego elementu sekcji. Wraz z tym zwanym dodanym, musimy teraz usunąć go, gdy się zjedziemy. Zrobimy to za pomocą mouselen. wydarzenie i The. .usunąć() metoda.

 // Usuwa klasę dodaną na HOVER
Left.addeventlistener ("MouseLave", () = & gt; {
  kontener.classlist.Remove ("Hover-left");
}); 

Do tej pory zrobiliśmy wszystko na lewym ekranie. Teraz zakończymy JavaScript i dodamy i usunąć zajęcia na elementach prawej sekcji. Ponownie użyliśmy tu składni funkcji strzałek, aby zachować wszystko, co wygląda ładnie i schludne.

 Right.addeventlistener ("Mobiweer", () = & gt; {
  kontener.Classlist.add ("Hover-prawy");
});

Right.addeventlistener ("Mouselen", () = & gt; {
  kontener.Classlist.Remove ("Hover-prawy");
}); 

12. Spraw, by to odpowiadać

Brak projektu - bez względu na to, jak duży lub mały - powinien unikać reagowania. Tak więc w tym kroku dodamy pewne zapytania medialne do naszych CSS i uczynić ten mały projekt jako adaptacyjny do urządzeń mobilnych, jak najlepiej możemy. Warto sprawdzić Oryginalny Codepen. Aby zobaczyć, jak to działa.

 @media (maksymalna szerokość: 800px) {
  h1 {
    Rozmiar czcionki: 2Rem; }

  .Button {
    Szerokość: 12Rem;
  } 

Upewniliśmy się, że gdy szerokość naszej strony usunęła do 800px, czcionka i przyciski zmniejszy się w rozmiarze. Więc, aby zakończyć rzeczy, chcemy również skierować się do wysokości i upewnić się, że nasze przyciski przesuń stronę, gdy wysokość strony pobiera poniżej 700px.

 @media (Maksymalna wysokość: 700px) {
  .Button {
    Top: 70%;
}} 

Chcesz zapisać swoje strony? Eksportuj je jako PDF i zapisz je w bezpiecznym magazyn w chmurze .

Wydarzenie Web Design. Generować Londyn Zwraca w dniach 19-21 września 2018, oferując pakowany harmonogram wiodących przemysłu, pełny dzień warsztatów i cennych możliwości sieci - nie przegap tego. Uzyskaj teraz bilet generowany .

Ten artykuł został pierwotnie opublikowany w magazynie netto Wydanie 305. . Zapisz się teraz .

Czytaj więcej:

• 5 Sensacyjne nowe strony internetowe do zainspirowania
• Utwórz animowany efekt tekstu 3D
• 19 Great Parallax Swirolling Strony internetowych