Content

hyrule

 

Oubliez les barres de scroll !
Scrollez n’importe quel contenu juste à la souris ou au doigt, sans aucun clic !

Une solution responsive !

Fonctionne très bien avec une grande image, et encore mieux avec n’importe quel contenu HTML de grande taille !

jquery-scrollmap-1.0.js [ 11 Ko – Lisible, non-compressé ]

jquery-scrollmap-1.0.min.js [ 4.5 Ko – Minifié ]

 

Un plugin, 4 modes de navigation…

Mode #1 : Scroll circulaire (par défaut)

hyrule

 

▼ Plus d'infos

Le meilleur mode !
Une légère variation du précédent, mais avec un feeling plus naturel.

Ici la zone « froide » est circulaire, et la vitesse de déplacement dépend de la distance entre le centre et la souris… testez, ce sera plus clair.
En tout cas, ça semble plus fluide, quelle que soit la direction du déplacement !

$('#viewport').scrollMap({
   mode: 'circular', // optionnel, par défaut
   speed: 12 // vitesse max, dans les coins
});

Mode #2 : Scroll « progressif »

hyrule

 

▼ Plus d'infos

Plus intuitif : la souris pilote le déplacement de la map, et non-plus sa position…

Plus ergonomique : une zone « froide » au centre, histoire de ne pas se téléporter d’un bout à l’autre en bouton la souris de 5 mm…
L’utilisateur aura ainsi la possibilité de s’arrêter pour regarder le contenu (pour lire un texte, par exemple) sans avoir envie de vomir.

$('#viewport').scrollMap({
   mode: 'progressive',
   speed: 12 // vitesse max près des côtés
});

Mode #3 : Scroll « direct »

 

▼ Plus d'infos

Utilisez juste ce code Javascript pour tranformer l’exemple ci-dessous en l’exemple ci-dessous :

$('#viewport').scrollMap({mode: 'direct'});

Un mode assez classique, un peu brutal, et puis il y a déjà plein d’autres plugins pour faire ça… mais jQuery scrollMap le fait très bien aussi !

Mode #4 : Draggable

 

▼ Plus d'infos

A la Google Map, en somme. Vraiment pas mon mode préféré, mais ça peut servir à certains.

Par ailleurs, c’est ainsi que fonctionnent tous les autres modes quand on passe par une interface tactile…
Et oui, en mode tactile, c’est super nul de devoir « toucher » prêt du bord pour déplacer la map…
C’est alors beaucoup plus instinctif de la trainer au doigt tout simplement.

Un autre inconvénient de ce mode, c’est qu’il empêche de pouvoir cliquer DANS la map…
Pas gênant pour une image (comme ici), mais bloquant pour des contenus HTML interactifs.

$('#viewport').scrollMap({
   mode: 'drag',
   cursor: 'move' 
   // le curseur proposé par défaut pour ce mode
});

Bonus : Scroll ciblé

Cliquez pour centrer un élément choisi dans le viewport :
Temple / Coffre / Statue / Affreux truc dans l’eau / Centre de la map

hyrule

 

▼ Plus d'infos

jQuery scrollMap est livré avec un mini plugin bonus : jQuery scrollMapTo

L’idée est de pouvoir cibler un élément précis de la map (via un lien par exemple), quel que soit le mode de scroll choisi.
Contrairement au bien connu scrollTo, ici il s’agit de centrer la cible au milieu du viewport…et ça marche très bien.

$('#viewport').scrollMap(); // mode #1

jQuery scrollMapTo peut s’utiliser de 3 façons :

$('#viewport').scrollMapTo([550, 332]); 
// coordonnée en pixel, à centrer dans le viewport
$('#viewport').scrollMapTo(['10%', '35%']); 
// coordonnée en pourcent, à centrer
$('#viewport').scrollMapTo( $('#truc') ); 
// pour centrer une balise en particulier !

En option, il est possible de paramétrer la durée du déplacement (800 ms par défaut), ajouter un easing, et même une fonction à déclencher à la fin…

$('#viewport').scrollMapTo( 
    cible, 1200, 'easeOutBack', function(){
        // un truc à déclencher à la fin
    }
);

Have fun !

 

Installation

▼ Plus d'infos

Pour commencer, il faudra bien-sûr jQuery.
jQuery scrollMap n’utilise rien d’extravagant, mais une version récente c’est toujours mieux.

Placez ce code dans le header de votre page HTML (entre <head> et </head>) :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-scrollmap-1.0.js"></script>

Etant entendu que vous avez bien au préalable placé jquery.js et jquery-scrollmap-1.0.js dans le dossier js/ de votre projet…

 

Downloads

jquery-scrollmap-1.0.js [ 11 Ko – Lisible, non-compressé ]

jquery-scrollmap-1.0.min.js [ 4.5 Ko – Minifié ]

 

Structure HTML/CSS requise

▼ Plus d'infos

La base est toute simple : le plugin fait tout le reste !

HTML :

<div id="viewport">
   <img src="img/super-mario-world-nes-map.gif" width="844" height="685" />
</div>

CSS :

#viewport { width:400px; height:300px; overflow:auto; }

N’oubliez pas que le viewport (la fenêtre de visualisation) et le contenu scrollable (la carte) doivent avoir une dimension prédéfinie.
Ca peut être en HTML (pour une grande image) ou en CSS (pour une div scrollable par exemple).

Sinon, il faudra utiliser un preloader pour attendre que les contenus images/textes soient chargés, et leur dimension « naturelle » avec…

C’est tout !
En somme, une div scrollable toute simple :

 

Les options pour une utilisation sur-mesure…

Centrage de la carte

Un bloc scrollable ordinaire va toujours démarrer en haut à gauche, ce qui n’est pas idéal pour une utilisation en mode carte.
Par défaut, jQuery scrollMap démarre avec la carte centrée (horizontalement et verticalement).

Pour plus de souplesse, vous pouvez spécifier un autre réglage de départ, quel que soit le mode utilisé.
Vous pouvez utiliser des coordonnées en pixels, ou en pourcentage (idéal pour une utilisation responsive) :

$('#viewport').scrollMap({ 
   startAt: ['50%', '50%'] 
   // centré, comme par défaut
});
super-mario-world-nes-map

 

$('#viewport').scrollMap({ 
   startAt: [50, 50] 
   // 50px à gauche, 50px en haut
});
super-mario-world-nes-map

Format de la zone « froide »

Ce réglage concerne seulement les mode #2 (progressif) et #3 (circulaire, par défaut).

Il s’agit de régler la taille de la zone inactive, qui est centrée dans le viewport.
Par défaut, cette zone blanche fait 40% de la largeur et 40% de la hauteur… mais à vous de voir !

Comme pour le centrage, ce réglage peut se faire en pixels, ou en purcentage.

Une possibilité est de ne pas mettre de zone blanche du tout (et du coup ça bouge presque partout) :

$('#viewport').scrollMap({ 
   deadSpot: [0, 0] 
   // zone froide inexistante
});
hyrule

 

That’s it !