Implémenter une fenêtre panoramique sur une image? - javascript, jquery, html, css, jquery-animate

"J'essaie d'implémenter un effet dans lequel une fenêtre animée / animée recouvre une image d'arrière-plan de telle sorte que vous ne puissiez voir qu'une certaine section de l'image à la fois.

En fait, la fenêtre elle-même ne devrait pas bougersera un div assis quelque part sur la page - mais l’effet devrait être l’arrière-plan se déplace derrière elle. Toutefois, l’arrière-plan ne doit occuper aucun espace sur le DOM (c’est-à-dire qu’il ne doit affecter aucun élément qui l’entoure).

Quel est le meilleur moyen de mettre cela en œuvre? Devrais-je simplement créer une image d’arrière-plan pour la fenêtre div, puis ajuster la position de l’arrière-plan? Ceci peut-il être animé avec jQuery?

____________________
|                   |
|   IMAGE           |
|   ___________     |
|   |  window |     |
|   |_________|     |
|___________________|

Réponses:

METTRE À JOUR: jsfiddle pour une animation basée sur CSS.

Regarde ça jsfiddle assurez-vous que c’est ce que vous voulez.

HTML

<div class="window">
</div>

JS

var position = 135;
$(".window").click(function() {
position += 20;
$(this).css("background-position-x", position);
});

CSS

.window {
background-image: url(image);
display: block;
height: 200px;
width: 200px;
background-position: 135px -40px;
}