Webdesign

JavaScript Tutorial: Eine effektvolle Mausspur mit Follow Mouse

21. Januar 2010
von

Die Mausspur ist ein reichlich verspielter Effekt, den es auch schon zu DHTML-Zeiten gegeben hat. Der Mauszeiger wird von einzelnen Bildern oder Buchstaben verfolgt. Der auffällige Effekt kann für sich selbst stehen oder eine kurze Botschaft transportieren. Das Tutorial erklärt ausführlich das nötige Scripting.

Follow Mouse - Demo

Follow Mouse - Demo

Beispiel: Follow Mouse – Live Demo plus Quelltext (neues Fenster)

Grundidee

Follow Mouse - Divs

Follow Mouse - Divs

Die Grundidee für den Follow Mouse-Effekt besteht darin, die Verfolgerelemente in einem Array zu speichern follow = [el1, el2, el3], bei jeder Mausbewegung die Positionen an das jeweils nachfolgende Element weiterzugeben und das erste Element auf die aktuelle Position des Mauszeigers zu setzen: el3.pos = el2.pos; el2.pos = el1.pos; el1.pos = mouse.pos;

Beispiel: DIVs – Live Demo plus Quelltext (neues Fenster)

So direkt umgesetzt hat das drei Nachteile:

  1. Mausklicks funktionieren nicht mehr
  2. Die Elemente liegen so dicht aufeinander, dass der Effekt kaum
    sichtbar ist
  3. Wenn der Mauszeiger steht, bleiben auch die Verfolger stehen

Mausklicks

Damit bei Mausklicks nicht auf die Verfolgerelemente geklickt wird, werden sie mit etwas Abstand nach rechts/unten versetzt vom Mauszeiger positioniert.

// follow[0].pos = Aktuelle Position des Mauszeigers im Dokument
follow[0].style.left = e.pageX + 10 + "px";
follow[0].style.top  = e.pageY + 10 + "px";

Räumlicher oder zeitlicher Abstand?

Follow Mouse - Abstand

Follow Mouse - Abstand

Der zu kleine räumliche Abstand lässt sich vermeiden, in dem nicht jede Mausbewegung zur Weitergabe der Verfolgerpositionen führt, sondern nur Mausbewegungen mit einem Mindestabstand von zum Beispiel 50 Punkten.

Zur Berechnung des Abstandes wird die Länge des Vektors von der aktuellen Mausposition zum ersten Verfolger bestimmt.

// Abstand Verfolger zur aktuellen Mausposition
var distance = Math.sqrt(Math.pow(e.pageX - left, 2) +
                         Math.pow(e.pageY - top, 2));

