DéFILEMENT DOUX

illus

script : scroller v2.2.0
langage : javascript
catégorie : module
usage : Un effet de défilement doux pour les liens de vos pages pointant vers des ancres.
tags : effets spéciaux - ergonomie

Concept

D'ordinaire, lorsque l'on clique sur un lien vers une ancre (du genre : <a href="#une_ancre">lien</a>), on est envoyé d'un seul coup au niveau de cette ancre.
Scroller est conçu pour remplacer ce téléportage un peu brutal par un défilement doux.

Non content de faire assez classe, cela permet au visiteur de mieux s'y retrouver dans le contenu de la page.
Initialement conçu pour les ancres d'une page web, ce script peut aussi servir à recentrer la page sur n'importe quel élément HTML.

A noter également : l'effet marche dans le sens vertical comme dans le sens horizontal. (Ou encore les deux à la fois.)

Démo

Eh bien ce site même utilise cet effet dans chaque page. Dans le menu latéral de cette page, la première série de liens permet de naviger dans la page. Cette navigation est adoucie par scroller.

Mais vous souhaitez peut-être aussi avoir une démonstration de ce que ça donne à l'horizontale... Voyez alors cette démo.

Intégration

Pour ce qui est de charger le script, on procède tout à fait normalement, en plaçant le code suivant entre les balises <head> et </head> de la page : 

<script src="scroller.min.js" type="text/javascript"></script>

Ensuite, l'usage le plus simple (et le plus courant) sera d'appliquer l'effet à tous les liens éligibles de la page. On placera alors ce script avant la balise </body> : 

<script type="text/javascript">scroller.auto();</script>

Nota Bene : Si vous désirez faire un lien vers le haut de la page, évitez ceci <a href="#"></a>, car pour éviter des conflit avec les autres javascripts de la page, ce genre de liens n'est pas pris en compte. Au lieu de ça, placez plutôt, tout en haut de votre page, une ancre comme celle-ci : <a href="#top"></a>

Plus de code

Dans certains cas, on pourra préférer n'appliquer l'effet qu'à un groupe de liens en particulier. On remplacera alors le code javascript précédent par celui-ci : 

var mes_liens = document.getElementById("truc").getElementsByTagName("a");
scroller.applyTo( mes_liens );

Et pour déclencher un scrolling vers n'importe quel élément de la page, on pourra procéder selon cet exemple : 

document.getElementById( "un_lien" ).onclick = function(){
	var destination = document.getElementById( "destination" );
	scroller.goTo( destination );
	return false;
}
Astuce

Simplifiez-vous la sélection

Vous pourrez vous simplifier la sélection des éléments en faisant appel à la fonction seek, également présentée sur ce site.
Seek vous permettra par exemple de faire un simple seek( "#truc a" ) (sur le modèle des sélecteurs css) au lieu d'un fastidieux document.getElementById( "truc" ).getElementsByTagName( "a" ).

Options

Le script accepte également quelques options. Celles-ci devront être paramétrée dans un tableau associatif, et passée comme argument de la fonction voulue. 

// préparer les options dans un tableau associatif
var options = {
	opt1 : valeur1,
	opt2 : valeur2,
	optN : valeurN
};
 
// les passer dans la fonction voulue :
scroller.auto( options );
 
// ou bien :
scroller.applyTo( mes_liens, options );
 
// ou bien encore :
scroller.goTo( destination, options );

Voici la liste des options disponibles :

options type description par défaut
onStart Function fonction callback exécutée au démarrage d'un scrolling [rien]
onFinish Function fonction callback exécutée à la fin d'un scrolling [rien]
onScroll Function fonction callback exécutée à chaque étape de l'animation d'un scrolling
Le premier paramètre fourni dans cette fonction reçoit le pourcentage d'avancement du scroll.
Exemple :
function( percent ){
  document.getElementById( "compteur" ).innerHTML = percent * 100 + "%";
} 		[rien]
duration Integer|Function

Durée de l'animation, exprimée en millisecondes.

Si duration est une fonction, la valeur retournée par la fonction sera prise en compte.
Dans cette fonction, le premier paramètre reçoit pour valeur la distance à parcourir dans la hauteur (exprimée en pixels). Le second paramètre correspond à la largeur.

Par défaut, duration a une valeur relative à la distance à parcourir. Plus le scroll est grand, plus l'animation dure longtemps. Cependant, les scroll très longs gardent une durée mesurée.

