Outils pour utilisateurs

Outils du site


cours2007:poo1:td:effets_html_css_javascript

Effets HTML/CSS/JavaScript

Démarche

  • Construire HTML et CSS.
    • On sait le faire !
  • Écrire le code JavaScript.
    • On peut aussi le faire par programmation !
  • Gérer les événements.
    • On le fait quand désirer .
  • Généraliser le code
    • (Pour plus tard : Composants)

Exemple d'application : Deux fonds sont superposés et un effet de fondu entre eux est déclenché au survol.

Construire HTML et CSS

Ce qui rend l'effet impressionnant, c'est l'affichage. Or cela est exclusivement déterminé par HTML/CSS.

Remarque : Ultérieurement d'autres technologies seront disponibles sur tous les navigateurs : SVG, canvas, …

Technique de base

Rappel : Techniques CSS de bases

L'essentiel est de bien comprendre le modèle de “boîtes” CSS.

Ainsi que les modes de positionnement (quirksmode):

  • static : normal
  • absolute : fixe par rapport au parent qui n'est pas en position static
  • fixed : fixe par rapport au bord de l'écran
  • relative : comme normal, mais
Application exemple

Le but est de superposer deux éléments (les deux fonds).

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>test0</title>
 
	<style type="text/css" media="screen">
	 #zone {
      background: #FFF url('../images/fond1.png') repeat scroll;
   }
 
   .superposition {
      background: #FFF url('../images/fond2.png') repeat scroll;
      width:80px;
      height:80px;
      opacity: 0.5;
      -moz-opacity: 0.5;
      filter:alpha(opacity=50);
   }
 
	</style>
 
</head>
 
<body>
  <h1>Avant</h1>
  <div id="zone">
    <div class="superposition"></div>
    <h3>Le contenu</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <h1>Après</h1>
 
 
</body>
</html>

Un élément en position absolue sort du flux normal est se positionne sur les autres :

.superposition {
   position:absolute;
   top:0;
   left:0;
   ...
}

Ici il est positionné par rapport à la page.

Pour qu'il se positionne par rapport au parent, on place le parent en relatif :

#zone {
   background: #FFF url('../images/fond1.png') repeat scroll;
   position:relative;
}
 
.superposition {
   position:absolute;
   top:0;
   left:0;
   ...
}

Comme on veut qu'il occupe exactement la place du parent, on fixe sa talle à 100% (hauteur et largeur)

.superposition {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   ...
}

Rq : IE < 7 ne gère pas correctement height:100%, prévoir un cas spécial. On ne veut pas que le contenu soit recouvert par le second fond : On le place dans une division en position relative.

<div id="zone">
  <div class="superposition"></div>
  <div class="contenu">    
    <h3>Le contenu</h3>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>
#zone {
   position:relative;
   ...
}
 
.superposition {
   position:absolute;
   ...
}
.contenu {
    position:relative;
}

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>test0</title>
 
	<style type="text/css" media="screen">
	 #zone {
      background: #FFF url('../images/fond1.png') repeat scroll;
      position:relative;
   }
 
   .superposition {
      position:absolute;
      top:0;
      left:0;
      background: #FFF url('../images/fond2.png') repeat scroll;
      width:100%;
      height:100%;
      opacity: 0.5;
      -moz-opacity: 0.5;
      filter:alpha(opacity=50);
   }
 
   .contenu {
      position:relative;
   }
 
	</style>
 
</head>
 
<body>
  <h1>Avant</h1>
  <div id="zone">
    <div class="superposition"></div>
    <div class="contenu">    
      <h3>Le contenu</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <h1>Après</h1>
 
 
</body>
</html>

Tester les variations

Le but est d'animer l'effet mis en place. Vérifier déjà que cela fonctionne en changeant les valeurs dans le code et/ou avec FireBug.

Après JavaScript, va simplement faire les mêmes changements par programmation. Il est donc important de bien déterminer ce qui doit changer et comment le changer.

Application exemples

On peut simplement tester différentes valeurs d'opacité avec FireBug :

Dégradation

Il est important de comprendre que ce qui est réalisé c'est un document HTML :

  • à qui on ajoute la mise en forme (CSS)
  • à qui on ajoute l'interactivité (JavaScript)
Aspect sans CSS

