Hallo zusammen! Heute möchte ich euch ein jQuery Plugin vorstellen mit dem ihr probieren könnt das Verhalten eurer User vorherzusehen. Das ganze nennt sich jquery.aim und arbeitet mit einem relativ einfachen Trick.

„Userklicks“ vorhersagen?
Jain, vielleicht habe ich hier etwas dick aufgetragen 😉 Im Grunde probiert das Skript anhand der relativen Mausbewegung zu errechnen auf welche Schaltfläche ihr euch zubewegt. Das heißt, das Skript nimmt permanent eure Mausposition auf und errechnet periodisch das Delta dazwischen – das könnt ihr euch im Debug Modus auch grafisch darstellen lassen.

Wie funktioniert die Berechnung?
Eigentlich wird es sehr schnell deutlich wenn ihr in den Beispielen den Debug Modus einschaltet.
Die Funktion zum berechnen wird alle 16ms ausgeführt (entspricht etwa 60 mal pro Sekunde) und vergleicht die aktuelle Mausposition mit den Koordinaten des letzten Aufrufes. Im Code könnt ihr euch das etwa so vorstellen:

// Try to find the delta between to mouse-positions.
var mouse_coords = {x:0, y:0},
    last_coords = {x:0, y:0},
    delta = {x:0, y:0},
    timer = setInterval(function() {
        delta.x = mouse_coords.x - last_coords.x;
        delta.y = mouse_coords.y - last_coords.y;

        last_coords = mouse_coords;
    }, 16);

// jQuery Syntax for getting the mouse movement.
$().ready(function() {
    document.addEventListener('mousemove', function(e) {
        mouse_coords.x = e.clientX,
        mouse_coords.y = e.clientY;
    }, false);
});

Mit diesem Code solltet ihr das Delta zweier Mauspositionen zwischen zwei Zeitpunkten herausfinden können und entsprechend errechnen wohin sich die Maus bewegt. Grafisch könnte das etwa so aussehen:Das Delta beträgt in diesem Beispiel x: +140, y: -80.

Und mit etwas zusätzlicher Logik könnten wir bei Elementen, die auf dem Weg liegen, einen klick simulieren. Das jQuery Plugin dagegen muss auf bestimmte Elemente angewendet werden und braucht die Callback Funktionen aimEnter und/oder aimExit:

// Usage of jquery.aim Plugin
$('#menu-button').aim({
   aimEnter: function() {
      $('#menu').show();
   }, aimExit: function() {
      $('#menu').hide();
   }
});

Übrigens: da wir mit Mauskoordinaten bzw. dem onmousemove Event arbeiten funktioniert dieses Skript nicht mit Touchscreens sondern setzt eine Maus oder Touchpad voraus.

Fazit
Ich hatte bei den Beispielen teilweise das Gefühl als würde das Skript mal funktionieren und mal nicht… Allerdings habe ich es mit schnellen Mausbewegungen wirklich darauf angelegt 😉 Im Großen und Ganzen finde ich das Skript ganz gut gemacht – ich bin mir zwar nicht sicher ob ich es für reale Projekte einsetzen würde, doch es könnte durchaus einen positiven Effekt haben. Vor allem das erste Beispiel mit dem Header-Bereich finde ich ziemlich gut (das hatte mit Abstand auch am besten funktioniert).
Und was haltet ihr davon? Lasst es mich in den Kommentaren wissen.

Für diese Woche verabschiede ich mich und hoffe ihr schaut auch nächstes mal wieder rein! Bis dahin wünsche ich euch Happy Coding!