DÉFILEMENT PANORAMIQUE À VITESSE VARIABLE GÉRÉE PAS LES MOUVEMENTS DE LA SOURIS
fg85
Messages postés370Date d'inscriptiondimanche 28 mars 2004StatutMembreDernière intervention13 avril 2007
-
13 janv. 2005 à 17:26
cs_nobrun
Messages postés6Date d'inscriptionmardi 2 septembre 2008StatutMembreDernière intervention 8 août 2009
-
8 août 2009 à 20:15
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
cs_nobrun
Messages postés6Date d'inscriptionmardi 2 septembre 2008StatutMembreDernière intervention 8 août 2009 8 août 2009 à 20:15
En tout cas bon courage à tout ceux qui souhaitent utiliser le script de Ricou, ça peut être un peu casse-tête mais le résultat vaut le coup à mon avis.
Bruno
cs_nobrun
Messages postés6Date d'inscriptionmardi 2 septembre 2008StatutMembreDernière intervention 8 août 2009 8 août 2009 à 20:12
Il y a un fichier panoramic par taille de tableau (5000, 5500, 6000, etc.) qui ne diffèrent que par le chiffre après var width, mais il n'y a pas d'autre modification.
La seule chose, en plus d'avoir inversé true et false pour les zones dynamiques et statiques (voir précédents messages, le script n'est actif que hors de la zone qu'on déplace ), c'est que je n'ai pu placer la première partie du code qu'après la balise (impossible d'y accéder sur mon éditeur) alors qu'elle se trouve entre les balises </head> et sur le code de Ricou. Je ne sais pas si cela a une influence
cs_nobrun
Messages postés6Date d'inscriptionmardi 2 septembre 2008StatutMembreDernière intervention 8 août 2009 8 août 2009 à 19:44
J'ai le problème inverse. C'est IE qui marche très bien, je n'ai jamais réussi à le faire fonctionner correctement sur Firefox, mais j'arrive à n'avoir aucun bug sur Firefox (il n'y a juste pas le déplacement à vitesse variable avec la souris, sinon tout s'affiche correctement comme sur IE). par exemple : [url]http://www.nonor-photos.com/moyenne-montagne.php/url
gilarno
Messages postés1Date d'inscriptionvendredi 20 février 2004StatutMembreDernière intervention 2 août 2009 2 août 2009 à 07:29
Bonjour,
Merci pour ce script. L'effet est très bon ... du moins sous FF.
Je ne parviens pas à le faire fonctionner sous IE.
Le calcul du offsetLeft semble se faire différemment sous IE.
Quelqu'un a-t-il trouvé une solution ?
Gilles
vb078
Messages postés19Date d'inscriptionvendredi 24 août 2007StatutMembreDernière intervention20 juin 2010 23 janv. 2009 à 18:46
PS: Nobrun merci pour l'info :)
PPS: J'ai mis un lien "copyright" pour informer de ton code
(pour les visiteurs intéressés)
vb078
Messages postés19Date d'inscriptionvendredi 24 août 2007StatutMembreDernière intervention20 juin 2010 23 janv. 2009 à 18:44
MERCI
J'ai aménagé tout ca à mon site...
Pas encore réglé l'axe Y...
Pas tout pigé !
Sinon on peut en faire des choses intéressantes
genre texte caché :)
cs_nobrun
Messages postés6Date d'inscriptionmardi 2 septembre 2008StatutMembreDernière intervention 8 août 2009 14 sept. 2008 à 22:47
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
,
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!
cs_nobrun
Messages postés6Date d'inscriptionmardi 2 septembre 2008StatutMembreDernière intervention 8 août 2009 3 sept. 2008 à 15:31
Ca y est, j'ai à peu près tout réussi, j'ai un dernier problème dont vous pourrez vous rendre compte à cette adresse : http://bruno-meignien.wifeo.com/test.php car j'ai un tableau qui contient des images et si je place la souris à droite sur ce tableau, celui-ci bouge normalement jusqu'à ce que la première image touche le bord de l'écran à gauche. A ce moment-là, le tableau se décale immédiatement jusqu'à la butée de droite, ce qui ne laisse pas trop le temps de voir défiler les images...
Je vais essayer de faire autrement mais c'était pour info du problème rencontré.
cs_nobrun
Messages postés6Date d'inscriptionmardi 2 septembre 2008StatutMembreDernière intervention 8 août 2009 2 sept. 2008 à 17:30
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...
cs_Ricou47
Messages postés2Date d'inscriptionvendredi 20 février 2004StatutMembreDernière intervention 4 février 2008 4 févr. 2008 à 14:42
Fredmac,
Désolé de t'avoir laissé dans la panade pendant autant de temps...
As-tu toujours besoin d'aide sur ce sujet ?
cs_fredmac
Messages postés1Date d'inscriptionjeudi 8 décembre 2005StatutMembreDernière intervention23 juillet 2007 23 juil. 2007 à 16:53
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
dVSClem
Messages postés1Date d'inscriptionjeudi 29 septembre 2005StatutMembreDernière intervention29 septembre 2005 29 sept. 2005 à 19:19
Tres bien mais comment faire la même chose de façon horizontale ?
trabi11fr
Messages postés40Date d'inscriptionlundi 8 mars 2004StatutMembreDernière intervention10 décembre 2008 8 mai 2005 à 11:26
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
, on peut la centrer dans la page.
tguerlus
Messages postés43Date d'inscriptionmardi 16 novembre 2004StatutMembreDernière intervention 3 mai 2005 18 janv. 2005 à 16:11
Très bonne idée, j'y travaillez justement. J'aurai donc une remarque à te faire.
Comment faire pour reproduire l'effet plusieurs fois dans une même page?
Tu n'est pas le seul, sur ce site, à faire la même approche. Mais il faut d'avantage penser au objets. Javascript permet la programmation objet. Cela évite les collisions de nom de variable et permet justement de reproduire un effet plusieurs fois dans une même page.
cs_jimmy69
Messages postés778Date d'inscriptiondimanche 22 décembre 2002StatutMembreDernière intervention27 novembre 20081 17 janv. 2005 à 17:14
salut salut,
C'est vraiment sympa comme script ....! Et fournit avec un tuto en pdf que demander de plus ...
Bonne continuation...
Christophe
Un bouillonnais
la_pin
Messages postés275Date d'inscriptionmercredi 11 août 2004StatutMembreDernière intervention15 décembre 2005 14 janv. 2005 à 12:30
et en plus, ça marche encore mieux avec mozilla ! vraiment pas mal comme source :-)
cs_Ricou47
Messages postés2Date d'inscriptionvendredi 20 février 2004StatutMembreDernière intervention 4 février 2008 13 janv. 2005 à 21:32
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)
fg85
Messages postés370Date d'inscriptiondimanche 28 mars 2004StatutMembreDernière intervention13 avril 2007 13 janv. 2005 à 17:26
Yaouuu , vraiment bien (je parle de ton MINI-tutos),sinon ben disons que si tu ralentissait ta fonction de déplacement ça sera cool sinon ça fait un peu E.T .
A par ça, inclut la gestion du clavier c'est toujours intérressant pour se type de script .
8 août 2009 à 20:15
Bruno
8 août 2009 à 20:12
La seule chose, en plus d'avoir inversé true et false pour les zones dynamiques et statiques (voir précédents messages, le script n'est actif que hors de la zone qu'on déplace ), c'est que je n'ai pu placer la première partie du code qu'après la balise (impossible d'y accéder sur mon éditeur) alors qu'elle se trouve entre les balises </head> et sur le code de Ricou. Je ne sais pas si cela a une influence
8 août 2009 à 19:44
2 août 2009 à 07:29
Merci pour ce script. L'effet est très bon ... du moins sous FF.
Je ne parviens pas à le faire fonctionner sous IE.
Le calcul du offsetLeft semble se faire différemment sous IE.
Quelqu'un a-t-il trouvé une solution ?
Gilles
23 janv. 2009 à 18:46
PPS: J'ai mis un lien "copyright" pour informer de ton code
(pour les visiteurs intéressés)
23 janv. 2009 à 18:44
J'ai aménagé tout ca à mon site...
Pas encore réglé l'axe Y...
Pas tout pigé !
Sinon on peut en faire des choses intéressantes
genre texte caché :)
EX sur mon site
http://demain-comme-jamais.toile-libre.org/index/Home.html
(lien de redirection pour les internet exploreurs...)
si non c'est par là :
http://demain-comme-jamais.toile-libre.org/
BONNE CONTINUATION !!!
14 sept. 2008 à 22:47
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
,
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!
3 sept. 2008 à 15:31
Je vais essayer de faire autrement mais c'était pour info du problème rencontré.
2 sept. 2008 à 17:30
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...
4 févr. 2008 à 14:42
Désolé de t'avoir laissé dans la panade pendant autant de temps...
As-tu toujours besoin d'aide sur ce sujet ?
23 juil. 2007 à 16:53
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
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.
29 sept. 2005 à 19:19
8 mai 2005 à 11:26
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
, on peut la centrer dans la page.
18 janv. 2005 à 16:11
Comment faire pour reproduire l'effet plusieurs fois dans une même page?
Tu n'est pas le seul, sur ce site, à faire la même approche. Mais il faut d'avantage penser au objets. Javascript permet la programmation objet. Cela évite les collisions de nom de variable et permet justement de reproduire un effet plusieurs fois dans une même page.
Si tu veux t'inspirer de ma solution la voici:
http://www.javascriptfr.com/code.aspx?ID=28586
17 janv. 2005 à 17:14
C'est vraiment sympa comme script ....! Et fournit avec un tuto en pdf que demander de plus ...
Bonne continuation...
Christophe
Un bouillonnais
14 janv. 2005 à 12:30
13 janv. 2005 à 21:32
Sinon merci pour ton idée de gestion du clavier, ce sera pour une prochaine version ;o)
13 janv. 2005 à 17:26
A par ça, inclut la gestion du clavier c'est toujours intérressant pour se type de script .
Cordialement
-------------------
http://fg.logiciel.free.fr