[special]
ease Float

permet de donner un effet d'accélération ou de décélération à l'animation.

1 pour un animation linéaire
>1 pour une accélération progressive (ease-in)
<1 pour un ralentissement progressif (ease-out)

 0.17

Téléchargement

Vous trouverez dans ce zip le script en version minifiée (3Ko) et en version commentée, ainsi qu'une page de démonstration.

compatibilité :
Internet Explorer (5.5+) Firefox Safari Opera Google Chrome
(autres navigateurs non testés)

Notez que ce module embarque plusieurs fragments de code présentés sur ce site : getPos, qui permet de mesurer la position d'un élément html, winDim, qui retourne les dimensions de la fenêtre, pageDim, qui donne celles de la page, scrolled (avec un "d"), qui relève le niveau de défilement de la page, easeInOut, qui permet de générer les effets d'accélération et de décélérantion, et enfin transfer, toujours pratique pour le traitement des options.

Commentaires

  • Publier un nouveau commentaire
  • gravatar
    r@in | b0w  le 07 juillet 2010, à 20h54
    Bonjour.
    C'est r@in | b0w de PC-Infopratique. Merci pour le lien posté sur mon sujet & merci pour ce petit tutorial.
    Cela t'a fait un peu de publicité.
    J'ai longtemps bataillé pour aligner des divs côte à côte mais j'ai finalement trouvé, notamment grâce à ta source.
    Je regrette une seule chose, qu'on ne puisse pas adapter la vitesse (paramètre duration sur scriptaculous) pour rendre le scroll plus réfléchi.
    Si tu veux voir le rendu, rdv sur http://www.tipi.tk/ ;)
  • gravatar
    Abrab  le 07 juillet 2010, à 21h24
    Salut r@in | b0w.

    En effet, scroller ne propose pas de réglage de vitesse. Je pensais que ça n'intéresserait personne...
    J'intégrerai l'option dans une prochaine version du script.

    Toi aussi tu as un peu de pub sur mon site à présent. Tout le monde est content. ;)
  • gravatar
    r@in | b0w  le 08 juillet 2010, à 11h50
    Affirmatif, tout le monde il est content ;)
    Et sinon oui, moi, je serai intéressé (le chieur) par une vitesse à définir comme sur le scroll de scriptaculous.
    J'attendrai la prochaine fois, j'ai le temps.
    Peut-être que, d'ici là, c'est moi qui t'aiderait à l'améliorer ;)
  • gravatar
    Abrab  le 13 décembre 2010, à 20h53
    Mise à jour :
    scroller passe en version 2.2

    Au rayon des nouveautés : un scrolling plus fluide, des fonctions callback, et (special dedicace to r@in|b0w) la possibilité de paramétrer la durée de l'animation, de façon fixe ou dynamique.
  • gravatar
    r@in | b0w  le 14 décembre 2010, à 8h08
    Yeah!
    Thanks Abrab!
    Justement, dans le cadre de ma licence professionnelle informatique, je vais devoir améliorer un peu mon site statique!
    Je vais tester ta v2.2 dès que je peux ;)
    Merci pour la pensée!
  • gravatar
    moiabxl  le 27 janvier 2011, à 16h03
    Salut,

    J'ai un problème pour faire fonctionner Scroller sur Safari, j'ai tout essayé (vérification si il n'y avait pas un conflit avec Mootools ...) les liens sont correct. Le script fonctionne dans FireFox et IE mais pas Safari, ce qui est étonnant c'est que ton exemple lui il fonctionne dans Safari. Un indice ? Veux tu que je publie la page ?

    Merci pour ta réponses.
  • gravatar
    moiabxl  le 27 janvier 2011, à 17h41
    Salut,
    Je viens de faire un test en utilisant "scroller" dans une div en overflow:hidden; , il semblerait que le scroll ne fonctionne plus. As tu déjà eu ce problème, si oui as tu une solution ?
    Merci.
  • gravatar
    Abrab  le 27 janvier 2011, à 20h07
    Salut "Moiabxl",

    Je viens de faire l'essai : je ne constate pas de problème avec les éléments en overflow:hidden.
    En outre, comme tu le soulignes toi-même, scroller fonctionne bien sur cette page. Il y a donc fort à parier qu'un erreur s'est glissée quelque part dans ton code. Essaye peut-être de le passer à la moulinette des site de validation.

    Mais puisque tu te sers déjà de Mootools, pourquoi ne pas utiliser un smoothscroll qui tire profit de cette librairie ? (deux mots dans Google, et c'est trouvé !)
  • gravatar
    moiabxl  le 28 janvier 2011, à 11h40
    Abrab, je ne sais comment te remercier !!!! J'ai passais ma page sur le grille dans un site de validation (je n'en avais pas l'habitude), j'ai trouvé 140 erreurs ! Rien de bien grave mais surtout une utilisation multiple d'une <div id="">, je pense que le bug venait de là. Maintenant tout fonctionne sur Firefox , IE, Chrome et Safari. Et en plus j'ai plus d'erreur sur ma page.

    Merci encore pour "scroller".
  • gravatar
    moiabxl  le 24 février 2011, à 13h24
    Salut Arab,

    J'ai toujours mon problème d'overflow. Impossible de faire avancer "scroller" dans une Div en overflow:hidden

    J'ai mis en ligne deux pages, l'une qui fonctionne très bien (sans overflow) :

    http://www.acielouvert.net/scroller/scroller2.html

    #resize {
    width: 1600px;
    position: relative;
    left: 50%;
    margin-left: -800px;
    }

    et ici la même page avec le overflow:hidden, alors "scroller" ne fonctionne plus :

    http://www.acielouvert.net/scroller/scroller1.html

    Voici l'ID qui est centrer dans la page (avec le overflow qui bloc le scroller)

    #resize {
    width: 1600px;
    position: relative;
    left: 50%;
    margin-left: -800px;
    overflow: hidden;
    }


    J'ai testé sous FF, IE même résultat. Je t'ai envoyé des mails sur "webmaster" sans réponse.

    Je suis en plein développement du site et bloc sur ce problème, ton aide me serait précieuse.

    Merci d'avance.
    G
  • gravatar
    Momo  le 13 mai 2011, à 14h25
    Bonjour, j'ai lu attentivement vos indications, cependant je rencontre un problème quand je télécharge le fichier zip. Il semblerai que ce fichier soit abîmé...
  • gravatar
    r@in | b0w  le 16 mai 2011, à 19h40
    @ Momo: l'archive n'est pas corrompue. Je l'ai téléchargée à l'instant sans problèmes.
    Recommence l'opération.
  • gravatar
    Dimi  le 20 mai 2011, à 19h05
    Salut j'ai lu votre article et il est fascinant mais j'ai un probleme quand j'ai appliquer votre scroll la majorité de mon texte a été remplacé par des ? dans des losange je ne sais pas comment le regler et en passant si vous pouviez me donner une astuce pour faire la même chose en menu fixe(position : fixe) sans qu'il gene le reste merci d'avance pour votre aide ...
  • gravatar
    Dimi  le 20 mai 2011, à 19h06
    j'ai une autre question comment peut on appliquer ce scroll en cachant les parties tant qu'on a pas cliqué dessus? :)
  • gravatar
    Matthieu  le 21 juin 2011, à 22h29
    Super script.
    En revanche il ne fonctionne que sur Chrome pour ma part. Il n'y a pas de défilement sur Safari ni sur Firefox.
    Quelqu'un a une idée ?
  • gravatar
    jikoo  le 23 juin 2011, à 23h54
    @Matthieu, ce script fonctionne avec tous les navigateurs récents. Je l'ai testé sur Windows XP, et 7 ; sous Firefox, Chrome, Safari, Opera et IE8. Aucun souci.
  • gravatar
    SARAH  le 01 juillet 2011, à 18h42
    Bonjour,

    l'archive doit être corrompue car en téléchargeant, j'obtiens un .download. Est-il possible de le recharger?
    merci.
  • gravatar
    math  le 20 août 2011, à 0h58
    Bonjour,
    merci pour tout le travail mais j'ai beau mettre le lien .js dans le <head></head> puis inclure l'auto scroll avant le </body>, il n'y a aucun effet de scroll :(
  • gravatar
    Fab  le 09 octobre 2011, à 19h46
    Bonjour,

    Merci pour ce petit script plutôt intéressant, Cependant il y a un peu de lag sur chrome et surtout sur safari ... lag présent apparemment aussi sur firefox version Mac. Quelqu'un a eu des problèmes aussi ?
  • gravatar
    Reflectim  le 09 mars 2012, à 12h01
    Merci pour ce script. justement le script que je recherchais.
  • Navré, le formulaire de commentaires est temporairement indisponible.