Effet de glissement paginé

Présenter un site web comme une série de panneaux glissant de droite à gauche, c’est un procédé que j’ai tout de suite trouvé très agréable et innovant. Cet effet est visuellement comparable au défilement de photos du bout du doigt sur un iPod touch. Cet effet semble être apparu sur le site de Coda un logiciel de développement pour Mac OS X. Cet effet, Niall Doherty l’a appelé Coda Slider et en a même développé un très bon plugin pour jQuery. Les web développeurs n’ont donc plus d’excuses pour ne pas l’implémenter. Voici la page de démo du Coda Slider.

Je viens de visiter récemment le site de Rothschild and Bickers qui présentent leur galerie de produits avec l’effet coda slider. Je suis persuadé qu’en cherchant un peu, on en trouve d’autres et je ne manquerai pas de compléter ce billet si j’en rencontre.

12 réponses “Effet de glissement paginé”

  1. Bastien :

    27 nov 07 at 01:08

    Ca me plait bien, cet effet! Je savais pas encore ce que j’allais faire pour exolounge.com, je crois que je vais bosser dessus (si je trouve un jour le temps)

  2. B2 :

    27 nov 07 at 01:46

    J’aime bien cet effet !
    Il y a un site qui me semble pour moi la référence pour ce genre d’effets : http://satama.nl/
    Et ça slide de partout : gauche/droite, bas/haut :D

  3. Frédéric :

    27 nov 07 at 06:11

    @Ahmed : merci pour le lien. Satama est vraiment très surprenant et très joli aussi ! :)

  4. Louis :

    09 déc 07 at 06:28

    L’effet n’est pas nouveau, et ce n’est certainement pas Coda qui l’a proposé sur son site pour la 1ere fois.

    Les transitions javascript existent depuis belle-lurette, et on a vu beaucoup plus impressionant qu’un simple slide gauche/droite.

    http://194.95.111.244/~countzero/scripts/_myImageFlow/
    http://www.outcut.de/MooFlow/Moo3DCircle.html
    http://www.dhteumeuleu.com/runscript.php?scr=photo3D.html
    http://www.dhteumeuleu.com/runscript.php?scr=menu-3D.html
    http://www.electricprism.com/aeron/slideshow/

    etc etc

  5. Frédéric :

    09 déc 07 at 06:53

    @Louis : Tu as raison, il existent des effets de transition depuis fort longtemps, mais certains sont difficilement utilisable par le grand public, comme par exemple des photos qui flottent dans un univers 3D. Par contre je trouve ImageFlow très intéressant, beaucoup plus accessible et fait penser au Dock de Mac ou au Cover Flow de iTunes.

  6. Louis :

    09 déc 07 at 07:08

    Je ne sais pas ce que tu appelles « grand public ». Il me semble que le développement web est une affaire de connaisseurs, non ?

    De toute façon avec l’apparition des frameworks javascript, enrichir la présentation de son contenu est accessible au plus grand nombre. La preuve sur mon blog : je ne connais pas le javascript, cependant, il y a des effets de transitions un peu partout (animation au chargement, menu qui ondule, photos avec réflections, lightbox, impression des articles avec listes des liens en bas, etc).

  7. Frédéric :

    09 déc 07 at 07:26

    @Louis : quand je parle de grand public, je désigne les internautes au sens le plus large, ceux qui sont utilisateurs et pas développeurs. Un effet transitionnel doit rester très basique et accessible par tous. C’est surtout vrai pour les boutiques en ligne des commerçants.

  8. Louis :

    09 déc 07 at 08:34

    Je ne comprend pas. Peux-tu me donner un exemple d’effet de transition qui ne soit pas accessible pour l’utilisateur lambda ?

  9. Frédéric :

    09 déc 07 at 08:47

    @Louis : Béh notamment les effets 3D d’objets flottants que tu m’as donné en lien et plus particulièrement le menu 3D qui peu accessible en lisibilité.

  10. Louis :

    09 déc 07 at 10:00

    Certes, mais ceux là sont des showcases javascript, pas des scripts orienté environnement de production.

    Les effets de transitions à la Jquery/Mootools/Prototype sont disponibles depuis un sacré bout de temps, et sont tout à fait accessible. La preuve étant leur usage sur des sites comme celui d’Apple, d’Amazon, etc.

  11. Le blog de Rémian Dovène » Listes paginées avec glissement :

    27 mar 08 at 06:05

    [...] vous avais parlé dernièrement de l’effet de glissement paginé qui permettait de faire défiler différents contenus sous la forme de pages successives agrémentées [...]

  12. Dovène » Blog Archive » Listes paginées avec glissement :

    07 août 09 at 09:37

    [...] vous avais parlé dernièrement de l’effet de glissement paginé qui permettait de faire défiler différents contenus sous la forme de pages affichées [...]