Dans le 3e chapitre de ce tutoriel je vous montre comment créer en CSS un titre animé avec le fichier SVG en background que nous avons réalisé précédemment.

Vous saurez comment j’ai réalisé l’en-tête animé de la page d’accueil de Dream. Il s’agit d’un apprentissage pas à pas avec :

  1. la création du vecteur sur Adobe Illustrator pour réaliser un motif (pattern),
  2. la création du motif sur Adobe Illustrator qui s’affichera sur le background de la div,
  3. l’exportation et optimisation du fichier SVG,
  4. la création en CSS de l’en-tête animé et créatif sur le site avec l’intégration du fichier SVG dans le CSS.

Le lien vers les autres chapitres :

Voici le résultat final auquel vous allez arriver (passez la souris dessus) :

 

Attention : Je vous rappelle qu’il faut un navigateur moderne pour visualiser correctement cet en-tête. Il s’agit d’une technique encore trop poussée et donc le résultat ne sera pas le même dans tous les navigateurs. Par définition, sur les dispositifs one-touch, l’effet ne sera pas le même.

Réfléchissez bien avant d’intégrer ce code dans votre design. Tant que cela ne gêne pas le confort de navigation et l’accès aux informations, on peut se permettre de l’inclure.

En téléchargement vous pouvez accéder aux fichiers démo avec le HTML, le CSS et le SVG :

Télécharger les fichiers de la démo

Le html avec le titre

Ce code HTML5 contient le strictement nécessaire pour faire marcher votre en-tête :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">

  <title>Entête créatif avec SVG et CSS</title>
  <meta name="description" content="Entête créatif avec SVG et CSS">
  <meta name="author" content="Agence Dream">
  <link rel="stylesheet" href="style.css">
  <link href='https://fonts.googleapis.com/css?family=Quicksand:300|Josefin+Slab:600' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <div class="tproject grid__item">
        <a href = "http://agencedream.fr/?p=661" class = "link link--spiro">
            <strong>Dum spiro, spero </strong>
            <span>While I breathe,</span>
            <span>I hope</span>
        </a>
    </div>
    <p><a href="">Retour à l'article</a> - Tutoriel réalisé par <a href="http://agencedream.fr/" target="_blank">Agence Dream</a> - Inspiré de <a href="http://tympanus.net/codrops/2015/05/13/inspiration-for-text-styles-and-hover-effects/"target="_blank">Codrops</a></p>
</body>
</html>

 

La partie qui nous intéresse s’agit du DIV, où les 2 sous-titres animés se trouvent dans un SPAN et le titre principal est dans un STRONG.

Le CSS pour animer le titre

Je vous copie le CSS entier où vous avez la formule pour créer en CSS un titre animé et créatif :

p {
  text-align : center;
  font-size	: 1em;
  font-family	: 'Josefin Slab', serif;
  font-weight	: 600;
  color: #d0d0d0;
}

p a {
  color: #d0d0d0;
}

.tproject {	
  height 	: 230px;
  overflow	: hidden;
  display 	: inline-block;		
  font-size	: 2.5em;
  background	: #7edbb4 url('svg/pattern.svg') repeat left top;
  color		: #474747;
}

.tproject, .tproject a, .tproject a:visited {
  color		: #343434;
  text-decoration	: none;
}

.tproject strong {
  font-weight		: normal;
  text-transform 	: uppercase;
}


/** codrops **/
/* Grid */
.grid__item {
  z-index: 1;
  position: relative;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */
}


.project a, .project a:hover {
  text-decoration : none;
}

.project strong {	
  display:block;
  line-height	: 235px;
}

/** spiro **/

.link--spiro {
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
  font-family: 'Quicksand', sans-serif;
  font-weight : 300;
  display: block;
}

.link--spiro:hover {
  color: #1e1a1b;
}

