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 :

Developer.Mozilla : Utiliser les animations CSS
W3schools : CSS Animations

Sites de polices d'écritures gratuites :

Dafont.com : toutes les polices ne sont pas libres de droits
font squirrel.com : idem...

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 :

Ne pas hésiter à copier du code existant (même celui de cette page) pour le modifier.
Attention à ne pas copier de gros morceaux de codes sans le comprendre, il vous serait quasiment impossible de l'expliquer au professeur...
Aller voir en ligne des exemples et des tutoriels concernant l'animation CSS pour en percevoir les possibilités
Ne pas hésiter à s'attaquer à des formes circulaires à l'aide de l'attribut CSS border-radius permettant de créer des bords rond, voire des cercles.
Séparer les difficultés : commencer par positionner les éléments principaux (position, top, left, margin, ...) avant de les animer (@keyframes, animation-delay, animation-name, animation-direction, etc.).