DÉFILEMENT PANORAMIQUE À VITESSE VARIABLE GÉRÉE PAS LES MOUVEMENTS DE LA SOURIS

Commentaire de Ricou47 le 13/01/2005 21:32:53

La vitesse de déplacement est modifiable, il ne tient qu'à toi de l'adapter à tes goûts.
Sinon merci pour ton idée de gestion  du clavier, ce sera pour une prochaine version ;o)

Commentaire de jimmy69 le 17/01/2005 17:14:08

salut salut,

C'est vraiment sympa comme script ....! Et fournit avec un tuto en pdf que demander de plus ...

Bonne continuation...

Christophe
Un bouillonnais

Commentaire de trabi11fr le 08/05/2005 11:26:04

Très bien ce script!
Juste un petit détail: il faut aussi indiquer une largeur pour la staticZone, sinon elle dépasse de l'écran.
Ensuite ne rajoutant une balise <div align="center">, on peut la centrer dans la page.

Commentaire de fredmac le 23/07/2007 16:53:24

bonjour
j'essai de modifier ce code pour le rendre opérationnel à la verticale... mais sans grand résultat.

quelq'un pourrait-il me donner des indications sur les modifications à réaliser ?
J'ai pour le moment décommenté le déplacement vertical et comcommitament, commenté le déplacement horizontal.

j'ai également modifié la variable middle originelle en
var middle=Math.floor((screen.availHeight)/2);


j'ai modifié le calcul du mouvement en remplaçant les x-middle par des y-middle



/****************************************************************************************

* Fichier : panoramic.js

* Auteur : Ricou47 (www.codes-sources.com)

* Role : permet le défilement d'une zone <div> dans laquelle on peut afficher tout

* type de contenu (texte, liens, images,...) en fonction des mouvements

de la souris

* Version : 1.0

*

/***************************************************************************************/



var middle=Math.floor((screen.availHeight) / 2);

var offsetLeft=0;

var dynamicZone=null;

var pitch=0;

var y=middle;

var trigger=false;



// Valeurs à modifier éventuellement :

var resol=2; // == Résolution du déplacement (doit être >=1)

var hysteresis=100; // == Distance en pixels entre le centre et les frontières

// de la zone morte (zone dans laquelle le curseur ne fait pas déplacer

// la zone dynamique) (doit être >=0)

var timeOffset=50; // == Durée entre deux déplacements en ms (doit être >=0)

var width=200; // == Largeur de l'objet à déplacer en pixels (doit être >=0)



// Calcule la position du curseur

function position(e){

// déplacement horizontal ou verticale

//x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;

var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;

}



// Calcule la nouvelle position et déplace la zone dynamique

function move(){

if(dynamicZone==null){

dynamicZone=findDOM('dynamicZone',0);

}



// Calcul de l'éventuel mouvement

if(Math.abs(y-middle)>hysteresis && trigger){

pitch=((Math.abs(y-middle)-hysteresis)^resol)/1000;

offsetLeft=Math.max(Math.min(offsetLeft+((-1)^(y-middle))*pitch,0),2*middle-height);

dynamicZone.style.left=offsetLeft;

}

// Appel récursif à la fonction de déplacement

setTimeout('move()',timeOffset);

}



// Fonction (dés)activant le déplacement

function trigMove(value){

trigger=value;

}



document.onmousemove = position;

document.onload = move();





Merci pour votre aide.

Commentaire de nobrun le 02/09/2008 17:30:56

Bonjour,

je crois avoir enfin trouvé ce que je cherchais mais j'ai encore un doute. Je cherche à rendre possible aux visiteurs de se déplacer de cette manière dans les pages de mon site (qui sont horizontales). Tu parles d'une zone seulement, est-ce que cela marche sur des pages entières (si l'on excepte le menu et le bandeau titre, le restant forme une seule zone?)?

(je n'arrive pas à tester le script)

Sinon je cherchais dans l'idéal un déplacement de style pdf (ou on garde le clic enfoncé en déplaçant la souris pour se déplacer dans la page). Quelqu'un connaîtrait-il cela?

Merci beaucoup, je cherche depuis des heures et je suis un peu débutant...

Commentaire de nobrun le 14/09/2008 22:47:30

Bonjour,

Une petite info qui en intéressera peut-être quelques-uns. J'ai enfin résolu mes problèmes, en inversant les valeurs de la fonction Trigmove :

j'ai remplacé false par true et true par false, ce qui donne <div id="staticZone" onmouseover="javascript:trigMove(false)" onmouseout="javascript:trigMove(true)">,
et fait que la zone où le script est actif uniquement hors de l'objet que l'on déplace, ce qui évite les bugs avec les images quand l'objet que l'on déplace en contient (voir message précédent).

Pour que cela marche sur une zone importante, il faut bien mettre une petite valeur (voire 0 pixel) pour la taille de la zone dynamique.

Merci bien à Ricou 47 pour ce script!