Comme pour tout document HTML/CSS réalisez le code HTML indépendamment de sa mise en forme.

  • Utiliser les éléments de structuration : A,STRONG,P,UL,LI,H1,H2,… .
  • Utiliser des éléments anonymes si nécessaire : SPAN,DIV .
  • Nommer vos éléments : id,class . Pour les CSS et JavaScript.
  • Ne pas ajouter d'élément pour les effets en JavaScript.
    • Il est possible de les créer par programmation dans le code JavaScript.
  • Vous pouvez utiliser les CSS pour une version limitée des effets (ex: :hover)
Aspect sans JavaScript

Les Styles ne doivent pas empêcher d'accéder au contenu !.

Ne placer dans les styles que la mise en forme sans JavaScript

Quand JavaScript s'exécute : vous pouvez ajouter des styles (Element.setStyles,Element.addClass)

Remarque : Idéalement on devrait aussi tenir compte du cas HTML + JavaScript (sans CSS), mais dans les faits c'est très improbable.

IE6

Prendre en compte la compatibilité avec tous les navigateurs; mène souvent à un code bien plus compliqué.

Le problème de hauteur peut-être réglé de plusieurs façons :

  • désactiver l'effet pour IE < 7 : if (!window.ie6) { /*alors c'est bon*/ }
    • voir détecter le navigateur (v1.11)
  • éviter le problème : si la hauteur est connue, la fixer pour toutes les divisions :
    • #zone, #zone .superposition, #zone .contenu {height:8em;}
  • utiliser JavaScript pour fixer la hauteur :

Pour la suite on ne tiendra pas compte du problème de IE < 7.

Le cas le plus courant est que la hauteur soit déterminé (ex: menu en images).

Code JavaScript

L'essentiel du code peut-être tester dans la console de FireBug.

Ces points seront développés dans le cours Parcourir et Changer le DOM.

Qui modifier

Le but est d'obtenir une référence a des éléments.

Sélection par id

Le plus courant est de donner un attribut id à un élément :

<div id="zone">
  ...
</div>

Et d'utiliser le sélecteur se basant sur l'id :

var zone = $('zone');

C'est le seul moyen de retrouver un élément précis.

Sélecteur CSS

Un moyen pratique pour retrouver des éléments est d'utiliser un sélecteur CSS :

Attention cette fonction retourne un tableau !

$$('.superposition')
// [div.superposition]
$$('.superposition')[0]
// <div class="superposition">

Il existe une variante retournant que le premier élément :

$E('.superposition')
// <div class="superposition">
Sélection par parenté

Ce point sera tout particulièrement développé dans le cours :

On trouve des fonctions utiles dans

  • la documentation de Element de MooTools.
    • getPrevious(),getNext(),getFirst(),getLast(),getParent(),getChildren()
  • l'api du DOM : DOM:element (Mozilla)
    • childNodes,firstChild,lastChild,nextSibling,parentNode
Application exemple

On veut retrouver l'élément a qui appliqué l'effet, on utilise son attribut id :

<div id="zone">
  ...
</div>
var zone = $('zone');
// <div id="zone">

A l'intérieur de cet élément on veut retrouver l'élément de class superposition.

<div id="zone">
  <div class="superposition"></div>
  ...
</div>

MooTools ajoute aux éléments une méthode bien pratique : Element.getElement

var zone = $('zone');
var superposition = zone.getElement('.superposition');
// <div class="superposition">

Quoi / Comment changer

L'essentiel des possibilités se trouve dans la documentation des éléments :

Les Styles
Les Classes CSS
Les attributs

Exemple : changer l'image affichée par un élément IMG

Le contenu
  • Les fonctions de MooTools
  • Ou l'équivalent du DOM

Remarque :

Sinon il existe la possibilité de crée et d'assembler des éléments. Cela sera développer dans le cours : Parcourir et Changer le DOM.

Propriétés spéciales

Tout ce qui reste dans la documentation des éléments :

Remarque : Privilégier l'usage de getAttribute et setAttribute, beaucoup de propriétés date de avant le DOM :)

Application exemple

On veut modifier l'opacité, MooTools offre une fonction qui tient compte des différences entre navigateurs : setOpacity

<div id="zone">
  <div class="superposition"></div>
  ...
</div>
var zone = $('zone');
var superposition = zone.getElement('.superposition');
superposition.setOpacity(0.5)
// <div class="superposition" style="visibility: visible; opacity: 0.5;">

Création d'effets

