Faire son site 10

On a déjà vu comment faire un menu et, comme exemple, j'avais pris celui des trucs et astuces (on n'est jamais aussi bien servi que par soi-même). Cette fois, on va en voir un autre un peu plus amusant. Je l'ai limité à quatre options afin de ne pas avoir l'impression de réécrire le Bottin. Il est composé de deux parties distinctes qui peuvent être utilisées indépendamment l'une de l'autre.

Un petit tour en hélicoptère

Quelques mots sur la règle @keyframes

Derrière le mur, la plage

Une mongolfière en ville

<div id="bloc1">
  <a class="lien2" href="trucs8.html" target=_blank"><img id="im3" src="im3.jpg"></a>
  <a class="lien2" href="trucs11.html" target=_blank"><img id="im2" src="im2.jpg"></a>
  <a class="lien2" href="refCSS/keyframes.html" target=_blank"><img id="im4" src="im4.jpg"></a>
  <a class="lien2" href="trucs12.html" target=_blank"><img id="im1" src="im1.jpg"></a>
</div>


<div id="legende">
  <div id="leg1"><a class="lien" href="trucs12.html" target=_blank">Un petit tour en hélicoptère</a></div>
  <div id="leg2"><a class="lien" href="refCSS/keyframes.html" target=_blank">Quelques mots sur la règle @keyframes</a></div>
  <div id="leg3"><a class="lien" href="trucs8.html" target=_blank">Derrière le mur, la plage</a></div>
  <div id="leg4"><a class="lien" href="trucs11.html" target=_blank">Une mongolfière en ville</a></div>
</div>

On va commencer par la partie HTML qui est quand même plus courte que la feuille de style. Comme je vous le disais, il y a deux blocs distincts. Le premier bloc contient les images qui sont des liens vers des pages du site et le deuxième bloc contient des bouts de texte associés aux images. Ce sont également des liens qui pointent vers les mêmes pages que les images.

Les quatre images sont des copies d'écran recadrées afin d'obtenir une taille raisonnable. Elles font chacune 280*210 pixels, le changement de taille se fait par les styles CSS afin de donner l'effet de profondeur. Les images sont positionnées sur trois plans. Au premier plan, l'image a sa taille normale et est nette. Au deuxième plan, il y a l'image de gauche et l'image de droite. Ces deux images reçoivent un léger effet de flou afin d'accroître l'effet de profondeur. Tant pis pour les utilisateurs d'Internet Explorer car une fois de plus, ce navigateur ne reconnait pas la chose. Ça devient lassant à la fin. Enfin, au troisième plan, on a l'image du fond qui elle, reçoit un effet de flou plus marqué.

C'est long hein! C'est normal, il y a deux animations qui fonctionnent en même temps et il faut bien décrire les deux. Le principe est simple. L'animation se déroule en quatre temps ce qui nous donne 25% du temps pour chaque phase. Comme nous disposons de 20 secondes pour faire un tour complet, cela nous donne cinq secondes par phase. J'ai pris 19 et 6% pour faire une phase soit 3.8 et 1.2 secondes. Au final, nous avons :

Entre 0 et 19%	l'image est fixe
Entre 19 et 25%	l'image se déplace
Entre 25 et 44%	l'image est fixe
Entre 44 et 50%	l'image se déplace
Entre 50 et 69%	l'image est fixe
Entre 69 et 75%	l'image se déplace
Entre 75 et 94%	l'image est fixe
Entre 94 et 100%	l'image se déplace et revient à son point de départ

Dans les règles @keyframes des images (im1, im2, im3 et im4), nous nous retrouvons avec, chaque fois que l'image est fixe, deux fois la même ligne de code.

Sur chaque ligne, nous définissons six propriétés :

width qui définit la largeur de l'image. Elle prend trois valeurs différentes
- 280px pour l'image au premier plan
- 200px pour les images de gauche et de droite
- 180px pour l'image du fond
height qui définit la hauteur de l'image. Elle prend trois valeurs différentes
- 210px pour l'image au premier plan
- 150px pour les images de gauche et de droite
- 144px pour l'image du fond
margin-left positionne l'image horizontalement. Elle prend quatre valeurs différentes
- 190px pour l'image au premier plan
- 0px pour l'image de gauche
- 240px pour l'image du fond
- 460px pour l'image de droite
margin-top positionne l'image verticalement. Elle prend trois valeurs différentes
- 90px pour l'image au premier plan
- 50px pour les images de gauche et de droite
- 0px pour l'image du fond
filter: blur() définit le niveau de flou de l'image (Voir la page filter). Elle prend trois valeurs différentes
- 0px pour l'image au premier plan, celle-ci reste nette
- 2px pour les images de gauche et de droite, elles sont légèrement floues
- 3px pour l'image du fond qui est un peu plus floue
z-index définit le positionnement de l'image dans l'empilement des images. Elle prend trois valeurs différentes
- 5 pour l'image au premier plan, celle-ci est sur le dessus de la pile
- 3 pour les images de gauche et de droite, elles sont placées sous l'image du premier plan
- 1 pour l'image du fond qui est en bas de la pile

Lors de la description des images (#im1, #im2, #im3 et #im4), nous retrouvons nos six propriétés avec leurs valeurs respectives au point de départ de l'animation. Notez la position avec la valeur absolute. Les positions sont calculées par rapport à #bloc1 qui lui a la valeur relative afin de le placer dans le contexte de la page. Je viens de me rendre compte que j'avais mis la propriété overflow: hidden; alors que celle-ci est totalement superflue car tout se passe au sein de #bloc1.

On passe maintenant au texte qui défile sous les images. Le bloc qui contient ces bouts de texte s'appelle #legende et sa description mérite quelques remarques. La propriété line-height a une valeur égale à la hauteur du bloc. Comme le texte est plus petit, cela permet de le centrer verticalement. En contrepartie, cela nous limite à un texte sur une ligne unique. La propriété overflow avec la valeur hidden trouve ici toute sa place car les textes sont situés en dehors du bloc et ne sont visibles que lorsqu'il y a besoin d'eux.

La propriété visibility des textes est à hidden car nous allons jouer avec lors du déplacement de ceux-ci.

Dans les règles @keyframes on retrouvent les mêmes étapes que pour les images soit 0%, 19%, 25%, 44%, 50%, 69%, 75%, 94% et 100% afin de synchroniser le texte avec les images.

A ces valeurs, il a fallu en rajouter d'autres. Une fois que le texte a été affiché et qu'il est ressorti du bloc, pour assurer le retour au point de départ, on rend le texte invisible, on le positionne 100 pixels au dessus du bloc et retour au point de départ.