Contenuto
- 01. Preparati
- 02. Completa l'HTML
- 03. Esplora le variabili Sass
- 04. Regola lo styling del corpo
- 05. Definisci lo stile dei titoli delle sezioni
- 06. Fai risaltare i CTA
- 07. Impostare lo sfondo e le schermate del contenitore
- 08. Aggiungi immagini di sfondo
- 09. Aggiungi transizioni ed effetti al passaggio del mouse
- 10. Spostati in JavaScript
- 11. Aggiungere e rimuovere una classe
- 12. Rendilo reattivo
La tua pagina di destinazione è un elemento cruciale nel layout del tuo sito web. È la prima vera opportunità che hai per presentare la tua attività o il prodotto che vendi, quindi il suo design è fondamentale. Le pagine di destinazione sono progettate con un unico obiettivo mirato noto come invito all'azione (CTA). L'uso di colori e immagini per completare gli inviti all'azione e l'esperienza dell'utente è un must.
- Vedi la CodePen funzionante per questo tutorial
In questo tutorial, illustreremo come creare una pagina di destinazione accattivante per un marchio di moda immaginario. Sarà incentrato su un design a schermo diviso con immagini di grandi dimensioni e transizioni animate che si verificano al passaggio del mouse.Questa pagina avrà due chiari pulsanti di invito all'azione e utilizzeremo HTML, Sass per lo stile e un tocco di JavaScript vanigliato che utilizza la sintassi ES6 (ricorda di assicurarti che il tuo hosting web sia adatto alle esigenze del tuo sito web). Troppo complesso? Crea un sito web senza bisogno di codice, prova un semplice costruttore di siti web.
01. Preparati
Se utilizzi CodePen, assicurati che CSS sia impostato su "SCSS" nelle impostazioni della penna. Puoi apportare questa modifica facendo clic sulla scheda delle impostazioni, scegli "CSS" e modifica il preprocessore CSS in SCSS nelle opzioni a discesa.
Quindi possiamo iniziare ad aggiungere il nostro HTML. Metteremo a capo una sezione chiamata "sinistra" e una sezione chiamata "destra" all'interno di una classe contenitore, con entrambe le sezioni assegnate a una classe di "schermo".
div> sezione> / sezione> sezione> / sezione> / div>
02. Completa l'HTML
Per finalizzare il nostro HTML, aggiungeremo un titolo per ogni sezione utilizzando un file h1 etichetta. Sotto dovremo aggiungere un pulsante, che collegherebbe a un'altra pagina se questo fosse un progetto del mondo reale. Daremo a questo una classe di pulsante per mantenere le cose belle e semplici.
div> section> h1> Moda uomo / h1> button> a href = "#"> Ulteriori informazioni / a> / button> / section> section> h1> Moda donna / h1> button> a href = "#"> Impara Altro / a> / pulsante> / sezione>
03. Esplora le variabili Sass
L'unica cosa che amiamo tutti di Sass è l'uso delle variabili. Anche se le variabili CSS native stanno ricevendo più supporto, manterremo le cose al sicuro usando Sass. Li metteremo in cima al nostro .scsse puoi scegliere i colori che desideri, ma usando rgba i valori ci daranno maggiore flessibilità.
/ * * Variabili * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ pulsante sinistro del mouse: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ right-button-hover: rgba (255, 140, 219, 0.7); $ hover-width: 75%; $ larghezza ridotta: 25%; $ animateSpeed: 1000ms;
04. Regola lo styling del corpo
In primo luogo, cancelleremo tutto il riempimento e il margine predefiniti sul corpo, quindi imposteremo la famiglia di caratteri su Open Sans. Ciò interesserà solo il pulsante, quindi non importa troppo quale carattere utilizziamo. Quindi imposteremo la larghezza e l'altezza su 100% e assicurati che tutto ciò che trabocca sull'asse X venga nascosto.
html, body {padding: 0; margine: 0; famiglia di caratteri: "Open Sans", sans-serif; larghezza: 100%; altezza: 100%; overflow-x: nascosto; }
05. Definisci lo stile dei titoli delle sezioni
È ora di scegliere un carattere Google per i titoli delle sezioni: abbiamo scelto Playfair Display. Quindi utilizzando translateX possiamo assicurarci che i titoli delle sezioni siano sempre centrati sull'asse X.
h1 {font-size: 5rem; colore: #fff; posizione: assoluta; a sinistra: 50%; in alto: 20%; trasformare: translateX (-50%); spazio bianco: nowrap; famiglia di caratteri: "Playfair Display", serif; }
06. Fai risaltare i CTA
I nostri pulsanti fungeranno da inviti all'azione, quindi devono essere grandi, in grassetto e posizionati dove è facile fare clic. Entrambi i pulsanti avranno un bordo bianco e un interessante effetto di transizione. Gli stili predefiniti per entrambi i pulsanti saranno gli stessi, tuttavia cambieremo i loro colori al passaggio del mouse.
.button {display: block; posizione: assoluta; a sinistra: 50%; in alto: 50%; altezza: 2.6rem; imbottitura superiore: 1.2rem; larghezza: 15rem; text-align: center; colore bianco; bordo: 3px solido #fff; border-radius: 4px; spessore del carattere: 600; text-transform: maiuscolo; decorazione del testo: nessuna; trasformare: translateX (-50%); transizione: tutti .2s;
I pulsanti principali avranno un piacevole effetto hover semplice e useremo le variabili Sass che abbiamo specificato per il colore, che sarà un colore simile allo sfondo della pagina.
.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. Impostare lo sfondo e le schermate del contenitore
La classe contenitore fungerà da wrapper della nostra pagina e ne imposteremo la posizione relativa, semplicemente perché vogliamo posizionare gli schermi in posizione assoluta. Daremo al contenitore un colore di sfondo predefinito, ma ovviamente questo non verrà visualizzato perché imposteremo colori diversi per entrambi gli sfondi dello schermo.
.container {position: relative; larghezza: 100%; altezza: 100%; sfondo: $ container-BgColor; .screen {posizione: assoluto; larghezza: 50%; altezza: 100%; overflow: nascosto; }}
08. Aggiungi immagini di sfondo
Entrambe le sezioni sinistra e destra visualizzeranno un'immagine e puoi trovare immagini stock royalty-free da siti Web come Unsplash, Pixabay o Pexels (che ho usato in questo tutorial). Per semplificare le cose, ho utilizzato un servizio gratuito di hosting e condivisione di immagini chiamato imgbb a cui possiamo collegarci nel nostro CSS.
.screen.left {sinistra: 0; sfondo: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) center center no-repeat; dimensione dello sfondo: copertina; &: prima di {posizione: assoluta; contenuto: ""; larghezza: 100%; altezza: 100%; sfondo: $ left-bgColor; }}
Il lato destro della pagina mostrerà anche un'immagine di sfondo usando imgbb e imposteremo il colore di sfondo sul rosa. Ancora una volta, impostiamo la dimensione dello sfondo su copertina. Questo ci permetterà di coprire l'intero elemento contenitore, che nel nostro caso è il file .schermo classe.
.screen.right {destra: 0; sfondo: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) center center no-repeat; dimensione dello sfondo: copertina; &: prima di {posizione: assoluta; contenuto: ""; larghezza: 100%; altezza: 100%; sfondo: $ right-bgColor; }}
09. Aggiungi transizioni ed effetti al passaggio del mouse
La velocità di animazione per il nostro effetto hover su entrambi gli schermi sarà controllata da una transizione che mantiene il valore della nostra variabile $ animateSpeed, che è 1000 ms (un secondo). Quindi finiremo dando all'animazione un po 'di alleggerimento, che è una facilità dentro e fuori che ci aiuterà a darci un'animazione più fluida.
.screen.left, .screen.right, .screen.right: prima, .screen.left: prima della {transizione: $ animateSpeed all ease-in-out; }
Quello che vogliamo che accada ora è che quando passi il mouse sullo schermo di sinistra, ci sarà una classe aggiunta a quella sezione usando JavaScript (che scriveremo in un passaggio successivo). Quando questa classe viene aggiunta, lo schermo si estenderà a qualunque sia la larghezza della variabile che abbiamo specificato, che sarà del 75%, quindi il lato destro verrà impostato sulla variabile di larghezza inferiore (25%).
.hover-left .left {larghezza: $ hover-larghezza; } .hover-left .right {larghezza: $ larghezza piccola; } .hover-left .right: prima di {z-index: 2; }
Funziona esattamente come il lato sinistro, dove verrà aggiunta una nuova classe al passaggio del mouse utilizzando JavaScript e lo schermo destro si allungherà di conseguenza. Dobbiamo anche assicurarci che il file z-index è impostato per 2 così il pulsante CTA diventa più prominente.
.hover-right .right {larghezza: $ hover-larghezza; } .hover-right .left {larghezza: $ larghezza piccola; } .hover-right .left: prima di {z-index: 2; }
10. Spostati in JavaScript
Useremo un tocco di vanilla JavaScript per aiutarci ad aggiungere e rimuovere classi CSS e useremo anche alcune delle nuove funzionalità di ES6. La prima cosa che dobbiamo fare è dichiarare alcune variabili costanti.
Perché useremo documento più di una volta, imposteremo una variabile costante chiamata doc e memorizzare il documento al suo interno in modo da poter mantenere la parola 'documento' bella e breve.
const doc = documento;
Ora dobbiamo impostare altre tre costanti che memorizzeranno il file .giusto, .sinistra e .contenitore selettori. Il motivo per cui utilizziamo le costanti è perché sappiamo di non voler modificare il valore di queste, quindi è logico utilizzare una costante. Con questi ora impostati, possiamo andare avanti e aggiungere loro alcuni eventi del mouse.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Usando il sinistra variabile costante che abbiamo dichiarato nell'ultimo passaggio, ora possiamo aggiungervi un listener di eventi. Questo evento sarà il mouseenter e invece di usare una funzione di callback, useremo un'altra funzione ES6 chiamata Funzioni freccia '(() =>).
// aggiunge una classe all'elemento contenitore al passaggio del mouse a sinistra.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Aggiungere e rimuovere una classe
Nell'ultimo passaggio, il nostro ascoltatore di eventi ha aggiunto un file mouseenter evento che prende di mira la classe contenitore principale e aggiunge una nuova classe chiamata passa il mouse a sinistra all'elemento della sezione sinistra. Con questa chiamata aggiunta, ora è necessario rimuoverla quando ci si sposta con il mouse. Lo faremo utilizzando il mouseleave evento e il .rimuovere() metodo.
// rimuove la classe aggiunta al passaggio del mouse left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Fino ad ora abbiamo fatto tutto sullo schermo di sinistra. Ora finiremo il JavaScript e aggiungeremo e rimuoveremo classi sugli elementi della sezione giusta. Ancora una volta abbiamo usato la sintassi della funzione freccia qui per mantenere tutto bello e ordinato.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Rendilo reattivo
Nessun progetto, non importa quanto grande o piccolo, dovrebbe evitare di essere reso reattivo. Quindi, in questo passaggio aggiungeremo alcune media query al nostro CSS e renderemo questo piccolo progetto il più adattabile possibile ai dispositivi mobili. Vale la pena controllare la CodePen originale per vedere come funziona.
@media (larghezza massima: 800 px) {h1 {dimensione carattere: 2rem; } .button {larghezza: 12rem; }
Ci siamo assicurati che quando la larghezza della nostra pagina scende a 800 px, il carattere e i pulsanti si ridurranno di dimensioni. Quindi, per finire, vogliamo scegliere anche l'altezza e assicurarci che i nostri pulsanti si spostino verso il basso nella pagina quando l'altezza della pagina scende al di sotto di 700px.
@media (max-height: 700px) {.button {top: 70%; }}
Vuoi salvare le tue pagine? Esportali come PDF e salvali in un archivio cloud sicuro.
Evento di web design Genera Londra ritorna il 19-21 settembre 2018, offrendo un programma fitto di relatori leader del settore, un'intera giornata di workshop e preziose opportunità di networking: da non perdere. Ottieni ora il tuo biglietto Generate.
Questo articolo è stato originariamente pubblicato su net magazine numero 305. Iscriviti ora.
