Animation CSS : Solo Lyon CSS15

Cet exercice consiste créer une animation en CSS. L’exercice a plusieurs niveaux de difficultés, il peut être effectué à partir de fichiers .png ou .svg.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Consignes de l’exercice

Cet exercice est conçu pour vous faire travailler les animations CSS sur des éléments vectoriels en .svg. Pour vous simplifier la tâche, il est cependant possible de le réaliser en utilisant les images matricielles fournies au format .png.

Préparation de l’exercice

Créez un dossier racine locale qui contiendra tous les fichiers de l’exercice.

Dans le dossier racine, créez un nouveau fichier .css vierge avec le nom style.css.

Dans le dossier racine créer un nouveau fichier .html avec toute la structure de base d’une page web. Copiez / collez le code fourni ci-dessous :

<!DOCTYPE html>
<html>
    <head>
        <title>Titre de la page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>Un exemple de contenu</div>
    </body>
</html>

Intégrez le fichier .css dans la page web.

Récupérez les fichiers nécessaires pour l’exercice en cliquant sur le lien ci-dessous :

Préparation du texte (optionnel)

Cet exercice utilise une police vectorielle téléchargeable gratuitement au format .ai (Adobe Illustrator)  avec le reste des fichiers ou directement sur la page de l’auteur : https://www.behance.net/gallery/5172881/Multicolore-FREE-Font

Utilisez le texte sous forme d’images svg fournies ou préparez vous-même le fichier svg avec Illustrator.

Positionnement des éléments

HTML : Créez un premier élément HTML div avec la class container. Comme son nom l’indique, cet élément va servir de conteneur pour tous les éléments de l’exercice.

CSS : Transformez l’élément avec la class container en boite flexible.

HTML : Insérez le code svg des deux lions, puis du texte en utilisant les fichiers solo-lyon.svg et lion.svg.

Intégration des différents éléments

Si vous travaillez avec les images matricielles cette partie est plus compliquée. Vous devez placez toutes les images dans l’ordre. Le texte sera composé d’un bloc .solo-lyon qui contiendra lui-même un bloc .solo (pour le mot solo) et un bloc .lyon (pour le mot lyon) contenant chacun les lettres correspondantes.

CSS : À l’intérieur de votre conteneur flexible .container, dimensionnez les éléments comme illustré par l’image ci-dessous. Les lions occupent chacun 20% de la largeur, le texte occupe l’espace restant.

Positionnement des éléments

HTML : Modifiez les couleurs du texte en corrigeant le code svg.

Modification des couleurs

CSS : Modifier le lion de droite pour qu’il soit en miroir avec celui de gauche.

Miroir du lion droit

CSS : Modifiez la couleur d’arrière-plan de la page.

Modification de la couleur d'arrière-plan

Animation du bandeau

Si vous travaillez avec le texte .svg la principale difficulté sera de déterminer le point d’origine pour chacune des transformations.

CSS: Mettez en place l’animation du premier lion.  Le travail se fait en deux étapes :

  • l’apparition du lion (1 fois) ;
  • l’alternance de couleurs sur la forme du lion (infinie).

CSS : À partir de l’animation précédente, animez le second lion en prenant soin de décaler dans le temps l’alternance de couleurs.

CSS : Animez l’apparition des mots Solo et Lyon.

CSS : Animez chacune des lettres à votre convenance.

Correction

Le code correspondant à l’exercice est disponible ci-dessous sans les préfixes vendeurs.