(En bonus, un effet supplémentaire)
Ces interfaces qui nous font rêver
Vous êtes vous déjà demandé quel est le secret de ces interfaces vues sur Awwwards ?
Elles font rêver.
Est-ce que leurs designers sont plus créatifs ? Est-ce que leurs développeurs sont plus compétents ? Est-ce que c’est nous qui manquons de talent (pour arriver à de tels résultats) ?
Peu importe !
Une chose est sûre, c’est difficile de comprendre ce qui nous fait défaut et facile de nous comparer aux autres.
Chercher à devenir le meilleur dans un domaine, nous pousse à la comparaison et, bien souvent, ce n’est pas à notre avantage.
Nous sommes unique et chacun de nous possède une compétence qui l’est tout autant.
Ce n’est donc pas utile de se comparer.
Selon moi, nos meilleures réalisations sont celles que les autres remarquent et celles-ci sont issues d’un travail attentionné où tous les détails ont été soignés.
Par exemple, vous pouvez faire quelque chose comme ci-dessous.
Puis, décider d’y passer plus de temps pour obtenir ce résultat.
Le soulignement est :
- progressif, la barre n’apparaît pas instantanément ;
- animé, le trait arrive de la gauche et repart vers la droite.
Les contraintes de la réalité
- Les projets ont des deadlines trop courtes (😩), vous n’avez pas le loisir d’y consacrer le temps qu’il faut pour la recherche et les tests.
- “Je ne suis pas sûr de pouvoir y arriver”
- Les efforts nécessaires ne valent pas la peine : “mes prospects ne remarqueront rien”.
Pas de soucis ! Vous n’avez qu’à utiliser ce snippet (ou tout ce qui vous intéresse sur ce blog) et suivre le guide. Avec le temps, vous pourrez constater qu’un site soigné inspire la confiance.
Le guide étape par étape
Dans la suite de cet article, je vous explique comment fonctionne l’effet qui fait toute la différence entre les exemples vus plus haut ; et passer d’une interface qui vaut un “bien” à “génial”.
Vous serez capable de l’intégrer et de l’appliquer aux éléments de vos interfaces voir même de réutiliser la technique autre part.
La mise en place du projet
Commençons par une structure de page basique index.html et un fichier de style style.css.
Le markup HTML
Notre page HTML5, importe le stylesheet (et une font family) dans la section “head”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap" rel="stylesheet">
<title>Soulignement au survol de gauche à droite</title>
</head>
<body>
<body>
<header>
<nav>
<div class="container">
<a href="/" class="logo-title">Logo / Titre</a>
<ul class="menu">
<li class="item"><a href="#" class="link">Services</a></li>
<li class="item"><a href="#" class="link">Portfolio</a></li>
<li class="item"><a href="#" class="link">Contact</a></li>
</ul>
</div>
</nav>
</header>
</body>
</body>
</html>Dans le “body”, on crée l’entête de notre page “header” et sous celui-ci, on regroupe un lien “.logo-title” et une liste de liens de navigation “.menu”, sous une balise “nav”.
Le code du fichier style
Le style est très basique, on initialise quelques variables afin de les réutiliser plus tard et on enlève les marges (par défaut) des éléments de la page.
Les liens de la barre de navigation sont regroupés et centrés sur la page via un conteneur “.container”. Ce dernier est en display flex et les éléments qu’il contient (“.logo-title” et “.menu”) sont disposés de part et d’autre (justify-content: space-between).
Le menu “.menu” est aussi en display flex afin que ses éléments soient disposés horizontalement. Ces derniers possèdent une marge à gauche, ce qui permet de les espacer.
(Je ne rentrerai pas dans les détails, par exemple je ne précise pas quelles couleurs que j’applique, ni la taille des éléments…)
:root {
--orange: hsl(16, 99%, 70%);
--light: hsl(16, 99%, 99%);
--dark: hsl(16, 99%, 1%);
--font-family: "Montserrat", sans-serif;
--font-weight-light: 300;
--font-weight-semi-bold: 600;
--animation-timing: 0.6s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: var(--light);
color: var(--dark);
font-size: 16px;
}
body {
font-family: var(--font-family);
font-weight: var(--font-weight-light);
}
a {
color: var(--dark);
text-decoration: none;
}
.container {
width: 80%;
max-width: 1440px;
margin: 0 auto;
}
nav .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 10vh;
}
.logo-title {
font-size: 1.4rem;
font-weight: var(--font-weight-semi-bold);
}
.menu {
display: flex;
align-items: center;
list-style: none;
}
.menu .item {
margin-left: 1rem;
}
.menu .link {
font-size: 1.2rem;
}
A ce stade vous devriez avoir un résultat similaire à l’image ci-dessous :
Créer l’effet de survol
“Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l’élément ciblé par la règle” (https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements).
C’est ce que l’on va utiliser pour souligner les liens de notre menu “.menu .link”.
.menu .link::after {
content: "";
display: block;
height: 0.1rem;
background: var(--orange);
}
Pour qu’un pseudo-élément apparaisse il faut lui définir un contenu, mais on ne veut rien mettre de spécial, on se contentera d’une chaîne de caractère vide.
Pour qu’il ait la forme d’une ligne, on le met en display block. La largeur est égale à l’espace qu’occupe le texte du lien, il reste à lui donner une hauteur de 0.1rem (soit ~1.6px) et un fond orange pour que le trait soit visible.
Seulement on veut que le trait ne s’affiche qu’au survol de la souris. On applique une transformation pour que la taille du trait soit de 0.
.menu .link::after {
content: "";
display: block;
height: 0.1rem;
background: var(--orange);
transform: scale(0);
}
Et, au survol, on lui redonne sa taille initiale.
.menu .link:hover::after {
transform: scale(1);
}
Le menu devrait se comporter ainsi :
D’un effet basique à élégant
On commence par afficher la transition sur la transformation plus lentement
.menu .link::after {
content: "";
display: block;
height: 0.1rem;
background: var(--orange);
transform: scale(0);
transition: transform var(--animation-timing);
}
et on obtient un premier effet (bonus sympa 😘) :
Mais on veut que le trait arrive de la gauche et reparte vers la droite.
Pour cela, lors du survol, on place l’origine de la transformation à gauche…
.menu .link:hover::after {
transform: scale(1);
transform-origin: left;
}
…et (cette dernière) à droite en temps normal.
.menu .link::after {
content: "";
display: block;
height: 0.1rem;
background: var(--orange);
transform: scale(0);
transition: transform var(--animation-timing);
transform-origin: right;
}
Enfin, on veut que l’animation prenne son temps pour apparaître. C’est ce qui, à mon goût, la rend plus fluide / « smooth »
Animation avec du CSS
.menu .link::after {
content: "";
display: block;
height: 0.1rem;
background: var(--orange);
transform: scale(0);
transition: transform var(--animation-timing);
transform-origin: right;
animation: fade-in var(--animation-timing);
}
@keyframes fade-in {
0% {
opacity: 0;
}
90% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
Hé voilà 💫 !
Les interfaces présentées sur Awwwards sont polies et ont, très certainement, demandé beaucoup d’effort de la part de leurs créateurs. Je n’ose même pas imaginer le temps passer à les travailler, les successions de tests, d’échecs, etc.
Aussi, j’attire votre attention sur le fait qu’elles suivent des guidelines bien précises.
Vous ne manquez pas de compétences pour en faire, elles sont simplement chronophages. L’effet sur ce menu n’était qu’un exemple, il vous faudra prendre soin de tous les éléments de vos pages.
Les snippets présents sur ce site sont là pour vous aider, mais ils me prennent du temps à les réaliser.
Si vous les appréciez, n’hésitez pas à les partager et faire connaître ce blog.
Si besoin, contactez-moi à l’adresse bonjour@alixfdm.fr pour vous aider à les intégrer dans vos projets (quand c’est déjà fait c’est mieux !).
Vous pouvez aussi m’écrire pour me dire quels types d’animations vous souhaiteriez voir sur ce blog.
Les sources du projet sont disponibles ici : https://github.com/afdm/hover-sliding-animation-from-left-to-right.