Faire défiler des onglets en JavaScript comme le site de Coda

Ceux qui se sont déjà rendus sur le site de Coda, un éditeur de code pour Mac, http://www.panic.com/coda/, ont peut-être déjà remarqué, l'effet visuel en Javascript du bloc central qui défile à chaque clic sur un onglet différent ou à chaque clic sur une dès flèches à gauche et à droite. Bastien, d'exotech.biz, m'a déniché cette petite ressource avec tutorial et démo permettant de refaire exactement la même chose… Bientôt sur un site du réseau aysoon.com ? peut-être bien…

Description du site : http://www.ndoherty.com/blog/2007/11/28/a-quick-update-to-coda-slider-uniqu e … http://www.ndoherty.com/demos/coda-slider/1.1.1/coda-slider.1.1.1.zip. You can …

Voir le site

Découvrez aussi les sous-titres à télécharger

Trouver le sous-titre français pour Vikings. Le meilleur moteur de recherche de sous-titres disponibles en français et en anglais.
7 Commentaires (ajouter le vôtre)
  1. Bonjour,

    Merci pour le lien.

    Dans la même lignée, on peut aussi signaler le Thème WP-CODA pour WordPress. Il s’agit d’un thème recréant ce fameux effet.

    Pour voir ce dont il retourne, visitez donc ce lien:
    http://wordpress.bustatheme.com/coda/

    J’ai depuis quelques temps l’idée de le traduire pour la communauté Francophone. Si cela intéresse certains d’entre vous, merci de me le faire savoir.

    Nicolas.

  2. Frédéric Cozic, auteur de cet article

    Enorme !! c’est encore mieux que ce que j’espérais… merci beaucoup pour ce lien, il va m’être des plus utiles !!

  3. A l’époque héroïque de document.getElementById , 13thparallel.com avait fait un design élégant à l’italienne (2002) : http://13thparallel.com/archive/interface/

    Je l’avais repris dans certains de mes blogs (il reste http://www.lactuier.info/ ), mais hélas le code de l’époque s’est avéré incompatible avec safari ensuite ; il faudrait tout refaire sur une base jquery.

    Ce qui était super dans leur code, c’est qu’il prenait n’importe quelle page html longue pour la découper correctement en colonnes bien équilibrées, et si on insérait la balise [colbreak] on pouvait forcer un saut de colonne.

  4. J’ai réalisé exactement ce truc récemment, pour un site de création de faire-part.

    http://www.carnetdefrance.fr/fairepart/creer/

    En Mootools + quelques controles PHP.

    Je peux détailler la procédure pour ceux qui veulent au besoin.

  5. Mince. La page linkée n’est pas la bonne. Sélectionnez « naissance » ou « divers » sur la page pour accéder au formulaire avec l’effet « à la panic.com »

  6. Frédéric Cozic, auteur de cet article

    @Simon André : ah oui ok dans le formulaire de création de faire-part. Utilisation très sympa dans un formulaire comme ça ! maque peut-être un bouton de validation en bas de chaque étape pour en pas perdre les internautes qui ont l’habitude de valider chaque étape et qui ne penseront peut -être pas pas à cliquer sur la flèche de droite… mais très bonne adaptation en tout cas !

  7. Merci ;)

    Nous rajouterons effectivement ce bouton « suivant » d’ici la prochaine version (dans un mois et demi je pense).

© 2006-2017 Frédéric Cozic  
Propulsé par Wordpress sous licence Creative Commons