Contenu
- 01. Préparez-vous
- 02. Terminez le HTML
- 03. Explorer les variables Sass
- 04. Ajuster le style du corps
- 05. Style des titres de section
- 06. Faire ressortir les CTA
- 07. Définir l'arrière-plan et les écrans du conteneur
- 08. Ajouter des images d'arrière-plan
- 09. Ajouter des transitions et des effets de survol
- 10. Passez à JavaScript
- 11. Ajouter et supprimer une classe
- 12.Rendez-le réactif
Votre page de destination est un élément crucial de la mise en page de votre site Web. C'est la première véritable opportunité que vous avez de présenter votre entreprise, ou le produit que vous vendez, sa conception est donc essentielle. Les pages de destination sont conçues avec un seul objectif ciblé appelé appel à l'action (CTA). L'utilisation de couleurs et d'images pour compléter les appels à l'action et l'expérience utilisateur est un must.
- Voir le CodePen fonctionnel pour ce didacticiel
Dans ce didacticiel, nous vous expliquerons comment créer une page de destination attrayante pour une marque de mode fictive. Il sera centré sur un design en écran partagé avec de grandes images et des transitions animées qui se produisent en survol.Cette page comportera deux boutons d'appel à l'action clairs et nous utiliserons HTML, Sass pour le style et une touche de JavaScript vanille qui utilise la syntaxe ES6 (n'oubliez pas de vous assurer que votre hébergement Web est adapté aux besoins de votre site Web). Trop compliqué? Créez un site Web sans code, essayez un simple constructeur de site Web.
01. Préparez-vous
Si vous utilisez CodePen, assurez-vous que le CSS est défini sur «SCSS» dans les paramètres du stylet. Vous pouvez effectuer cette modification en cliquant sur l’onglet Paramètres, choisissez «CSS» et changez le préprocesseur CSS en SCSS dans les options de liste déroulante.
Ensuite, nous pouvons commencer à ajouter notre code HTML. Nous allons encapsuler une section appelée "gauche" et une section appelée "droite" dans une classe de conteneur, avec les deux sections ayant la classe "écran".
div> section> / section> section> / section> / div>
02. Terminez le HTML
Pour finaliser notre HTML, nous ajouterons un titre pour chaque section en utilisant un h1 étiqueter. En dessous, nous devrons ajouter un bouton, qui créerait un lien vers une autre page s'il s'agissait d'un projet réel. Nous allons lui donner une classe de bouton pour garder les choses simples et agréables.
div> section> h1> Mode Homme / h1> button> a href = "#"> En savoir plus / a> / button> / section> section> h1> Mode femme / h1> button> a href = "#"> Learn Plus / a> / bouton> / section>
03. Explorer les variables Sass
La seule chose que nous aimons tous chez Sass est l'utilisation de variables. Même si les variables CSS natives bénéficient de plus de support, nous garderons les choses en sécurité en utilisant Sass. Nous les mettrons au sommet de notre .scss, et vous pouvez choisir les couleurs que vous voulez, mais en utilisant rgba les valeurs nous donneront plus de flexibilité.
/ * * Variables * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ survol du bouton gauche: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ survol du bouton droit: rgba (255, 140, 219, 0.7); $ hover-width: 75%; $ petite largeur: 25%; $ animateSpeed: 1000ms;
04. Ajuster le style du corps
Tout d'abord, nous allons effacer tout le remplissage et la marge par défaut du corps, puis définir la famille de polices sur Open Sans. Cela n'affectera que le bouton, donc peu importe la police que nous utilisons. Ensuite, nous définirons la largeur et la hauteur sur 100% et assurez-vous que tout ce qui déborde sur l'axe X est masqué.
html, corps {rembourrage: 0; marge: 0; font-family: "Open Sans", sans-serif; largeur: 100%; hauteur: 100%; overflow-x: caché; }
05. Style des titres de section
Il est temps de choisir une police Google pour les titres de section - nous avons choisi Playfair Display. Puis en utilisant translateX nous pouvons nous assurer que les titres des sections sont toujours centrés sur l'axe X.
h1 {taille de la police: 5rem; couleur: #fff; position: absolue; gauche: 50%; haut: 20%; transformer: translateX (-50%); espace blanc: nowrap; famille de polices: "Playfair Display", serif; }
06. Faire ressortir les CTA
Nos boutons serviront d'appels à l'action, ils doivent donc être grands, audacieux et positionnés là où ils sont faciles à cliquer. Les deux boutons auront une bordure blanche et un effet de transition intéressant. Les styles par défaut pour les deux boutons seront les mêmes, mais nous changerons leurs couleurs au survol.
.button {affichage: bloc; position: absolue; gauche: 50%; haut: 50%; hauteur: 2,6rem; rembourrage supérieur: 1,2rem; largeur: 15rem; text-align: centre; Couleur blanche; bordure: 3px solide #fff; rayon de la bordure: 4px; poids de la police: 600; text-transform: majuscule; texte-décoration: aucun; transformer: translateX (-50%); transition: tous les .2s;
Les boutons principaux auront un joli effet de survol simple et nous utiliserons les variables Sass que nous avons spécifiées pour la couleur, qui sera une couleur similaire à l'arrière-plan de la page.
.screen.left .button: hover {background-color: $ left-button-hover; border-color: $ bouton-gauche-hover; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ bouton droit-hover;
07. Définir l'arrière-plan et les écrans du conteneur
La classe conteneur agira comme notre wrapper de page et nous définirons la position de celui-ci sur relative, simplement parce que nous voulons positionner les écrans en position absolue. Nous donnerons au conteneur une couleur d'arrière-plan par défaut, mais bien sûr, cela ne sera pas visible car nous définirons des couleurs différentes pour les deux arrière-plans d'écran.
.container {position: relative; largeur: 100%; hauteur: 100%; arrière-plan: $ container-BgColor; .screen {position: absolue; largeur: 50%; hauteur: 100%; débordement caché; }}
08. Ajouter des images d'arrière-plan
Les sections gauche et droite afficheront une image et vous pouvez trouver des images libres de droits provenant de sites Web tels que Unsplash, Pixabay ou Pexels (que j'ai utilisés dans ce didacticiel). Pour faciliter les choses, j'ai utilisé un service gratuit d'hébergement et de partage d'images appelé imgbb auquel nous pouvons établir un lien dans notre CSS.
.screen.left {gauche: 0; background: url ("https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp") centre centre sans répétition; background-size: couverture; &: avant {position: absolue; contenu: ""; largeur: 100%; hauteur: 100%; arrière-plan: $ left-bgColor; }}
Le côté droit de la page affichera également une image d'arrière-plan en utilisant imgbb, et nous définirons la couleur d'arrière-plan sur rose. Encore une fois, nous définissons la taille de l'arrière-plan sur couverture. Cela nous permettra de couvrir l'intégralité de l'élément contenant, qui dans notre cas est le .écran classer.
.screen.right {droite: 0; background: url ('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp') centre centre sans répétition; background-size: couverture; &: avant {position: absolue; contenu: ""; largeur: 100%; hauteur: 100%; arrière-plan: $ right-bgColor; }}
09. Ajouter des transitions et des effets de survol
La vitesse d'animation de notre effet de survol sur les deux écrans sera contrôlée par une transition qui contient la valeur de notre variable $ animateSpeed, qui est de 1000 ms (une seconde). Ensuite, nous terminerons en donnant un peu d'accélération à l'animation, ce qui est une facilité d'entrée et de sortie qui nous aidera à nous donner une animation plus fluide.
.screen.left, .screen.right, .screen.right: avant, .screen.left: avant {transition: $ animateSpeed all easy-in-out; }
Ce que nous voulons maintenant, c'est que lorsque vous survolez l'écran de gauche, une classe sera ajoutée à cette section en utilisant JavaScript (que nous écrirons dans une étape ultérieure). Lorsque cette classe est ajoutée, alors cet écran s'étendra jusqu'à la largeur de la variable que nous avons spécifiée - qui sera de 75%, puis le côté droit sera défini sur la variable de largeur la plus petite (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: before {z-index: 2; }
Cela fonctionne exactement de la même manière que le côté gauche, où une nouvelle classe sera ajoutée au survol de la souris à l'aide de JavaScript, et l'écran droit s'étirera en conséquence. Nous devons également nous assurer que z-index est réglé sur 2 donc le bouton CTA devient plus visible.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: avant {z-index: 2; }
10. Passez à JavaScript
Nous utiliserons une touche de JavaScript vanille pour nous aider à ajouter et supprimer des classes CSS et nous utiliserons également certaines des nouvelles fonctionnalités d'ES6. La première chose à faire est de déclarer des variables constantes.
Parce que nous utiliserons document plus d'une fois, nous définirons une variable constante appelée doc et stocker le document à l’intérieur de celui-ci afin que nous puissions garder le mot «document» clair et court.
const doc = document;
Maintenant, nous devons définir trois autres constantes qui stockeront le .droite, .la gauche et .récipient sélecteurs. La raison pour laquelle nous utilisons des constantes est que nous savons que nous ne voulons pas changer la valeur de celles-ci, donc utiliser des constantes a du sens. Avec ceux-ci maintenant définis, nous pouvons continuer et leur ajouter des événements de souris.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); conteneur const = doc.querySelector (". conteneur");
En utilisant le la gauche variable constante que nous avons déclarée à la dernière étape, nous pouvons maintenant lui ajouter un écouteur d'événement. Cet événement sera le mouseenter événement et au lieu d'utiliser une fonction de rappel, nous utiliserons une autre fonctionnalité ES6 appelée Fonctions fléchées »(() =>).
// ajoute une classe à l'élément conteneur au survol gauche.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Ajouter et supprimer une classe
Dans la dernière étape, notre auditeur d'événements a ajouté un mouseenter événement qui cible la classe de conteneur principale et ajoute une nouvelle classe appelée survoler à gauche à l'élément de section gauche. Avec cet appelé ajouté, nous devons maintenant le supprimer lorsque nous le survolons. Nous allons le faire en utilisant le souris événement et le .supprimer() méthode.
// supprime la classe qui a été ajoutée au survol gauche.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Jusqu'à présent, nous avons tout fait sur l'écran de gauche. Nous allons maintenant terminer le JavaScript et ajouter et supprimer des classes sur les éléments de la section droite. Encore une fois, nous avons utilisé la syntaxe de la fonction de flèche ici pour que tout soit bien rangé.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12.Rendez-le réactif
Aucun projet, peu importe sa taille, ne doit éviter d'être rendu réactif. Donc, dans cette étape, nous allons ajouter des requêtes multimédias à notre CSS et rendre ce petit projet aussi adaptatif que possible aux appareils mobiles. Cela vaut la peine de consulter le CodePen original pour voir comment cela fonctionne.
@media (max-width: 800px) {h1 {font-size: 2rem; } .button {largeur: 12rem; }
Nous nous sommes assurés que lorsque la largeur de notre page descend à 800 pixels, la police et les boutons diminuent en taille. Donc, pour terminer les choses, nous voulons également cibler la hauteur et nous assurer que nos boutons se déplacent vers le bas de la page lorsque la hauteur de la page devient inférieure à 700 pixels.
@media (hauteur max: 700px) {.button {haut: 70%; }}
Vous souhaitez enregistrer vos pages? Exportez-les au format PDF et enregistrez-les dans un stockage cloud sécurisé.
Événement de conception Web Générer Londres revient les 19 et 21 septembre 2018, offrant un programme chargé de conférenciers de premier plan, une journée complète d'ateliers et de précieuses opportunités de réseautage - ne le manquez pas. Obtenez votre ticket Generate maintenant.
Cet article a été initialement publié dans le magazine net numéro 305. Abonnez-vous maintenant.
