Div loupe fixe sur div image mobile (effet zoom inversé)

bonjour,
depuis 3 jours je tourne en rond pour arriver à déplacer une image sous une div fixe faisant effet zoom :
j'ai une div contenant une image tout en longueur (règle graduée de type timeline) qui se déplace horizontalement en suivant la souris,
j'aimerai mettre par dessus une div fixe au centre de l'écran faisant effet zoom sur l'image
(pour visualiser mon pb, imaginez une loupe fixe sous laquelle on fait défiler un mètre à ruban)
il y a mille et une solutions pour pour déplacer une loupe sur une image mais je n'ai pas trouvé comment faire le contraire
je crois avoir (à mon niveau) tout essayé, js, jquery, css3, html5+canvas, etc …
… et je n'y arrive pas, je sèche lamentablement

si l'un de vous a une idée je suis preneur et par avance un grand merci
Modifié par gazobu (14 Apr 2013 - 22:58)

Je suppose qu'il faudrait créer une image de meilleure qualité de la règle. Ensuite tu détecte la position du curseur pour en déduire la position de la règle, par rapport à cette position, tu attribue et positonne la règle (de grande qualité) en background à la loupe.
C'est plus compliqué techniquement que dans le concept mais ça me semble tout à fait faisable

Demande si tu a besoin d'aide
Modifié par juliendargelos (16 Apr 2013 - 10:08)

Et tu calcules la position de ta souris en pourcentage, comme ça il est facile de recalculer la position de ton image zoomée (background) sous la loupe.

Je t'invite à voir ceci. J'ai essayé de retranscrire au mieux ce que tu nous a décris, avec le script le plus court possible.
Modifié par juliendargelos (17 Apr 2013 - 13:34)

juliendargelos a écrit :
Je t'invite à voir ceci. J'ai essayé de retranscrire au mieux ce que tu nous a décris, avec le script le plus court possible.

Bravo Julien et un grand merci
une seule question:
je n'ai pas su trouver dans ton script (compacté) et le css le paramétrage du facteur de grossissement de la loupe et le paramétrage du canvas qui la supporte .

mais c'est très exactement la solution à mon problème et cerise sur le gâteau c'est optimisé pour toutes plateformes … chapeau bas l'artiste

Tant mieux alors
Voilà la source: http://codepen.io/juliendargelos/pen/AniDy

Je n'utilise pas de canvas, la loupe est conçu avec de simples propriétés css. Quant au facteur de grossissement, je ne le connais pas (même si on pourrais facilement le calculer): la première règle que j'ai dessinée est la grande, que j'ai ensuite réduit pour avoir la petite. Il s'agit dont d'un facteur de réduction qui en l'occurrence est de 25%.
Modifié par juliendargelos (17 Apr 2013 - 22:48)

ok Julien,
toute l'astuce est dans la ligne:

document.getElementById('loupe').style.backgroundPosition=pcX+'px '+pcY+'px';

quant à la valeur de grossissement c'est tout simplement le ratio entre la "big" et la "small" ruler

au final pour mon cas, (ne voulant travailler qu'en X) 4 lignes de js et 15 de css suffisent
alors que je suis allé chercher midi à quatorze heures.
merci encore de m'avoir remis les pendules à l'heure !

Modifié par gazobu (18 Apr 2013 - 05:31)