Beaucoup de librairies JavaScript proposent des effets d'animation :

Philosophie de MooTools

MooTools dissocie :

  • La création de l'effet :
    • var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
  • De son exécution :
    • marginChange.start(10, 100);

Cela permet de “réemployer ” la même instance d'un effet plusieurs fois.

Principaux effets
  • Animer une propriété de style : Fx.Style
  • Animer plusieurs propriétés CSS : Fx.Styles
  • Chacher/montrer un élément : Fx.Slide
Plugins

Certain effets sont plus complexes (combinaison d'effets de base).
Ils sont généralement distribués séparément. Car il ne sont pas d'usage courant.
On peut les incorporer à la librairie de base. (Téléchargement de MooTools)

Application exemple

Ici on se contente de faire varier l'opacité. On utilise simplement Fx.Style.

Code à tester dans FireBug.

  var zone = $('zone');
  var superposition = zone.getElement('.superposition');
  var effet = new Fx.Style(superposition,'opacity',{duration:2000,wait:false});
  effet.start(1);
  effet.start(0);

Gérer les événements

Les événements seront détailler dans le cours : Gestions des événements

domready

Rappel : Tout code qui interagit avec la page doit être exécuté entre les lignes suivantes.

window.addEvent('domready', function(){
  //On peut intéragir avec la page
});

C'est également le moment d'obtenir des références sur les éléments avec lesquels on désire interagir :

window.addEvent('domready', function(){
  // On peut interagir avec la page
  // obtenir une référence sur un/des éléments (s)
  var ma_variable_pour_un_element = selecteur('parametres');
});

De la même façon, toujours créé au plus tôt les autres éléments dont on aura besoin (ex:effets):

window.addEvent('domready', function(){
  // on peut interagir avec la page
  // obtenir une référence sur un/des éléments (s)
  var ma_variable_pour_un_element = selecteur('parametres');
  // créé les autres Objets
  var mon_instance = new UneClass(ma_variable_pour_un_element,'autres_parametres');
});
Application exemple

Pour l'exemple on a besoin référence vers :

  • la division d'id zone
  • la division de classe superposition quelle contient.
window.addEvent('domready', function(){
  // on peut interagir avec la page
  // obtenir une référence sur la division d'id ''zone''
  var zone = $('zone');
  // obtenir une référence sur la division division de classe ''superposition''
  // contenue dans "zone"
  var superposition = zone.getElement('.superposition');
  ...
});

On créé un effet Fx.Style pour animer l'opacité sur l'élément “superposition”.

window.addEvent('domready', function(){
  var zone = $('zone');
  var superposition = zone.getElement('.superposition');
  // Effet appliqué à "superposition"
  var effet = new Fx.Style(superposition,'opacity',{duration:2000,wait:false});
  ...
});

Qui/quand

La gestion des événements prend la forme suivante :

quel_element.addEvent('type_evenement',fonction_quoi_faire);

Liste des événements

Une liste avec des indications de compatibilité : quirksmode

Documentation de Mozilla pour :

Ce point sera développé dans le cours : Gestions des événements

Application exemple

Dans notre cas on va utiliser deux gestionnaires d'événement ajoutés par la librairie Mootools :

Leurs avantages par rapport à mouseover et mouseout sont d'éviter de possible répétition du déclenchement de l'événement.

Ils sont appliqués à l'élément d'id zone

window.addEvent('domready', function(){
  var zone = $('zone');
  var superposition = zone.getElement('.superposition');
  var fx = new Fx.Style(superposition,'opacity',{duration:2000,wait:false});
  fx.set(0);
  zone.addEvent('mouseenter',function() {
    fx.start(1);
  });
  zone.addEvent('mouseleave',function() {
    fx.start(0);
  });
});

Généraliser le code

L'idée générale est comment faire pour réemployer le même code pour plusieurs éléments d'une même page, voire de pages différentes.

Composant

Sont créé comme les effets :

var mon_instance = new Composant(selecteur_a_qui_applique,{option:valeur});

Exemples de composant

Voir documentation de MooTools.

Application exemple

Dans notre cas le but serait de pouvoir écrire :

var mon_effet = new FadeBackground('zone');

Ce point sera éventuellement développé dans le cours : Collections et composants

Application

Voir sujet de TP : Slider

cours2007/poo1/td/effets_html_css_javascript.txt · Dernière modification: 2008/08/30 22:00 (modification externe)