TP 12 : Transitions et travail sur le DM

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

À part un exercice sur les transitions/transformations, ce dernier TP est dédié au travail sur votre DM. En particulier, les chargé·e·s de TP vont vous faire un retour sur votre page d'accueil.

Notes de cours

Exercice 1 — Galerie animée #

Récupérer cette archive contenant 9 images ayant toutes le format 615×346 pixels. (Ces images sont librement utilisables. Elles proviennent du site PublicDomainPictures.net.)

  1. Créer une galerie (3 images par ligne) présentant des miniatures de ces images (par exemple de 300 pixels de large).
  2. Faire en sorte que passer la souris sur la galerie fasse changer sa couleur de fond de façon progressive pendant 3 secondes.
  3. Faire en sorte que passer sa souris sur une image la fasse grossir progressivement jusqu'à sa taille réelle, en utilisant une transition sur la largeur de l'image.
  4. Faire de même en utilisant une transformation, de façon à ce que les autres images de la galerie ne bougent pas lors du zoom.
  5. Faire en sorte que pendant le zoom, l'image fasse un tour complet sur elle-même, en ralentissant fortement à la fin.
  6. Ajouter une ombre à l'image zoomée. Animer cette transition, de sorte à ce qu'elle commence lorsque la rotation ralentit, et qu'elle finisse en même temps que la rotation.

Exercice 2 — Travail sur votre site

Votre chargé·e de TP devrait vous faire un retour sur votre page d'accueil lors de ce TP. Essayez de suivre ses recommandations pour le rendu final.

Vous pouvez profiter de ce dernier TP pour avancer sur votre DM tant que votre chargé·e de TP peut vous aider. Vous pouvez aussi terminer des exercices non finis des TP précédents.

Si vous avez vraiment fait tous les exercices, même les optionnels, et que vous avez terminé votre site, essayez de suivre un tutoriel sur les animations CSS (les vraies animations, pas les transitions).