15. Développement Web - TP N°15

Résultat attendu :

Notez que la police d'affichage
a été modifiée en Arial ou Verdana

15.1. Objectif

On désire créer une page photomag.html qui permet de visualiser un ensemble de photographies numériques en réduisant la taille des photos. On désire également, lorsque l'on passe sur une photographie, lancer une transition qui fait tourner la photographie de 360 degrés, lui applique une translation et l'agrandit.

15.2. XHTML

Commencez par créer photomag.html. Cette page dispose d'un header qui contient un titre h1 de 200 pixels de hauteur sur fond noir, de valeur "Mes photos" affiché en blanc.

La partie main contient une section qui contient plusieurs article.

Chaque article est composé :

• d'un titre h2 qui décrit la photo succintement
• d'une image
• d'un texte descriptif

voici les informations liées à chaque photo :

Plage au crépuscule (img1.jpg - 4080 x 3072

Sous un ciel en feu, où les nuances d'orange, de pourpre et d'or se mêlent en une danse incandescente, la plage de sable fin du Morbihan s'étend langoureusement, bordée par les silhouettes évanescentes des dunes et caressée par le murmure éternel des vagues.

Pyramide (img2.jpg - 4080 x 3072

Près de la pyramide millénaire de Comalcalco, dont les briques rougeoyantes captent les derniers éclats du jour, des enfants s'élancent avec une insouciance éclatante, leurs rires cristallins se mêlant à l'aura immémoriale des lieux, comme si le passé et le présent dansaient d'une même cadence.

Plage solitaire (img3.jpg - 4080 x 3072

Sous un ciel d'hiver où le crépuscule se pare de teintes glacées mêlant l'indigo et l'argent, la plage déserte des Sables-d’Olonne s’étire, balayée par un vent mordant, tandis que l’écume des vagues, étincelante sous les derniers rayons du soleil, semble murmurer un poème oublié.

Plage et rochers (img4.jpg - 4080 x 3072

Sous un ciel hivernal d’un bleu pur et tranchant, la lumière dorée du couchant effleure les rochers noirs des Sables-d’Olonne, qui émergent tels des gardiens silencieux, tandis que l’océan, frangé d’écume lumineuse, déroule son éternelle mélancolie sur le rivage déserté.

15.3. CSS

15.3.1. Mise en forme initiale

Mettre en place un fichier de style photomag.css, dont le but est de mettre en forme les images de manière à avoir deux colonnes de photographies. Un pourra utiliser une grid avec display : grid.

Essayez d'obtenir le rendu de l'image du site (ci-dessus).

15.3.2. Mise en place de la transformation

Lorsque la souris passe sur une image, on veut lui appliquer les modifications suivantes :

• une translation de -50 pixels sur les axes X et Y
• une rotation de 360 degrés
• un agrandissement d'un facteur 2.5

On désire que les transformations soient réalisées dans un intervalle d'une seconde.

15.3.3. Disparition

Pour la première image, on veut remplacer la transformation précédente par une animation qui a pour but de faire disparaître l'image progressivement tout en la déplaçant sur la gauche. Modifier le CSS dans ce but. On pourra par exemple attribuer un identifiant à la première image et modifier le CSS en utilisant cet identifiant.