Cours au département INFO - IUT - UNS

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== TD5 - Animations, bouge ton CSS ======

===== Structure pour Compléments =====

Dans ce nouveau TP, nous allons poursuivre notre exploration des normes HTML5 et CSS. Pour cela nous allons construire petit à petit une page web de démonstration nous permettant d'illustrer le positionnement, les transitions CSS, les sélecteurs CSS3... Cette page nous permet de rassembler les notions vues dans les quatre derniers TDs et d'y ajouter des animations.

<note tip>De manière à réviser, il est conseillé de partir sur une toute nouvelle page HTML.</note>

On va commencer par créer la structure de notre page, sans réel contenu, celui-ci sera ajouté ensuite une fois que les différentes sections seront bien agencées.

<box round rgb(185,211,238) 95%|**A Faire** :  >
   - Commencez par créer une page HTML5 contenant une zone ''header'', une zone ''nav'', une zone ''aside'', 5 zones ''section'' et une zone ''footer''.
  - A l'aide d'un fichier CSS lié, définissez les propriétés suivantes pour les zones :
    * header : prend toute la largeur de la page, contiendra un texte de 40px de haut et en petites capitales
    * nav sera une zone horizontale sous le header de 600px de large
    * aside : est une colonne alignée à droite de 200px de large
    * section : un ensemble de zones centrées de 800px de large
    * footer : un zone en fin de page qui contiendra 2 liens-images alignés à droite
  - Toutes les zones doivent avoir une bordure rouge de 1px et un bord arrondi (__Indice__ : ''border-radius'' de 10px)
</box>

