Wie verschiebt man den CSS-Hintergrund basierend auf der Cursor-/Fingerposition, ohne die Eigenschaft background-position zu verwenden?

Question

Ich arbeite an einer kleinen App, wo der Benutzer den Hintergrund mit seiner Maus oder seinem Finger auf dem Bildschirm bewegt.

Sie eine Demo finden Sie hier: http://kaleidoscope-experiment.herokuapp.com/

Die background-position durch die Position des Cursors/Finger mit dieser Art von Code definiert:

// mobile 
position = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px'; 

// desktop 
position = e.pageX + 'px ' + e.pageY + 'px'; 

Allerdings habe ich erhebliche Verzögerungen auf mobilen und Tablet und der Hintergrund ist "Clipping".

Wissen Sie, ob es eine Alternative zu background-position (transform?) Gibt, um den Hintergrund basierend auf der Cursor-/Mausposition zu verschieben?

Answer 1

Wenn Sie eigene Rollen erstellen möchten, verwenden Sie einfach eine Kombination aus der jQuery-Funktion mousemove in Kombination mit CSS3-Transformationen. Etwas nach dem Vorbild dieses:

$("#target").mousemove(function(event) { 
    var msg = "Handler for .mousemove() called at "; 
    msg += event.pageX + ", " + event.pageY; 
    console.log("<div>" + msg + "</div>"); 
    $("#movingobject").css('transform', 'translate(' + event.pageY /4 + 'px,' + -event.pageX /4+ 'px)'); 
    }); 

ist die Referenz Geige, die ich von Stackoverflow bekam http://jsfiddle.net/ZmZhw/

Es gibt eine Reihe von js-Plugin, die verfügbar sind, die u einige reibungslosen Übergang und die Leistung auch geben.