Organisations des répertoires — Transitions et animations CSS

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Organisations des répertoires — Transitions et animations CSS

Notes de cours

Travail personnel

Objectifs

Les deux exercices portent uniquement sur les transitions. Le cours sur l'organisation des fichiers sera à appliquer sur votre mini-site, bien sûr, mais également de façon générale sur toutes vos pages dès qu'elles utilisent plusieurs fichiers.

Exercice 1 — Transitions

Une correction détaillée de cet exercice est disponible.

  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. Optionnel : ajouter une rotation complète de l'item lors du survol.
  4. Optionnel : en gardant les mêmes effets, faire en sorte que ça fonctionne même si la souris semble sortir de l'item.
  5. Optionnel : faire en sorte que lorsque l'on clique sur un lien, il doit doubler de taille en une seconde tant que le clic n'est pas relâché.

Exercice 2 — Galerie animée

Une correction détaillée est disponible (archive du code).

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), en utilisant la mise en page flexible.
  2. 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.
  3. 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.
  4. Faire en sorte que pendant le zoom, l'image fasse un tour complet sur elle-même, en ralentissant fortement à la fin.
  5. 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.