Zawartość
- 01. Przygotuj się
- 02. Zakończ HTML
- 03. Poznaj zmienne Sass
- 04. Dostosuj stylizację ciała
- 05. Nadaj styl tytułom sekcji
- 06. Wyróżnij CTA
- 07. Ustaw tło kontenera i ekrany
- 08. Dodaj obrazy tła
- 09. Dodaj przejścia i efekty najechania
- 10. Przejdź do JavaScript
- 11. Dodaj i usuń klasę
- 12. Uczyń go responsywnym
Twoja strona docelowa jest kluczowym elementem układu Twojej witryny. To pierwsza prawdziwa okazja, aby przedstawić swoją firmę lub produkt, który sprzedajesz, więc jego projekt jest kluczowy. Strony docelowe są zaprojektowane z jednym ukierunkowanym celem zwanym wezwaniem do działania (CTA). Stosowanie kolorów i obrazów w celu uzupełnienia wezwań do działania i wrażeń użytkownika jest koniecznością.
- Zobacz działający CodePen w tym samouczku
W tym samouczku pokażemy, jak stworzyć angażującą stronę docelową dla fikcyjnej marki modowej. Będzie on skupiony wokół podzielonego ekranu z dużymi obrazami i animowanymi przejściami, które mają miejsce po najechaniu kursorem.Ta strona będzie miała dwa wyraźne przyciski wezwania do działania i będziemy używać HTML, Sass do stylizacji oraz odrobinę waniliowego JavaScript, który używa składni ES6 (pamiętaj, aby upewnić się, że hosting jest dostosowany do potrzeb Twojej witryny). Zbyt skomplikowane? Utwórz stronę internetową bez potrzeby pisania kodu, wypróbuj prostego kreatora stron internetowych.
01. Przygotuj się
Jeśli używasz CodePen, upewnij się, że CSS jest ustawiony na „SCSS” w ustawieniach pióra. Możesz wprowadzić tę zmianę, klikając kartę ustawień, wybierając „CSS” i zmieniając Preprocesor CSS na SCSS w menu rozwijanych.
Następnie możemy rozpocząć dodawanie naszego kodu HTML. Zamierzamy umieścić sekcję o nazwie „left” i sekcję „right” w klasie kontenera, przy czym obie sekcje otrzymają klasę „screen”.
div> section> / section> section> / section> / div>
02. Zakończ HTML
Aby sfinalizować nasz HTML, dodamy tytuł dla każdej sekcji przy użyciu pliku h1 etykietka. Pod tym będziemy musieli dodać przycisk, który prowadziłby do innej strony, gdyby był to projekt w świecie rzeczywistym. Damy temu klasę przycisk aby wszystko było ładne i proste.
div> section> h1> Mens Fashion / h1> button> a href = "#"> Więcej informacji / a> / button> / section> section> h1> Women's Fashion / h1> button> a href = "#"> Nauka Więcej / a> / button> / section>
03. Poznaj zmienne Sass
Jedyną rzeczą, którą wszyscy uwielbiamy w Sass, jest użycie zmiennych. Mimo że natywne zmienne CSS są coraz bardziej obsługiwane, będziemy dbać o bezpieczeństwo, używając Sass. Umieścimy je u góry naszego .scssi możesz wybrać dowolne kolory, ale używając rgba wartości dadzą nam większą elastyczność.
/ * * Zmienne * * / $ kontener-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); Najechanie lewym przyciskiem $: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ najechanie prawym przyciskiem: rgba (255, 140, 219, 0,7); $ hover-width: 75%; $ mała szerokość: 25%; $ animateSpeed: 1000 ms;
04. Dostosuj stylizację ciała
Po pierwsze, wyczyścimy wszystkie domyślne dopełnienie i marginesy do treści, a następnie ustawimy rodzinę czcionek na Open Sans. Wpłynie to tylko na przycisk, więc nie ma większego znaczenia, jakiej czcionki używamy. Następnie ustawimy szerokość i wysokość na 100% i upewnij się, że wszystko, co wylewa się na osi X, zostaje ukryte.
html, body {dopełnienie: 0; margines: 0; rodzina czcionek: „Open Sans”, sans-serif; szerokość: 100%; wysokość: 100%; overflow-x: ukryty; }
05. Nadaj styl tytułom sekcji
Czas wybrać czcionkę Google dla tytułów sekcji - wybraliśmy Playfair Display. Następnie za pomocą translateX możemy upewnić się, że tytuły sekcji są zawsze wyśrodkowane na osi X.
h1 {font-size: 5rem; kolor: #fff; pozycja: bezwzględna; po lewej: 50%; góra: 20%; transform: translateX (-50%); spacja: nowrap; rodzina czcionek: „Playfair Display”, serif; }
06. Wyróżnij CTA
Nasze przyciski będą działać jak wezwania do działania, więc muszą być duże, pogrubione i umieszczone tam, gdzie można je łatwo kliknąć. Oba przyciski będą miały białą obwódkę i ciekawy efekt przejścia. Domyślne style obu przycisków będą takie same, jednak po najechaniu kursorem zmienimy ich kolory.
.button {display: block; pozycja: bezwzględna; po lewej: 50%; góra: 50%; wysokość: 2,6rem; padding-top: 1,2rem; szerokość: 15rem; wyrównywanie tekstu: do środka; kolor biały; border: 3px solid #fff; border-radius: 4px; waga czcionki: 600; text-transform: wielkie litery; dekoracja tekstu: brak; transform: translateX (-50%); przejście: wszystkie .2s;
Główne przyciski będą miały ładny, prosty efekt najechania kursorem i użyjemy zmiennych Sass, które określiliśmy dla koloru, który będzie podobny do koloru tła strony.
.screen.left .button: hover {background-color: $ left-button-hover; border-color: $ left-button-hover; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ right-button-hover;
07. Ustaw tło kontenera i ekrany
Klasa kontenera będzie działać jako opakowanie strony i ustawimy jej położenie na względne, po prostu dlatego, że chcemy ustawić ekrany na pozycjonowanie bezwzględne. Nadamy kontenerowi domyślny kolor tła, ale oczywiście nie będzie to widoczne, ponieważ będziemy ustawiać różne kolory dla obu tła ekranu.
.container {pozycja: względna; szerokość: 100%; wysokość: 100%; tło: $ container-BgColor; .screen {pozycja: bezwzględna; szerokość: 50%; wysokość: 100%; przepełnienie: ukryte; }}
08. Dodaj obrazy tła
W obu sekcjach po lewej i prawej stronie zostanie wyświetlony obraz, a można znaleźć obrazy stockowe bez tantiem z witryn takich jak Unsplash, Pixabay lub Pexels (których użyłem w tym samouczku). Aby to ułatwić, skorzystałem z bezpłatnej usługi hostingu i udostępniania obrazów o nazwie imgbb, do której możemy zamieścić link w naszym CSS.
.screen.left {left: 0; background: url („https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp”) center center bez powtórzeń; background-size: okładka; &: przed {pozycja: bezwzględna; zawartość: ""; szerokość: 100%; wysokość: 100%; tło: $ left-bgColor; }}
W prawej części strony będzie również wyświetlany obraz tła za pomocą imgbb, a kolor tła zostanie ustawiony na różowy. Ponownie ustawiliśmy rozmiar tła na pokrywa. Pozwoli nam to na pokrycie całego elementu zawierającego, którym w naszym przypadku jest .ekran klasa.
.screen.right {right: 0; background: url („https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp”) center center bez powtórzeń; background-size: okładka; &: przed {pozycja: bezwzględna; zawartość: ""; szerokość: 100%; wysokość: 100%; background: $ right-bgColor; }}
09. Dodaj przejścia i efekty najechania
Szybkość animacji naszego efektu najechania kursorem na obu ekranach będzie kontrolowana przez przejście, które przechowuje wartość naszej zmiennej $ animateSpeed, czyli 1000 ms (jedna sekunda). Następnie zakończymy, dodając animacji nieco luzu, co jest ułatwieniem przy wprowadzaniu i wyłączaniu, które pomoże nam uzyskać płynniejszą animację.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {przejście: $ animateSpeed all easy-in-out; }
Chcemy teraz, aby po najechaniu kursorem myszy na lewy ekran do tej sekcji została dodana klasa za pomocą JavaScript (o czym napiszemy w późniejszym kroku). Po dodaniu tej klasy ekran zostanie rozciągnięty do dowolnej szerokości określonej zmiennej - która będzie wynosić 75%, a następnie prawa strona zostanie ustawiona na mniejszą zmienną szerokości (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: przed {z-index: 2; }
Działa to dokładnie tak samo, jak po lewej stronie, gdzie nowa klasa zostanie dodana po najechaniu myszą za pomocą JavaScript, a prawy ekran odpowiednio się rozciągnie. Musimy również upewnić się, że Z-index jest ustawione na 2 dzięki czemu przycisk wezwania do działania staje się bardziej widoczny.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: przed {z-index: 2; }
10. Przejdź do JavaScript
Będziemy używać odrobiny zwykłego JavaScript, aby pomóc nam dodawać i usuwać klasy CSS, a także będziemy używać niektórych nowych funkcji ES6. Pierwszą rzeczą, którą musimy zrobić, jest zadeklarowanie pewnych stałych zmiennych.
Ponieważ będziemy używać dokument więcej niż raz ustawimy stałą zmienną o nazwie doc i przechowuj w nim dokument, aby słowo „dokument” było ładne i krótkie.
const doc = dokument;
Teraz musimy ustawić jeszcze trzy stałe, które będą przechowywać plik .dobrze, .lewo i .pojemnik selektory. Powodem, dla którego używamy stałych, jest to, że wiemy, że nie chcemy zmieniać ich wartości, więc używanie stałych ma sens. Po ustawieniu tych teraz możemy dodać do nich zdarzenia myszy.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Używając lewo stałą, którą zadeklarowaliśmy w ostatnim kroku, możemy teraz dodać do niej detektor zdarzenia. To wydarzenie będzie mouseenter i zamiast używać funkcji zwrotnej, użyjemy innej funkcji ES6 o nazwie Funkcje strzałek ”(() =>).
// dodaje klasę do elementu kontenera po najechaniu lewym przyciskiem myszy left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Dodaj i usuń klasę
W ostatnim kroku nasz detektor zdarzeń dodał plik mouseenter zdarzenie, które jest przeznaczone dla głównej klasy kontenera i dodaje nową klasę o nazwie najedź w lewo do lewego elementu sekcji. Po dodaniu tego wezwania musimy teraz usunąć go, gdy najedziemy na niego. Zrobimy to za pomocą mouseleave wydarzenie i .usunąć() metoda.
// usuwa klasę, która została dodana po najechaniu lewym klawiszem myszy left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Do tej pory zrobiliśmy wszystko na lewym ekranie. Teraz skończymy JavaScript oraz dodamy i usuniemy klasy z odpowiednich elementów sekcji. Ponownie użyliśmy tutaj składni funkcji strzałek, aby wszystko wyglądało ładnie i schludnie.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Uczyń go responsywnym
Żaden projekt - bez względu na to, jak duży czy mały - nie powinien być responsywny. Dlatego w tym kroku dodamy zapytania o media do naszego CSS i sprawimy, że ten mały projekt będzie jak najlepiej dostosowany do urządzeń mobilnych. Warto sprawdzić oryginalny CodePen, aby zobaczyć, jak to działa.
@media (max-width: 800px) {h1 {font-size: 2rem; } .button {width: 12rem; }
Upewniliśmy się, że kiedy szerokość naszej strony spadnie do 800 pikseli, czcionka i przyciski zmniejszą się. Tak więc, aby zakończyć, chcemy również ustawić wysokość i upewnić się, że nasze przyciski przesuwają się w dół strony, gdy wysokość strony spadnie poniżej 700 pikseli.
@media (max-height: 700px) {.button {top: 70%; }}
Chcesz zapisać swoje strony? Wyeksportuj je jako pliki PDF i zapisz w bezpiecznym miejscu w chmurze.
Wydarzenie poświęcone projektowaniu stron internetowych Wygeneruj Londyn powraca w dniach 19-21 września 2018 r., oferując wypełniony harmonogram wiodących w branży prelegentów, cały dzień warsztatów i cenne możliwości nawiązywania kontaktów - nie przegap tego. Zdobądź swój bilet Generuj teraz.
Ten artykuł został pierwotnie opublikowany w magazynie net nr 305. Zapisz się teraz.
