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é.
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-LOGIN.users.info.unicaen.fr/TW1-2024/TP15/ex1/transitions.html(en remplaçant LOGIN par votre nom de login). 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="LOGINS" />en remplaçant LOGINS par les noms de login 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 dupont210 et durand212 ont travaillé ensemble, ils mettent
<meta name="author" content="dupont210,durand212" />
dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.
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.
- 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.
- Ajouter un changement de couleur progressif de l'item, mais qui doit commencer après que l'item soit décalé.
- Ajouter une rotation complète de l'item lors du survol.
- Normalement, si vous bougez la souris pendant la rotation, même un tout petit peu, la transition va être saccadée, car la rotation revient brièvement en arrière puis avance à nouveau. Faites en sorte d'éviter cet effet, avec la technique vue en cours.
- 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.
- 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-LOGIN.users.info.unicaen.fr/TW1-2024/TP15/ex2/galerie.html(en remplaçant LOGIN par votre nom de login). 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="LOGINS" />en remplaçant LOGINS par les noms de login 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 dupont210 et durand212 ont travaillé ensemble, ils mettent
<meta name="author" content="dupont210,durand212" />
dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.
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.)
- Créer une galerie (3 images par ligne) présentant des miniatures de ces images (par exemple de 300 pixels de large).
- Faire en sorte que passer la souris sur la galerie fasse changer sa couleur de fond de façon progressive pendant 3 secondes.
- 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. (Utiliser une valeur fixée pour la largeur : les valeurs
autoourevertne permettent pas d'avoir une transition.) - 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.
- Optionnel : Faire en sorte que pendant le zoom, l'image fasse un tour complet sur elle-même, en ralentissant fortement à la fin.
- 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.