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.

Démonstration

http://exemple.com/index.html

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 .html avec toute la structure de base d’une page web. Copiez / collez le code fourni ci-dessous :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

Toujours dans le dossier racine, créez un nouveau fichier css vierge avec le nom style.css. et intégrez-le à la page web.

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

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

Fichiers de travail

Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.

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 classe container. Comme son nom l’indique, cet élément va servir de conteneur pour tous les éléments de l’exercice.

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

Les images svg sont intégrées directement via leur code afin de pouvoir faire les manipulations par la suite via CSS.

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.

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

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

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

La correction de l’exercice est disponible directement sur Codepen.

Consultez ce code créé par crego (@crego) sur le site CodePen.

Sauf mention contraire*, l'article Animation CSS : Solo Lyon [CSS15] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.