Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:slider_-_animation_css

Slider - Animation CSS

Le code HTML est semblable à celui vu précédemment (utilisation de liens/ancres pour les actions).

Le code JavaScript fixe des Classes CSS aux éléments suivant leurs positions relative à l'élément sélectionné.

Le code CSS place les éléments au moyen de transformation CSS :

Saisir le code et le tester.

Ce n'est pas exactement le même effet car tous les éléments sont au même position avant et après l'élément courant. On ne vois pas les éléments intermédiaire lorsque on les “sautent”.

Boutons précédant / suivant

Ajouter au code HTML des boutons :

  <nav>
    <p id="avant">Avant</p>
    <ul id="navigation">
      <li><a href="#slide1" accesskey="1">1</a></li>
      ...
    </ul>
    <p id="apres">Après</p>
  </nav>

Pour les gérer par JavaScript :

  $('#avant').click(function (){
    var courant = $('#slider').find('.courant');
    if (!courant.is(':first-child')) {
      var slide = courant.prev();
      // ici la suite ...
    }
  });

Refaire l'effet précédent

Pour retrouver la même animation, on va donner à chaque éléments une Classe CSS distincte.

Ce n'est pas le plus simple. Mais cela prépare le travail pour utiliser les transformations 3D.

Un "coverflow"

Juste changer les CSS :

(bien sur il n'y a plus de : ”overflow:hidden;”)

Cela donne cela.

cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/slider_-_animation_css.txt · Dernière modification: 2013/05/13 11:52 (modification externe)