Bon je ne vais pas revenir sur ce qu’est le scrolling ou un scroller mais rapidement c’est qu’il vous permez de faire défiler du contenu (texte, image, etc…) à l’ecran 🙂
Certe votre navigateur préféré vous offrent de belles barres grises pour pouvoir faire défiler les pages mais dans certains sitse, pour mieux intégrer le design, l’on developpe notre propre systeme de scrolling… C’est ce que je fais nottament avec un site d’un client où je propose de belles petites fleches (qui ne sont ni plus ni moins que des images) pour pouvoir faire defiler le contenu (en fait je deplace juste un div).
J’avais déjà developpé un petit systeme de scrolling pour mon projet SUPINFO DotNet l’an dernier, mais devant souvent reprendre le code pour l’integrer dans mes developpements en cours j’ai décidé de faire un script complet et générique pour pouvoir l’intégrer dans n’importe quel site.
Je vous met donc ici à disposition mon code (vive l’open source 🙂 ). Bon biensur, merci vous faire connaitre si vous l’utilisez dans vos developpements ^_^
Mon script contient (entre autre) :
- RegisterScroller(name,parentSize,initial_position,reload_postback). Le 1er parametre est le nom (id) du DIV a scroller, le parentSize est un objet Point qui definit la taille du parent (partie visible), initial_position est aussi un Point qui définit les coordonnées initiales du DIV et reload_postback est un booléan qui défini si le DIV doit etre remplacé à sa derniere position lors de l’appel de la fonction refixPosition (que nous verrons ci-après)
- refixPosition() : permet de repositionner les scrollers marqués de reload_postback à True. (Utile dans le cas d’une utilisation avec Atlas. cf ce post)
- resetPosition(sender) : où sender est l’id du DIV/Scroller à remettre à sa position d’origine (initial_position)
- startScroll(sender, direction) : sender etant l’ID du DIV/Scroller et direction peut etre UP, DN, GT, LT. La fonction permet donc de demarrer le scrolling (à placer sur le click de la fleche)
- stopScroll(sender) : permet d’arreter le scroll (à placer sur le mouseout de la fleche)
- scroll(sender, direction) : fonction qui vient scroller le sender en fonction de sa direction. (à placer sur le mouseover de la fleche).
Exemple dans mon load de ma page je retrouve :
| RegisterScroller("pellicule_content", new Point(295,65), new Point(13,0), true); |
Qui me permet d’enregistrer le sroller sur le DIV pellicule_content qui sera visible dans un rectangle de 275x65px, qui démarre à 13px du bord gauche et qui est repositionné à sa derniere postion lors de l’appel de la fonction refixPostion()
Puis dans mon code HTML je retrouve quelque chose du type :
| <img id="img_btLeft" src="..." alt="" onclick="scroll('pellicule_content','LT')" onmouseover="startScroll('pellicule_content','LT')" onmouseout="stopScroll('pellicule_content')" /> <img id="img_btRight" src="..." alt="" onclick="scroll('pellicule_content','GT')" onmouseover="startScroll('pellicule_content','GT')" onmouseout="stopScroll('pellicule_content')" /> <div id="pellicule_content"> <!-- mes Images --> </div> |
Bon biensur à vous de vous débrouillez avec le CSS et les ZIndex pour faire quelque chose potable 🙂
Donc vous voila parrez pour faire pleins de scrollers dans vos sites, en haut/bas, gauche/droite. Elles est pas belle la vie ? ^_^
Télécharger mon script Scroll.js
Tous commentaires sont les bienvenues 🙂
