Projet FONT
Nous proposons de réaliser des logos animés en HTML et pure CSS. Les animations ci-dessous sont des exemples de réalisations dont vous pourrez vous inspirer.Il ne s'agit pas de vidéos. D'ailleurs, le texte peut être sélectionné à la souris et même changé via les outils de développement :
Math
Soup
Logo d'une célèbre franchise de films

Episode IV

Un nouveau MathSoup

C'est une époque de guerre civile. A bord de vaisseaux spatiaux opérant à partir d'une base cachée, les Rebelles ont emporté leur première victoire sur le maléfique Empire Galactique. Au cours de la bataille, des espions rebelles ont réussi à dérober les plans secrets de l'arme absolue de l'Empire : l'Etoile de la Mort, une station spatiale blindée dotée d'un équipement assez puissant pour annihiler une planète tout entière. Poursuivie par des sbires sinistres de l'Empire, la princesse Leia file vers sa base dans son vaisseau cosmique, porteuse des plans volés à l'ennemi qui pourront sauver son peuple et restaurer la liberté dans la galaxie...
Opening de la dite franchise
MATHSOUP
THINGS
Reproduction du titre du générique d'une série populaire

MathSoup
Logo de chargement d'un célèbre openworld sur Switch...
Une animation en CSS se fait en cr√©ant une r√®gle via @keyfames disant sur quelle propri√©t√© porte l'animation (couleur, position, etc.). Puis l'animation doit √™tre li√©e √† un √©l√©ment avec l'attribut animation-name. De nombreux param√®tres permettent alors de pr√©ciser les param√®tres de l'animation(dur√©e, vitesse, boucle, etc.) On cr√©e une div que l'on rep√®re gr√Ęce √† l'id (identifiant)L'attribut id est un identifiant unique. Il ne faut jamais donner deux fois la m√™me valeur √† deux objets diff√©rents (ou bien utiliser l'attribut class √† la place de id). Le fichier CSS s√©lectionne l'√©l√©ment concern√© avec un di√®se "#" devant la valeur de l'id.
Pour faire référence à la div avec l'attribut id="exemple1" , on utilise le sélecteur # en écrivant #exemple1 : @keyframes regle1 { from {background-color: red;} to {background-color: yellow;} } #exemple1{ width: 100px; height: 100px; background-color: red; animation-name: regle1; animation-duration: 1s; animation-direction: alternate; animation-iteration-count:infinite; } Résultat :
La propriété animation-direction: alternate; permet de faire un cycle complet (de rouge vers jaune, puis à nouveau rouge). La propriété animation-iteration-count: infinite; permet de réaliser une infinité de cycle.
On cr√©e plusieurs div qui partageront un style css. On les reconna√ģt gr√Ęce √† leur classe L'attribut class est un identifiant non unique. Il permet d'appliquer le m√™me style √† diff√©rents objets de la m√™me classe. Le fichier CSS s√©lectionne l'√©l√©ment concern√© avec un point "." devant la valeur de class.
Pour faire référence aux trois div à la fois, on utilise l'attribut class="runner" . On utilise le sélecteur point "." en écrivant .runner : @keyframes regle2 { from {margin-left: 0%;} to {margin-left: 100%;} } .runner{ width: 100px; height: 100px; background-color: green; animation-name: regle2; animation-direction: normal; animation-iteration-count:infinite; } #runner1{animation-duration: 1s;} #runner2{animation-duration: 3s;} #runner3{animation-duration: 5s;} Résultat :
La propriété animation-direction: normal; empêche les aller-retour.
Les propri√©t√©s CSS sont tr√®s puissantes et permettent de r√©aliser des animations hautement complexes. Ces deux exemples permettent de comprendre le fonctionnement basique, mais ne suffisent pas √† conna√ģtre et comprendre toutes les propri√©t√©s et leurs possibilit√©s. De nombreux exemples et tutoriel existent sur internet, il est conseill√© d'effectuer quelques recherches : Aides en lignes : Sites de polices d'√©critures gratuites :
Réaliser un logo ou une scène animée en HTML et pure CSS. Le choix pourra être fait librement entre des exemples existants ou une création libre, la seule contrainte étant de respecter le cahier des charges. Veillez à bien respecter le cahier des charges : le projet est évalué à partir de celui-ci.

Le logo devra présenter les caractéristiques suivantes :

  • Il devra √™tre r√©alis√© en HTML/CSS, sans image anim√©e, sans vid√©o et sans biblioth√®que externe ni langage de programmation tiers(type javascript).
  • Il devra inclure une police d'√©criture (ou FONT).
  • Il devra √™tre anim√© suivant au moins deux crit√®res diff√©rents (translation, grossissement, zoom, transition de couleur, flou, apparition, etc.)

Quelques conseils avant de démarrer dans le projet :