TP 11 : Transitions et transformations CSS

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Ce TP vise à vous faire manipuler les transitions et les transformations CSS. Le premier exercice est très direct, le deuxième un peu plus concret et moins guidé.

Notes de cours

Exercice 1 — Transitions #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW1/TP11/ex1/index.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

  1. Créer un menu vertical comportant quelques liens, et faire en sorte que l'item survolé par la souris se décale de 20 pixels en une seconde.
  2. Ajouter un changement de couleur progressif de l'item, mais qui doit commencer après que l'item soit décalé.
  3. Ajouter une rotation complète de l'item lors du survol.
  4. En gardant les mêmes effets, faire en sorte que ça fonctionne même si la souris semble sortir de l'item.
  5. Lorsque votre navigateur affiche votre page, essayer d'appuyer plusieurs fois sur la touche « Tabulation » : les liens sont sélectionnés l'un après l'autre (cela permet de naviguer sans la souris). On parle de « focus clavier » (ou « convergence clavier » en bon français). Faire en sorte que lorsqu'un lien obtient le focus, il double de taille en une seconde.
  6. Optionnel : faire en sorte que lorsque l'on clique sur un lien, il grossisse de plus en plus tant que le clic n'est pas relâché.

Exercice 2 — Galerie animée #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW1/TP11/ex2/index.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

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. Optionnel : Faire en sorte que pendant le zoom, l'image fasse un tour complet sur elle-même, en ralentissant fortement à la fin.
  6. Optionnel : 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.