Content
- 01. Configura’t
- 02. Acabeu l'HTML
- 03. Explora les variables de Sass
- 04. Ajusteu l'estil del cos
- 05. Doneu estil als títols de les seccions
- 06. Feu que els CTA destaquin
- 07. Definiu el fons i les pantalles del contenidor
- 08. Afegiu imatges de fons
- 09. Afegeix transicions i efectes del cursor
- 10. Passa a JavaScript
- 11. Afegiu i traieu una classe
- 12. Feu que sigui sensible
La vostra pàgina de destinació és un element crucial en el disseny del lloc web. És la primera oportunitat real que teniu per presentar el vostre negoci o el producte que veneu, de manera que el seu disseny és clau. Les pàgines de destinació es dissenyen amb un únic objectiu focalitzat conegut com a crida a l'acció (CTA). L’ús de colors i imatges per complementar les crides a l’acció i l’experiència de l’usuari és imprescindible.
- Consulteu el CodePen de treball per a aquest tutorial
En aquest tutorial, veurem com es pot crear una pàgina de destinació atractiva per a una marca de moda fictícia. Se centrarà al voltant d’un disseny de pantalla dividida amb imatges grans i transicions animades que es produeixen al volant.Aquesta pàgina tindrà dos botons clars de crida a l'acció i utilitzarem HTML, Sass per a l'estil i un toc de JavaScript vainilla que utilitza la sintaxi ES6 (recordeu que el vostre allotjament web s'adapta a les necessitats del vostre lloc web). Massa complex? Creeu un lloc web sense necessitat de codi, proveu un senzill creador de llocs web.
01. Configura’t
Si utilitzeu CodePen, assegureu-vos que el CSS estigui configurat a "SCSS" a la configuració del llapis. Podeu fer aquest canvi fent clic a la pestanya de configuració, seleccioneu "CSS" i canvieu el preprocessador CSS a SCSS a les opcions desplegables.
Després podem començar a afegir al nostre HTML. Anem a embolicar una secció anomenada "esquerra" i una secció anomenada "dreta" dins d'una classe de contenidors, amb les dues seccions donades una classe de "pantalla".
div> secció> / secció> secció> / secció> / div>
02. Acabeu l'HTML
Per finalitzar el nostre HTML, afegirem un títol per a cada secció mitjançant un h1 etiqueta. A continuació, haurem d'afegir un botó que enllaçaria a una altra pàgina si es tractés d'un projecte del món real. Donarem a això una classe de botó per mantenir les coses simples i boniques.
div> secció> h1> Moda masculina / h1> botó> a href = "#"> Més informació / a> / botó> / secció> secció> h1> Moda femenina / h1> botó> a href = "#"> Aprendre Més / a> / botó> / secció>
03. Explora les variables de Sass
L’única cosa que a tots ens agrada de Sass és l’ús de variables. Tot i que les variables CSS natives reben més suport, mantindrem les coses segures mitjançant l’ús de Sass. Els posarem a la part superior de la nostra .scss, i podeu triar els colors que vulgueu, però utilitzant rgba els valors ens donaran més flexibilitat.
/ * * Variables * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ botó esquerre del ratolí: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ botó dret del ratolí: rgba (255, 140, 219, 0,7); $ hover-width: 75%; $ small-width: 25%; $ animateSpeed: 1000 ms;
04. Ajusteu l'estil del cos
En primer lloc, esborrarem tots els farcits i marges predeterminats del cos i, a continuació, establirem la família de tipus de lletra a Open Sans. Això només afectarà el botó, de manera que no importa massa el tipus de lletra que fem servir. A continuació, establirem l'amplada i l'alçada a 100% i assegureu-vos que qualsevol cosa que desbordi a l'eix X s'amagui.
html, body {padding: 0; marge: 0; font-family: ‘Open Sans’, sans-serif; amplada: 100%; alçada: 100%; desbordament-x: amagat; }
05. Doneu estil als títols de les seccions
És hora de triar un tipus de lletra de Google per als títols de les seccions; hem escollit Playfair Display. A continuació, utilitzeu traduirX podem assegurar-nos que els títols de les seccions estiguin sempre centrats en l'eix X.
h1 {font-size: 5rem; color: #fff; posició: absoluta; esquerra: 50%; superior: 20%; transformar: translateX (-50%); espai en blanc: nowrap; font-family: 'Playfair Display', serif; }
06. Feu que els CTA destaquin
Els nostres botons actuaran com les nostres crides a l’acció, de manera que han de ser grans, audaços i situats allà on siguin fàcils de fer clic. Tots dos botons tindran una vora blanca i un efecte de transició interessant. Els estils predeterminats per als dos botons seran els mateixos, no obstant això, canviarem els colors en passar el cursor per sobre.
.button {display: block; posició: absoluta; esquerra: 50%; superior: 50%; alçada: 2.6rem; tapa de farciment: 1.2rem; amplada: 15rem; text-align: centre; color: blanc; vora: 3px sòlid #fff; radi de la vora: 4 px; pes de la font: 600; text-transform: majúscula; decoració de text: cap; transformar: translateX (-50%); transició: tots .2s;
Els botons principals tindran un efecte senzill i senzill de passar el ratolí i utilitzarem les variables Sass que hem especificat per al color, que tindran un color similar al fons de la pàgina.
.screen.left .button: hover {background-color: $ left-button-hover; border-color: $ botó esquerre del cursor; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ botó dret del ratolí;
07. Definiu el fons i les pantalles del contenidor
La classe de contenidors actuarà com el nostre embolcall de pàgines i establirem la seva posició a relativa, simplement perquè volem situar les pantalles al posicionament absolut. Donarem al contenidor un color de fons predeterminat, però, per descomptat, no es veurà perquè establirem colors diferents a tots dos fons de pantalla.
.container {posició: relativa; amplada: 100%; alçada: 100%; fons: $ container-BgColor; .screen {posició: absoluta; amplada: 50%; alçada: 100%; desbordament: amagat; }}
08. Afegiu imatges de fons
Tant a la secció esquerra com a la dreta es mostrarà una imatge i podreu trobar imatges d’imatges sense drets d'autor de llocs web com Unsplash, Pixabay o Pexels (que he utilitzat en aquest tutorial). Per facilitar les coses, he utilitzat un servei gratuït d’allotjament i compartició d’imatges anomenat imgbb al qual podem enllaçar al nostre CSS.
.screen.left {left: 0; fons: url ('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp') centre centre sense repetir; mida de fons: portada; &: abans de {posició: absoluta; contingut: ""; amplada: 100%; alçada: 100%; fons: $ left-bgColor; }}
A la part dreta de la pàgina també es mostrarà una imatge de fons mitjançant imgbb i establirem el color de fons en rosa. De nou, establim la mida del fons a coberta. Això ens permetrà cobrir tot l’element que conté, que en el nostre cas és el .pantalla classe.
.screen.right {dreta: 0; background: url ('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp') centre centre sense repetir; mida de fons: portada; &: abans de {posició: absoluta; contingut: ""; amplada: 100%; alçada: 100%; fons: $ right-bgColor; }}
09. Afegeix transicions i efectes del cursor
La velocitat de l'animació del nostre efecte de vol a les dues pantalles es controlarà mitjançant una transició que mantingui el valor de la nostra variable $ animateSpeed, que és de 1000 ms (un segon). Després acabarem donant una mica de facilitat a l’animació, que és una facilitat d’entrada i sortida que ens ajudarà a donar-nos una animació més fluida.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transition: $ animateSpeed all easy-in-out; }
El que volem que passi ara és que quan passeu el cursor per sobre de la pantalla esquerra, hi haurà una classe afegida a aquesta secció mitjançant JavaScript (que escriurem en un pas posterior). Quan s’afegeix aquesta classe, la pantalla s’estendrà fins a l’amplada de la variable que hàgim especificat, que serà del 75% i, a continuació, el costat dret s’establirà a la variable d’amplada menor (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: abans de {z-index: 2; }
Funciona exactament igual que el costat esquerre, on s'afegirà una nova classe al cursor del ratolí mitjançant JavaScript i la pantalla dreta s'estendrà en conseqüència. També hem d'assegurar-nos que índex z està definit a 2 de manera que el botó CTA esdevé més destacat.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: before {z-index: 2; }
10. Passa a JavaScript
Utilitzarem un toc de vainilla JavaScript per ajudar-nos a afegir i eliminar classes CSS i també utilitzarem algunes de les noves funcions ES6. El primer que hem de fer és declarar algunes variables constants.
Perquè ho farem servir document més d'una vegada, establirem una variable constant anomenada doc i emmagatzemar-hi el document perquè puguem mantenir la paraula "document" agradable i curta.
const doc = document;
Ara hem d’establir tres constants més que emmagatzemaran el fitxer .dret, .esquerra i .contenidor selectors. La raó per la qual fem servir constants és perquè sabem que no volem canviar el valor d’aquestes, per tant, és lògic l’ús de constants. Amb aquests ja configurats, podem seguir endavant i afegir-hi alguns esdeveniments del ratolí.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Utilitzant el a l'esquerra variable constant que vam declarar a l'últim pas, ara podem afegir-hi un oient d'esdeveniments. Aquest esdeveniment serà el mouseenter en lloc d’utilitzar una funció de devolució de trucada, utilitzarem una altra característica ES6 anomenada Funcions de fletxa '(() =>).
// afegeix una classe a l'element contenidor a sobre left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Afegiu i traieu una classe
En l'últim pas, el nostre oient d'esdeveniments va afegir un mouseenter esdeveniment orientat a la classe de contenidors principal i que afegeix una nova classe anomenada passeu per l'esquerra a l'element de la secció esquerra. Amb aquesta trucada afegida, ara hem de suprimir-la quan la posem a sobre. Ho farem mitjançant el fitxer deixar el ratolí esdeveniment i el .remove () mètode.
// elimina la classe que es va afegir a sobre left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Fins ara ho hem fet tot a la pantalla esquerra. Ara acabarem el JavaScript i afegirem i eliminarem classes als elements de la secció correcta. Una vegada més hem utilitzat la sintaxi de la funció de fletxa aquí per mantenir tot aspecte agradable i ordenat.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Feu que sigui sensible
Cap projecte, per gran o petit que sigui, hauria d’evitar que es faci responsiu. Per tant, en aquest pas afegirem algunes consultes multimèdia al nostre CSS i farem d’aquest petit projecte el més adaptable possible als dispositius mòbils. Val la pena consultar el CodePen original per veure com funciona.
@media (amplada màxima: 800 px) {h1 {font-size: 2rem; } .button {width: 12rem; }
Ens hem assegurat que quan l’amplada de la pàgina baixi a 800 px, el tipus de lletra i els botons redueixin la mida. Per tant, per acabar les coses, també volem orientar-nos a l’alçada i assegurar-nos que els nostres botons es mouen cap avall a la pàgina quan l’alçada de la pàgina sigui inferior a 700 px.
@media (alçada màxima: 700 px) {.button {top: 70%; }}
Voleu desar les vostres pàgines? Exporteu-los com a fitxers PDF i deseu-los en un emmagatzematge al núvol segur.
Esdeveniment de disseny web Generar Londres torna del 19 al 21 de setembre de 2018, oferint un programa ple de ponents líders en la indústria, un dia complet de tallers i valuoses oportunitats de treball en xarxa. No us ho perdeu. Aconseguiu el vostre bitllet Generate ara.
Aquest article es va publicar originalment a la revista net número 305. Subscriu-te ara.