.link--spiro::before,
.link--spiro::after {
  content: '';
  position: absolute;
  border-width: 1px 0;
  border-style: solid;
  border-color: #474747;
  pointer-events: none;
  -webkit-transform: scale3d(0,1,1);
  transform: scale3d(0,1,1);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.link--spiro::before {
  width: 50%;
  left: 25%;
  height: 24%;
  top: 38%;
}

.link--spiro::after {
  width: 30%;
  left: 35%;
  height: 34%;
  top: 33%;
}

.link--spiro:hover::before,
.link--spiro:hover::after {
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
}

.link--spiro span {
  font-family			: 'Josefin Slab', serif;
  font-weight			: 600;
  position			: absolute;
  font-size			: 0.45em;
  left				: 0;
  width				: 100%;
  opacity				: 0;
  pointer-events		: none;
  -webkit-transition	: opacity 0.5s, -webkit-transform 0.5s;
  transition			: opacity 0.5s, transform 0.5s;
}

.link--spiro span:first-of-type {
  bottom: 69%;	
  -webkit-transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
  transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
}

.link--spiro span:last-of-type {
  top: 69%;	
  -webkit-transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
  transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
}

.link--spiro:hover span {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.link--spiro:hover span:first-of-type {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.link--spiro:hover span:last-of-type {
  -webkit-transition-delay: 0.20s;
  transition-delay: 0.20s;
}

Maintenant on va s’arrêter sur les parties les plus intéressantes.

 

Le fichier SVG en background

La première partie contient les styles habituels pour donner le style à notre HTML. Je vous montre de près pour le SVG :

.tproject {	
  height 	: 230px;
  overflow	: hidden;
  display 	: inline-block;		
  font-size	: 2.5em;
  background	: #7edbb4 url('svg/pattern.svg') repeat left top;
  color		: #474747;
}

 

C’est simple : Il suffit d’utiliser le fichier SVG comme un fichier d’image background normal. Tout sur ce fichier SVG dans le chapitre précédent de ce tutoriel.

 

La structure « Flexible Box Layout »

Cette méthode positionne les éléments en horizontal et vertical, avec un alignement central :

.grid__item {
  z-index: 1;
  position: relative;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */
}

Elle nous permet de manière simple de garder le positionnement parfait de l’élément à l’intérieur du block DIV, dans notre cas, les textes. Non seulement c’est pratique, cette technique simplifie les choses pour un design responsive. Plus d’infos sur CanIUse.

 

Créer et animer les 4 lignes

.link--spiro::before,
.link--spiro::after {
  content: '';
  position: absolute;
  border-width: 1px 0;
  border-style: solid;
  border-color: #474747;
  pointer-events: none;
  -webkit-transform: scale3d(0,1,1);
  transform: scale3d(0,1,1);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.link--spiro::before {
  width: 50%;
  left: 25%;
  height: 24%;
  top: 38%;
}

.link--spiro::after {
  width: 30%;
  left: 35%;
  height: 34%;
  top: 33%;
}

.link--spiro:hover::before,
.link--spiro:hover::after {
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
}

Les pseudo classes before et after, combinées avec content, créent deux sortes de DIVs virtuelles. Les DIVs ne sont pas dans le code, mais elles sont générées par le CSS. C’est là qu’on définit le border en haut et en bas mais pas à gauche ni à droite avec border-width: 1px 0;.

 

Aussi le reste dont :

-webkit-transform: scale3d(0,1,1);
 transform: scale3d(0,1,1);

Ceci définit la transformation de l’élément (la ligne horizontale). Le scale3d est une fonction expérimentale qui transforme un élément en 3 dimensions. Les (x, y, z) changent la taille dans la direction du axe x, y et z. Ici on joue sur l’horizontale x : l’animation se réalise sur une transformation en horizontale des lignes. Le x est à 0 pour ne rien afficher par défaut. Les y et z sont à 1, cela ne fait rien changer.

 

-webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;

Ici on définit une transition. La transition permet de changer un objet de manière douce (d’une valeur à une autre) pendant une durée déterminée. Il est obligatoire de définir la propriété, dans notre cas, transform, et la durée, 0.4s ici.

 

-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
 transition-timing-function: cubic-bezier(0.2,1,0.3,1);

transition-timing est une propriété facultative associée à transition. Le cubic-bezier est une fonction de temps sur la vitesse à laquelle l’élément va changer pendant une transition ou une animation.

Grâce au transition qu’on vient de voir plus haut, le scale3d va s’afficher de manière douce avec un petit effet d’accélération élégant et fonctionnel, le cubic-bezier.

 

.link--spiro:hover::before,
.link--spiro:hover::after {
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
}

Jusqu’ici on a défini les caractéristiques des transitions, mais c’est là que l’animation va se déclencher. Le :hover fait déclencher l’animation quand la souris passe par dessus nos 2 éléments qui ont 2 lignes chaque.

On retourne sur le scale3d. Quand on affiche (1, 1, 1) comme ici, l’élément ne change pas. On le fait donc retourner à sa forme originale sur l’axe x lorsque la souris passe par dessus (:hover). Souvenez-vous que l’état par défaut et définit plus haut était (0, 1, 1).

 

Animation des sous-titres supérieur et inférieur

.link--spiro span {
  font-family			: 'Josefin Slab', serif;
  font-weight			: 600;
  position			: absolute;
  font-size			: 0.45em;
  left				: 0;
  width				: 100%;
  opacity			: 0;
  pointer-events		: none;
  -webkit-transition	        : opacity 0.5s, -webkit-transform 0.5s;
  transition			: opacity 0.5s, transform 0.5s;
}

.link--spiro span:first-of-type {
  bottom: 69%;	
  -webkit-transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
  transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
}

.link--spiro span:last-of-type {
  top: 69%;	
  -webkit-transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
  transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
}

.link--spiro:hover span {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.link--spiro:hover span:first-of-type {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.link--spiro:hover span:last-of-type {
  -webkit-transition-delay: 0.20s;
  transition-delay: 0.20s;
}

 

Cette partie devient un peu plus complexe mais pour animer les sous-titres on joue avec les mêmes éléments et quelques nouvelles propriétés.

On finit ici l’apprentissage sur cet en-tête. Maintenant vous savez créer en CSS un titre animé et créatif avec un fichier SVG. Le résultat est responsive et impeccable. Cela a été possible grâce au remarquable travail de Mary Lou sur Codrops. Merci pour votre lecture et j’espère que vous serez inspirés pour vos créations sur le web.

Crédit Photo En-tête : McDobbie Hu Licence Creative Commons CC0.

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.