===== Transitions et transformations css =====
<box round rgb(185,211,238) 95%|**A Faire** :  >
Continuez votre page de démonstration en ajoutant 5 images dans la premiere zone section. Chaque image aura une largeur de 150px et une hauteur de 108px.

  * la première image devra subir une inclinaison de 15deg en y (''skewY'') lors du survol du pointeur souris. Utilisez le sélecteur ''first-of-type''.
  * la deuxième image devra subir une inclinaison de 20deg en x (''skewX'') lors du survol du pointeur souris. Utilisez le sélecteur ''nth-last-of-type''. 
  * la troisième image devra subir une mise à l'échelle ''scale'' de 1.2 (ie. un grossissement) lors du survol du pointeur souris. Utilisez le sélecteur ''nth-child''.
  * la quatrième image devra subir une rotation de 25 degrés (en changeant l'origine en (0,0) voir ''rotate'') lors du survol du pointeur souris. Utilisez le sélecteur'' nth-of-type''.
  * la cinquième image devra subir une mise à l'échelle de 0.5 (ie. un rétrécissement) et une translation (120px, 50px) lors du survol du pointeur souris. Utilisez le sélecteur ''last-of-type''.

  * Puisqu'ici nous travaillons sur les transitions, vos transformations devront se faire en en douceur, testez 0.5, 2 et 5 secondes pour avoir une idée du rendu de chaque transformation.
</box>

<note important>[[http://www.w3schools.com/css/css3_2dtransforms.asp|Votre lien de référence pour les transformations.]]</note>

==== Aller plus loin ====

Si vous avez besoin d'aide pour les transitions, n'hésitez pas à vous reporter au tutoriel suivant : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html (consultez aussi les pages 2 à 4 de ce tutoriel).

Vous pouvez utiliser les animations sur d'autres éléments que des images, par exemple sur des vidéos. De même, vous pouvez déclencher une animation sur un élément en passant la souris sur un autre.

<box round rgb(185,211,238) 95%|**A Faire** :  >
  * Dans section __suivante__ de la page (et non celle créée précédemment), ajoutez 2 images et une balise vidéo. 
  * Quand vous survolez une des deux images, une transformation (au choix mais différente en fonction de chaque image) sera appliqué à la vidéo. Testez cela lors de la lecture de la vidéo ([[http://www.w3schools.com/cssref/css_selectors.asp|choix des sélecteurs]])
  * Vous pouvez utiliser les URLs suivantes pour la vidéo : 
     * https://upload.wikimedia.org/wikipedia/commons/d/d0/Caminandes-_Llama_Drama_-_Short_Movie.ogv
     * http://www.i3s.unice.fr/~logre/docs/my_vid.mp4
</box>

Vous devriez avoir un résultat dans le style de ceux ci dessous :
{{ :2013_2014:s1:docweb:demo3.png?nolink |}}

===== Positionnement : les infobulles =====
Voyons maintenant comment faire une infobulles du type de celle de l'image ci-dessous :
{{ :2013_2014:s1:docweb:demo4.png?nolink |}}

<box round rgb(185,211,238) 95%|**A Faire** :  >
Ajoutez le code suivant dans votre dernière zone section :
<code>
<p>
  <a href="#">Survole moi!
    <span>Je suis une infobulle...</span>
  </a>
</p>
</code>

Nous allons maintenant modifier notre css pour transformer **le span en infobulle.**
     * centrez le texte contenu dans la balise ''p''
     * donnez une couleur à votre lien
     * modifiez votre ''span'' en 
          * le positionnant de manière absolue ((//un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.//))
          * en lui ajoutant une marge supérieure de -50px et une marge inférieure de -25px, afin de décaller son affichage,
          * en modifiant la couleur de son texte, 
          * en rendant son arrière plan noir (et [[http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html|un petit peu transparent, notation RGBa ]]).
     *  On pourra également ajouter 
          * des bords arrondis, 
          * une boîte un peu plus grande ((padding))
          * une ombre de boite (([[http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html|box-shadow]]))
          * ainsi qu'une légère transformation scale(0) rotate(-12deg) pour un effet d'apparition plus sympa.
     * Il faut également, maintenant que vous avez bien défini le span
          * rendre l'élément ''span'' complètement invisible en le rendant transparent (opacity:0)
          * activer les transitions, par exemple avec une durée de 0.25s 
     * Enfin, il nous faut le faire apparaître quand on survole l'élément ''a''. 
          * rendre visible(opacity:1) notre élément ''span'' quand on survole l'élément ''a''. 
     * Si vous avez utilisé une transformation, pensez également à remettre votre span en état lors de ce survole (scale(1) rotate(0)). Une petite amélioration consiste à faire ces mêmes modifications lors du gain du focus de l'élément ''a''.
</box>

===== Un menu dynamique =====
Il ne nous reste plus qu'à finir notre zone nav, que nous avons laissé de coté jusqu'à maintenant.

Ajoutez le code suivant dans votre zone nav
<code>
<a href="#tableau">
	<div class="icone">T</div>
	ableau
</a>
<a href="#images">
	<div class="icone">I</div>
	mages
</a>
<a href="#colonnes">
	<div class="icone">C</div>
	olonnes
</a>
<a href="#videos">
	<div class="icone">V</div>
	ideos
</a>
<a href="#infobulle">
	<div class="icone">I</div>
	nfobulle
</a>
</code>
<box round rgb(185,211,238) 95%|**A Faire** :  >
Sans modifier le code HTML de la zone nav
      * Faites en sorte que les liens fonctionnent (qu'ils vous déplacent dans la page)
      * Modifiez l'apparence du menu pour qu'il ressemble à l'image ci-dessous
      * Ouvrez le menu lors du survol de la lettre de manière à rendre le lien accessible ((pour masquer, vous pouvez utiliser [[http://www.w3schools.com/cssref/pr_pos_overflow.asp|''overflow:hidden;'']]))
      * Ajoutez une rotation (un tour complet) de la lettre lors du survol
      * Pour dans les infobulles, ne pas aller à la ligne (([[http://www.w3schools.com/cssref/pr_text_white-space.asp|''white-space:nowrap;'' à lire "no wrap" et non "now rap"]]))
      * Gérer les débordements par des points de suspension.  (([[http://www.w3schools.com/cssref/css3_pr_text-overflow.asp|''text-overflow:ellipsis;'']]))
</box>

{{ :2013_2014:s1:docweb:demo5.png?nolink |}}