21
SEP

Overscroll - Naviguez en scroll dans vos images avec jQuery

Publié le 21/09/11 à 09h16 par DJo

Overscroll est un plugin jQuery permettant d'imiter la navigation "scrolling" de l'iPhone / iPad, sur un navigateur.

Overscroll est un plugin jQuery permettant d'imiter la navigation

Vous êtes à présent habitué à ce mode de navigation grâce à vos smartphone ou tablette: Un glissement du doigt sur une grande image ou carte vous permet de vous déplacer dans cette dernière.

C'est cette navigation qu'Overscroll propose d'implémenter sur votre site web.

Très pratique si vous souhaitez présenter à vos visiteurs des cartes ou images très larges sans qu'elle ne soit redimensionnée et donc illisible...

Message explicatif en overlay

Afin d'éduquer vos visiteurs à ce mode de navigation, lorsque la souris du visiteur est en dehors de la zone, un message en overlay apparait pour expliquer qu'il faut cliquer et drag avec la souris sur la carte pour naviguer. (Message personnalisable).

Le plugin propose différentes options, comme la navigation avec la molette de la souris dans le sens vertical ou horizontal, ainsi que la vitesse de scroll avec la molette,affichage des scrollbar en image, type de curseur de la souris etc.

Différents évènements vous permettront d'étendre les possibilités (dragstart, dragend, driftstart, driftend), pratique.

Côté utilisation, on reste très simple comme la majeure partie des plugins jQuery:

$(document).ready(function(){
    $("#maCarte").overscroll();
});

Et niveau compatibilité:

  • Firefox 3+
  • Safari 5+
  • Chrome 5+
  • Sur IE, c'est moins sexy et plus saccadé, mais ça passe (Testé sur IE8)

 

Qu'en pensez-vous ?

 

Site Officiel

Baraguiné par tsunamichups le 23/09/11 à 10h34
tsunamichups sur La Ferme du Web
Dommage que ca saccade un peut
tester sous le dernier firefox

Mais s'est assez sympa comme expérience utilisateur
Baraguiné par S0da le 25/09/11 à 12h25
S0da sur La Ferme du Web
Chez moi ça saccade pas du tout, c'est très proche de ce qu'on peut avoir sur Google Maps, donc excellent !

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web