if(distance > 50 ) {
    // follow[5].pos = follow[4].pos;

Damit liegen die Verfolger nicht mehr aufeinander, bleiben aber weiterhin zusammen mit dem Mauszeiger stehen.

Beispiel: Abstand – Live Demo plus Quelltext (neues Fenster)

Follow Mouse - Zeitgeber

Follow Mouse - Zeitgeber

Statt also die Mausbewegung als Signal zur Weitergabe der Positionen zu benutzen, kommt ein Zeitgeber ins Spiel, der alle x-Zeiteinheiten die Routine zur Aktualisierung der Positionen aufruft. Je länger dieser zeitliche Abstand ist, desto größer ist bei (schnellen) Mausbewegungen auch der räumliche. Mit einem zeitlichen Abstand von 100ms bis 170ms funktioniert das gut. Und wenn nun der Mauszeiger steht, bleiben die Verfolger erst stehen, wenn sie alle den Mauszeiger erreicht haben. Der Mousemove-Handler dient nun nur noch dazu die aktuelle Mausposition in mousePos zu speichern.

var timeDiff = 100;
var mousePos = {x: 0, y: 0};

// Mousemove-Handler
jQuery(document).mousemove(function(e) {
    mousePos.x = e.pageX;
    mousePos.y = e.pageY;
});// mousemove

// Zeitgeber starten
setInterval(move, timeDiff);

Beispiel: Zeitgeber – Live Demo plus Quelltext (neues Fenster)

Follow Mouse - Zeitgeber plus Abstand

Follow Mouse - Zeitgeber plus Abstand

Als dritte Möglichkeit können beide Varianten kombiniert werden. Der Zeitgeber sorgt dafür, dass die Verfolger nicht stehen bleiben und der räumliche Mindestabstand dafür, dass die Elemente nicht zu dicht aufeinander liegen. Gegenüber der zweiten Variante ergibt sich daraus kein besserer Effekt, sondern nur ein Mehr an Programmierung, weshalb die folgenden Beispiele nur den Zeitgeber benutzen.

// Mousemove-Handler
jQuery(document).mousemove(function(e) {
    // Position ohne "px": 40px -> 40
    var left = parseFloat(follow[0].style.left);
    var top  = parseFloat(follow[0].style.top);

    // Abstand Verfolger zur aktuellen Mausposition
    var distance = Math.sqrt(Math.pow(e.pageX - left, 2) +
                             Math.pow(e.pageY - top,  2));

    if(distance > 50 ) {
        mousePos.x = e.pageX + 10;
        mousePos.y = e.pageY + 10;
    }
});// mousemove

// Zeitgeber starten
setInterval(move, timeDiff);

Beispiel: Zeitgeber + Abstand – Live Demo plus Quelltext (neues Fenster)

Optische Verbesserung

Scrollbereich sichtbar

Follow Mouse - Scrollbereich sichtbar

Wenn die Verfolger über den rechten oder unteren Rand hinausgehen, vergrößert sich das Dokument und der Webbrowser zeigt einen Scrollbereich an, für den eigentlich kein Inhalt existiert – was nicht besonders gut aussieht.

Verfolger bleiben innerhalb des Dokuments

Follow Mouse - Verfolger bleiben Innerhalb

Follow Mouse - Verfolger bleiben Innerhalb

Eine einfache Lösung hierfür liegt darin, die Verfolger so zu platzieren, dass sie immer komplett im Dokument sichtbar sind. Dazu wird die Breite und Höhe des Dokuments ermittelt und die Verfolger so gesetzt, dass el.left + el.width nicht größer als die Breite und el.top + el.height nicht größer als die Höhe des Dokuments sind.

// Innerhalb des Scrollbereichs bleiben
if(left + 40 > docWidth)  {left = docWidth  - 40;}
if(top  + 40 > docHeight) {top  = docHeight - 40;}

// Position setzen
el.style.left = left + "px";
el.style.top  = top  + "px";

Die passende Größe des Dokuments liefert jQuery mit

// Breite und Höhe des Scrollbereichs
var docWidth  = jQuery(document).width();
var docHeight = jQuery(document).height();

Beispiel: Rand – Live Demo plus Quelltext (neues Fenster)

Verfolger an den Rändern abschneiden

Follow Mouse - Abschneiden

Follow Mouse - Abschneiden

Mit dem Platzieren der Verfolger innerhalb des Dokuments wird die unschöne Vergrößerung des Dokuments verhindert – allerdings “kleben” die Verfolger nun auch nicht besonders ansehnlich am rechten und unteren Rand fest. Im nächsten Beispiel werden die über den Rand hinausragenden Bereiche der Verfolger daher abgeschnitten.

Zum Abschneiden wird berechnet wieweit die Verfolger über die Ränder hinausragen und ihre Größe dann passend reduziert.

var curWidth  = 40;
var curHeight = 40;

// Über Rand -> Breite/Höhe verkleinern
if(left + 40 > docWidth) {
    curWidth = 40 - ((left + 40) - docWidth);
}

if(top + 40 > docHeight) {
    curHeight = 40 - ((top + 40) - docHeight);
}

// Position setzen
el.style.left = left + "px";
el.style.top  = top  + "px";

// Breite/Höhe setzen
if(curWidth > 0 && curHeight > 0 ) {
    el.style.width   = curWidth  + "px";
    el.style.height  = curHeight + "px";
    el.style.display = "block";
} else {
    el.style.display = "none";
}

Beispiel: Abschneiden – Live Demo plus Quelltext (neues Fenster)

Text

Follow Mouse - Verfolgt von Buchstaben

Follow Mouse - Verfolgt von Buchstaben

Für den Verfolgertext wird für jeden Buchstaben ein DIV mit overflow: hidden erzeugt, so dass das DIV-Element verkleinert werden kann, ohne dass etwas über dessen Ränder hinausragt, der Buchstabe dort hineingelegt und die Hintergrundfarbe der DIVs auf transparent gesetzt. (transparent ist zwar der Vorgabewert aber der könnte per Stylesheet global für alle DIV-Elemente geändert sein.)

var text = "Follow Mouse";
// Divs mit Buchstaben erzeugen
var body = document.getElementsByTagName("body")[0];

for(var i = 0; i < text.length; i++) {
    var el = document.createElement("div");

    el.style.position        = "absolute";
    el.style.display         = "block";
    el.style.overflow        = "hidden";
    el.style.backgroundColor = "transparent";

    el.style.color           = "black";
    el.style.fontSize        = "40px";

    // ...

    // Textnode in Div legen
    var textNode = document.createTextNode(text.charAt(i));
    el.appendChild(textNode);

    body.appendChild(el);

    var item = new Item(el, mousePos.x, mousePos.y,
                            jQuery(el).width(), jQuery(el).height());
    follow.push(item);
}// for(var i = 0; i < text.length; i++) {

Item-Objekt

Neu hinzugekommen ist außerdem das Item-Objekt. Dieses erleichtert den Zugriff auf die Positionen und Größen der Verfolger und es wird benötigt, um die Originalgröße der Verfolger zu speichern. Im DIV-Element wird diese ja an den Rändern reduziert und geht dort dann für weitere Berechnungen verloren.

// Konstruktor-Funktion für einen Verfolger
function Item(element, left, top, width, height) {
    this.el     = element;
    this.left   = left;
    this.top    = top;
    this.width  = width;
    this.height = height;
}// Item

Beispiel: Text – Live Demo plus Quelltext (neues Fenster)

Bilder

Follow Mouse - Verfolgt von Grafiken

Follow Mouse - Verfolgt von Grafiken

Gleiches geschieht bei den Bildern. DIV mit overflow: hidden erzeugen, Bild hineinlegen und Hintergrund des DIVs auf transparent setzen. Zusätzlich nutzt das Skript einen Preloader für die Bilder, so dass sie erst hinzugefügt werden, wenn alle geladen sind.

Da das Laden asynchron erfolgt, ist das Initialisieren der Bilder in die Funktionen preloadimages() und initImages() aufgeteilt. Wenn der Preloader alle Bilder erfolgreich geladen hat, gibt er sie an initImages() weiter. Dort werden die DIVs erzeugt, hinzugefügt und der Zeitgeber gestartet.

Falls beim Laden etwas schief geht, wird im Preloader eine Exception geworfen und der Follow Mouse-Effekt bleibt inaktiv. So sind immer alle oder keine Verfolgerbilder zu sehen.

function preloadImages(imageURLS, onFinish) {
    var imageCount = 0;
    var images     = [];

    for(var i = 0; i < imageURLS.length; i++) {
        images[i] = new Image();

        images[i].onload = function() {
            imageCount++;
            if(imageCount == imageURLS.length) {
                onFinish(images);
            }
        };// images[i].onload = function() {

        images[i].onerror = function() {
            throw "Loading images failed";
        };// images[i].onerror = function() {

        images[i].src = imageURLS[i];
    }// for(var i = 0; i < imageURLS.length; i++) {
}// preloadImages

// Starten via preloadImages -> initImages
preloadImages(images, initImages);

Beispiel: Bilder – Live Demo plus Quelltext (neues Fenster)

Anpassungen für IE

Follow Mouse - IE Transparenz fehlt und Scrollbereich zu groß

Follow Mouse - IE Transparenz fehlt und Scrollbereich zu groß

In Microsofts Internet Explorer gibt es zwei Probleme:

  1. IE 6: Keine Transparenz bei PNG-Grafiken
  2. IE 6 / IE 8: Dokumentgröße stimmt nicht

Für diese Probleme haben ich keine Feature-Erkennung gefunden. Stattdessen werden die IE-Versionen per Conditional Comment ermittelt und im Skript abgefragt.

<!--[if IE]>
<script type="text/javascript">
    if(typeof DrWeb === "undefined") {var DrWeb = {};}

    DrWeb.isIE = true;
</script>
<![endif]-->

<!--[if lte IE 6]>
<script type="text/javascript">
    if(typeof DrWeb === "undefined") {var DrWeb = {};}

    DrWeb.islteIE6 = true;
</script>
<![endif]-->

if(typeof DrWeb !== "undefined" && DrWeb.isIE) {

Dokumentgröße

jQuery liefert im IE 6/8 nur die richtige Breite und Höhe des Dokuments wenn im Webbrowser keine Scrollbalken vorhanden sind. Ansonsten enthalten die Größenangaben zusätzlich die Breite und Höhe der Scrollbalken und sind dann zu groß.

Nicht vorhanden sind die Scrollbalken, wenn die innere Größe des HTML-Elements und die Größe des Dokuments gleich groß sind. In diesen Fällen wird statt der Größe des Dokuments die des inneren Windows benutzt.

if(typeof DrWeb !== "undefined" && DrWeb.isIE) {
    if(jQuery("html").innerWidth() == docWidth) {
        docWidth = jQuery(window).width();
    }

    if(jQuery("html").innerHeight() == docHeight) {
        docHeight = jQuery(window).height();
    }
}// if(typeof DrWeb !== "undefined" && DrWeb.isIE) {

Alphatransparenz

Für die fehlende Transparenz bei PNG-Bildern bietet der IE den IE-spezifischen AlphaImageLoader-Filter. Um diesen zu nutzen wird ein DIV erzeugt, für dieses DIV der Filter gesetzt und nun statt des Image-Elements dieses DIV-Element dem Verfolger-DIV hinzugefügt.

// Grafik in Div legen
if(typeof DrWeb !== "undefined" && DrWeb.islteIE6) {
    // AlphaImageLoader für <= IE6
    var alphaImg = document.createElement("div");

    // ...

    alphaImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + images[i].src + "')";
    alphaImg.style.width  = images[i].width  + "px";
    alphaImg.style.height = images[i].height + "px";

    el.appendChild(alphaImg);
} else {
    // Alle anderen Webbrowser
    el.appendChild(images[i]);
}

Beispiel: IE – Live Demo plus Quelltext (neues Fenster)

IE-Anpassungen benutzen?
Für die IE-Anpassungen werden bestimmte Webbrowserversionen abgefragt. Dies ist ein schlechter Programmierstil. Es stellt sich die Frage, ob man die Anpassungen trotzdem benutzten sollte.

Eine Alternative zu PNG-Grafiken mit 32-Bit sind GIFs und PNG8-Grafiken. Sofern sich die Grafiken für maximal 256 Farben eignen ist das eine gute Lösung, die ohne browserspezifische Anpassungen funktioniert. In den anderen Fällen ist aber auch die IE <= 6-Abfrage meiner Ansicht nach brauchbar, da nur jene alten IE-Versionen betroffen sind und schon heute ab dem IE 7 die Anpassung nicht benutzt wird, so dass die Anpassung mit etwas Glück zukunftssicher ist.

Die Alternative zur Korrektur der Dokumentgröße besteht darin im IE die fehlerhafte Größe zu benutzen. Da der Unterschied nicht allzu sehr auffällt, halte ich das für besser als die Browserabfrage zu benutzen. Mit neueren Versionen des IE löst sich das Problem möglicherweise von selbst.

Konstruktor-Funktion

Im fertigen Demoskript ist das Ganze in eine Konstruktor-Funktion eingekapselt, so dass bis auf DrWeb der globale Namensraum unberührt bleibt.

if(typeof DrWeb === "undefined") {var DrWeb = {};}

DrWeb.Followmouse = function(options) {

Das Objekt wird mit new DrWeb.Followmous(options) erzeugt. Im options-Parameter werden die Bilder oder der Text übergeben und der Effekt mit start() aktiviert und mit stop() wieder beendet.

var fm = new DrWeb.Followmouse({images: ["img1.png", "img2.png"]});

var fm = new DrWeb.Followmouse({text: "Follow Mouse"});

fm.start();
fm.stop();

Beispiel: Follow Mouse – Live Demo plus Quelltext (neues Fenster)

Benutzerfreundlichkeit

Eine Website mit dem Follow Mouse-Effekt sieht auf den ersten Blick gut aus. Auf Dauer kann es allerdings stören, wenn Bildern und Buchstaben wichtige Seitenbereiche verdeckt werden. Das gilt besonders für das Markieren von Text. Es ist daher sinnvoll den Effekt sparsam einzusetzen. Zum Beispiel ausschließlich auf einer Startseite oder nur auf minder wichtigen Seiten. Man kann ihn aber auch nach einer Weile ausblenden und erst erneut aktivieren, wenn die Seite neu aufgerufen wird.

Getestet mit…

  • Firefox 3.0, Firefox 3.5.7, Google Chrome 2.0, IE 6, IE 7, IE 8, Konqueror 3.5.10, Opera 9.0, Opera 10.10, Safari 4.0.3.
  • IE 6: Vertikaler Scrollbalken springt kurz beim Überschreiten des unteren Randes.
  • IE 7: Verhält sich auch ohne Anpassung so wie alle anderen Webbrowser.

Material zum Download

Zip-Archiv mit allen ausführbaren Beispielen inklusive 5 Grafiken aus dem Yummy-Iconset von IconEden.

Links

(sl)

**** 38911 BASIC BYTES FREE ****

READY.
[]

25 Kommentare zu „JavaScript Tutorial: Eine effektvolle Mausspur mit Follow Mouse
  1. Stefan am 21. Januar 2010 um 15:55

    Sorry, aber ich find das furchtbar. Ein wirklich scheußlicher Effekt, der mich dazu veranlassen würde, die Webseite sofort wieder zu verlassen.

  2. Manuel am 21. Januar 2010 um 15:59

    Wirklich ein vorbildlicher ausführlicher und sehr ins Detail gehender Artikel.

    Aber: Der letzte Absatz Benutzerfreundlichkeit deutet es bereits an. Eigentlich ist dieser Javascripteffekt einer der zahlreichen Designschnitzer die in exakt dieser Gebrauchsform eigentlich längst aus dem Netz verschwunden sein sollten, anstatt dessen Funktion noch weiter zu publizieren.

    Bis heute ist mir keine einzige Seite bekannt die diese Technik jemals genutzt hätte um daraus irgendetwas auch nur im Ansatz sinnvolles zu gestalten.
    Immer war es nur eine nach wenigen Sekunden unnötig störende Spielerei ohne jeden Mehrwert.

    Schade um die Recherche und Arbeitszeit an diesem Artikel :(

  3. Gilly am 21. Januar 2010 um 16:26

    Sehr ausführlich beschrieben! Ich hoffe aber, diesen Mist nie irgendwo zu Gesicht zu bekommen ;)

  4. Wishu am 21. Januar 2010 um 16:33

    Ich bin mir ziemlich sicher, dass die Foren bald wieder überschwemmt werden mit Sites auf denen man einen solchen Effekt “bewundern” kann *seufz*

  5. Ulli am 21. Januar 2010 um 16:36

    Das hat schon in den 90ern genervt ohne Ende ;-)

  6. dux am 21. Januar 2010 um 16:58

    Also ich kann mich Manuel anschließen,
    außer das ich das damals auf privaten Seiten mal gesehen hab.
    Meist im Hintergrund noch ein Pfeifkonzert per midi Datei…
    Ja das waren noch Zeiten… ;)

    Selbes Fazit:
    Gut aufbereitet aber leider ein Effekt den die Webwelt nicht (mehr) benötigt. *hope*

  7. fwolf am 21. Januar 2010 um 18:06

    Das passt in die gleiche Kategorie wie “Web 98″, “Marquee” und “Sidescroller”. Netter Artikel, aber: mv javascript-follow-mouse.html /dev/null

    cu, w0lf.

  8. Michael Sahm am 21. Januar 2010 um 18:07

    Schön geschrieben! Allerdings fehlt mir momentan ebenfalls der Nutzen.

    Was kann ich mit einer Mausspur anfangen? Außer natürlich, mich nach etwa 5 Sekunden über sie zu ärgern…

    Wäre der Follow-Mouse-Effekt ohne Mausspur nicht viel wirkungsvoller, wenn man Position und Weg des Mauszeigers aufzeichnet, um das Besucherverhalten zu analysieren?

    Oder bestimmte Seiten-Elemente (Buttons etc.), die im wahrscheinlichen Weg des Mauszeigers liegen, mit einem Lupen-Effekt hervorzuheben, um den Besucher auf der Seite zu führen?

    Da ist bestimmt noch mehr drin, als nur bunte Fähnchen hinterm Cursor.

    Obwohl: Für einen Anbieter von Aquaristik-Artikeln wäre es eventuell passend, eine fast unmerkliche Spur von Wasserwellen hinterherzuziehen. Es müssen ja keine Torten sein… ;-)

  9. Julian E am 21. Januar 2010 um 18:17

    Somit hat Dr.Web gerade wieder an Seriösität verloren :D
    Seit froh, dass ihr noch euer Smashing Magazine habt, denn diese Seite scheint echt den Bach runterzugehen. :\

  10. Jens am 21. Januar 2010 um 18:32

    Nicht abschaltbare Musik, drehende @’s und die Mausspur gehören zu (Stil)elementen des untersten Levels.
    Was hat das Anno 2010 auf Dr. Web zu suchen??? Das ist ja noch schlimmer als Modern Talking oder Marianne Rosenberg aus der Musiktruhe hervorzukramen.
    Bitte Bitte, lieber Sven, lass das Team Ideenreich wieder aus der Kiste! ;-)

  11. Simon am 21. Januar 2010 um 20:17

    Oh toll, werd ich sofort auf meine Website setzen.
    Sagt mir bitte jemand, wie ich überdimensional große, blinkende GIF Grafiken erstellen kann?
    Was ist CSS? Brauch man das für eine Website? Ich mach immer ROT-GRÜN-BLAUE Augenkrebshintergründe mit Grafiken und Html ohne CSS…

    Naja hauptsache meiner Maus folgen jetzt noch bunte Bildchen die regelmäßig blinken!!!

    [// Ironie aus]

    Zurück in die 90er was Webdesign angeht?

  12. Gerald am 21. Januar 2010 um 21:26

    2002 hat angerufen, es will seine Javascript-Spielereien zurück. Ich habe gescrollt und gescrollt und die Pointe gesucht …

  13. Stefan am 21. Januar 2010 um 22:32

    Was zur Hölle soll den dieser Unsinn? Das interessanteste an diesem Post sind die Kommentare. Für den Autor fordere ich die Höchststrafe: Netzzugang sperren!

  14. Dirk am 21. Januar 2010 um 22:56

    “Oder bestimmte Seiten-Elemente (Buttons etc.), die im wahrscheinlichen Weg des Mauszeigers liegen, mit einem Lupen-Effekt hervorzuheben, um den Besucher auf der Seite zu führen?”

    Genau der sinnvolle Einsatz dieser Technik, die hier ja ausführlich beschrieben wird: Ein festgelegter Bereich, in dem die Mausspur genutzt wird, um für eine Vergrößerung zu sorgen, wie etwa bei einer Landkarte, ect. pp.

  15. Dirk am 21. Januar 2010 um 23:05

    Da gibt es auch schon gute Lösungen:

    http://www.netzgesta.de/loupe/

  16. Manuel am 22. Januar 2010 um 01:36

    Danke Dirk, die Beispiele sind tatsächlich etwas bei denen ich der Technik einen gewissen Mehrwert anerkennen kann.

    Das ist vermutlich die größte Schwäche des Tutorials. Die Beispiele zeigen nur die Negativseiten wegen denen man die Anwendung verteufeln würde. Beispiele die eine praktische Seite zeigen hätten das Tutorial gleich in ein ganz anderes Licht gerückt.

  17. Dirk am 22. Januar 2010 um 05:29

    Das ist oftmals das Problem bei Javascript-Tutorials. Man will es als Autor ja erst einmal leicht halten, damit der Leser es nachvollziehen kann.

    Wenn jetzt noch die Einschränkung auf einen Bereich dazu kommt und wie in meinem Beispiel die Illusion einer Bildvergrößerung, dann wird es sehr umfangreich…

  18. deweso am 22. Januar 2010 um 09:51

    wenn ich mir das ansehe dann komme ich mir wieder jung vor … es ist ein bisschen so als ob man eine Zeitreise gemacht hätte.

    Ich denke das es wirklich keine sinnvolle Verwendung für diesen Effekt gibt. Höchstens als Spielerei und dann hat man es auch nach 20 Sekunden über.
    Als “Fingerübung” geeignet …

  19. Matthias am 22. Januar 2010 um 12:13

    Demnächst kommt noch ein Artikel:
    “Wie effektvoll ist Tabellenlayout ohne CSS, aber mit HTML 1.”
    Superbeitrag mit tollen Beispielen, Danke. So verliert man Leser.

  20. Stephe am 22. Januar 2010 um 12:32

    Danke Dirk für den Link – klasse Effekte, wenn auch mein Notebook etwas zuviel Last hatte… :-)
    Man muss die hier dargestellte Technik nur richtig verwenden…

    Ebenfalls sage ich Danke für dieses Tutorial! Ich finde es gut, diese Javascript-Spielerei an einem einfachen wenn auch praxis-untauglichen Beispiel verstehen lernen zu können! Und wer weiß wofür man das alles noch gebrauchen kann…

  21. Heiko Philipp am 22. Januar 2010 um 12:38

    hi,
    sehr gut beschrieben.
    aber leider braucht niemand diesen effekt…

  22. Jannik am 22. Januar 2010 um 18:00

    Nunja, ich denke, dass der Effekt, wenn man ihn entsprechend dezent und hübsch einsetzt, z. B. in der Weihnachtszeit mit Schneeflocken vielleicht ganz lustig sein kann.

    Das Problem an diesem Beispiel – das übrigens sehr schön beschrieben ist – ist, dass die Demo etwas unvorteilhaft aussieht. Hätte man sich dort in Richtung Design mehr Mühe gegeben (und nicht so klobige Clip-Arts verwendet hätte), wäre die Akzeptanz vermutlich auch höher.

  23. freido am 24. Januar 2010 um 22:42

    …ich finde das Tutorial wirklich nicht schlecht.

    Vielleicht liegts auch daran dass ich mir das ganze mit eigenen , hübsch angepassten Symbolen oder Grafiken vorstellen kann – und mich nicht (wie der ein oder andere Kommentator) von bunten Torten oder knallbunten divs ablenken lasse.

    danke und weiter so

  24. Marko am 21. Mai 2010 um 13:57

    Also, ich finde, dieses Tutorial ist doch eigentlich super geschrieben!?
    Ich weiß nicht wirklich, wieso hier alle am Verfasser herummeckern.
    Immerhin hat er’s nur dargestellt, dass es soetwas gibt und wie soetwas funktioniert. Und das – meiner Meinung nach – sogar wirklich nicht schlecht.

    Ob man es verwendet, ist einem doch komplett selbst überlassen…? Hier wird doch niemandem etwas aufgezwungen?

    Außerdem gibt es mit Sicherheit Anwendungsgebiete. Und wenn man es vernünftig programmiert dann stört’s auch niemanden.
    Wie Jannik schon sagte, ich denke z.B. auch, dass so ein Effekt für “temporäre Specials” ein ganz witziges Gimmick sein kann. Wenn man’s denn nicht übertreibt.
    In MAßEN, nicht in MASSEN, oder wie sagt man das so schön?

    Also, von mir gibt’s nen Daumen hoch für das Tutorial, besonders für die gründliche und sehr anschauliche Ausführung.

    Vielleicht hat er einigen Leuten (auf deren Webseiten ihr btw auch nicht zwingend gehen müsst, wir sind hier in einem freien Land, ne? ) den Tag versüßt und die freuen sich nun wahnsinnig über kleine Bildchen, die ihrem Mouse icon folgen.

    In dem Sinne,
    schönes Pfingstwochenende!

  25. […] Das ganze funktioniert mit Java Script und wer selber mal ausprobieren will, dem sei dieser Link wärmstens empfohlen: http://www.drweb.de/magazin/javascript-follow-mouse/ […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!