Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Sven Drieling 21. Januar 2010

JavaScript Tutorial: Eine effektvolle Mausspur mit Follow Mouse

Die Mausspur ist ein reich­lich ver­spiel­ter Effekt, den es auch schon zu DHTML-Zeiten gege­ben hat. Der Mauszeiger wird von ein­zel­nen Bildern oder Buchstaben ver­folgt. Der auf­fäl­li­ge Effekt kann für sich selbst ste­hen oder eine kur­ze Botschaft trans­por­tie­ren. Das Tutorial erklärt aus­führ­lich das nöti­ge Scripting.

Follow Mouse - Demo

Follow Mouse – Demo

Beispiel: Follow Mouse – Live Demo plus Quelltext (neu­es Fenster)

Grundidee

Follow Mouse - Divs

Follow Mouse – Divs

Die Grundidee für den Follow Mouse-Effekt besteht dar­in, die Verfolgerelemente in einem Array zu spei­chern fol­low = [el1, el2, el3], bei jeder Mausbewegung die Positionen an das jeweils nach­fol­gen­de Element wei­ter­zu­ge­ben und das ers­te Element auf die aktu­el­le Position des Mauszeigers zu set­zen: el3.pos = el2.pos; el2.pos = el1.pos; el1.pos = mouse.pos;

Beispiel: DIVs – Live Demo plus Quelltext (neu­es Fenster)

So direkt umge­setzt hat das drei Nachteile:

  1. Mausklicks funk­tio­nie­ren nicht mehr
  2. Die Elemente lie­gen so dicht auf­ein­an­der, dass der Effekt kaum
    sicht­bar ist
  3. Wenn der Mauszeiger steht, blei­ben auch die Verfolger ste­hen

Mausklicks

Damit bei Mausklicks nicht auf die Verfolgerelemente geklickt wird, wer­den sie mit etwas Abstand nach rechts/unten ver­setzt vom Mauszeiger posi­tio­niert.

// 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 klei­ne räum­li­che Abstand lässt sich ver­mei­den, in dem nicht jede Mausbewegung zur Weitergabe der Verfolgerpositionen führt, son­dern nur Mausbewegungen mit einem Mindestabstand von zum Beispiel 50 Punkten.

Zur Berechnung des Abstandes wird die Länge des Vektors von der aktu­el­len Mausposition zum ers­ten 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 lie­gen die Verfolger nicht mehr auf­ein­an­der, blei­ben aber wei­ter­hin zusam­men mit dem Mauszeiger ste­hen.

Beispiel: Abstand – Live Demo plus Quelltext (neu­es Fenster)

Follow Mouse - Zeitgeber

Follow Mouse – Zeitgeber

Statt also die Mausbewegung als Signal zur Weitergabe der Positionen zu benut­zen, kommt ein Zeitgeber ins Spiel, der alle x-Zeiteinheiten die Routine zur Aktualisierung der Positionen auf­ruft. Je län­ger die­ser zeit­li­che Abstand ist, des­to grö­ßer ist bei (schnel­len) Mausbewegungen auch der räum­li­che. Mit einem zeit­li­chen Abstand von 100ms bis 170ms funk­tio­niert das gut. Und wenn nun der Mauszeiger steht, blei­ben die Verfolger erst ste­hen, wenn sie alle den Mauszeiger erreicht haben. Der Mousemove-Handler dient nun nur noch dazu die aktu­el­le Mausposition in mousePos zu spei­chern.

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 (neu­es Fenster)

Follow Mouse - Zeitgeber plus Abstand

Follow Mouse – Zeitgeber plus Abstand

Als drit­te Möglichkeit kön­nen bei­de Varianten kom­bi­niert wer­den. Der Zeitgeber sorgt dafür, dass die Verfolger nicht ste­hen blei­ben und der räum­li­che Mindestabstand dafür, dass die Elemente nicht zu dicht auf­ein­an­der lie­gen. Gegenüber der zwei­ten Variante ergibt sich dar­aus kein bes­se­rer Effekt, son­dern nur ein Mehr an Programmierung, wes­halb die fol­gen­den Beispiele nur den Zeitgeber benut­zen.

// 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 (neu­es Fenster)

Optische Verbesserung

Scrollbereich sichtbar

Follow Mouse – Scrollbereich sicht­bar

Wenn die Verfolger über den rech­ten oder unte­ren Rand hin­aus­ge­hen, ver­grö­ßert sich das Dokument und der Webbrowser zeigt einen Scrollbereich an, für den eigent­lich kein Inhalt exis­tiert – was nicht beson­ders gut aus­sieht.

Verfolger bleiben innerhalb des Dokuments

Follow Mouse - Verfolger bleiben Innerhalb

Follow Mouse – Verfolger blei­ben Innerhalb

Eine ein­fa­che Lösung hier­für liegt dar­in, die Verfolger so zu plat­zie­ren, dass sie immer kom­plett im Dokument sicht­bar sind. Dazu wird die Breite und Höhe des Dokuments ermit­telt 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 pas­sen­de Größe des Dokuments lie­fert jQuery mit

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

Beispiel: Rand – Live Demo plus Quelltext (neu­es Fenster)

Verfolger an den Rändern abschneiden

Follow Mouse - Abschneiden

Follow Mouse – Abschneiden

Mit dem Platzieren der Verfolger inner­halb des Dokuments wird die unschö­ne Vergrößerung des Dokuments ver­hin­dert – aller­dings “kle­ben” die Verfolger nun auch nicht beson­ders ansehn­lich am rech­ten und unte­ren Rand fest. Im nächs­ten Beispiel wer­den die über den Rand hin­aus­ra­gen­den Bereiche der Verfolger daher abge­schnit­ten.

Zum Abschneiden wird berech­net wie­weit die Verfolger über die Ränder hin­aus­ra­gen und ihre Größe dann pas­send redu­ziert.

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 (neu­es Fenster)

Text

Follow Mouse - Verfolgt von Buchstaben

Follow Mouse – Verfolgt von Buchstaben

Für den Verfolgertext wird für jeden Buchstaben ein DIV mit over­flow: hid­den erzeugt, so dass das DIV-Element ver­klei­nert wer­den kann, ohne dass etwas über des­sen Ränder hin­aus­ragt, der Buchstabe dort hin­ein­ge­legt und die Hintergrundfarbe der DIVs auf trans­pa­rent gesetzt. (trans­pa­rent ist zwar der Vorgabewert aber der könn­te per Stylesheet glo­bal für alle DIV-Elemente geän­dert 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 hin­zu­ge­kom­men ist außer­dem das Item-Objekt. Dieses erleich­tert den Zugriff auf die Positionen und Größen der Verfolger und es wird benö­tigt, um die Originalgröße der Verfolger zu spei­chern. Im DIV-Element wird die­se ja an den Rändern redu­ziert und geht dort dann für wei­te­re Berechnungen ver­lo­ren.

// 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 (neu­es Fenster)

Bilder

Follow Mouse - Verfolgt von Grafiken

Follow Mouse – Verfolgt von Grafiken

Gleiches geschieht bei den Bildern. DIV mit over­flow: hid­den erzeu­gen, Bild hin­ein­le­gen und Hintergrund des DIVs auf trans­pa­rent set­zen. Zusätzlich nutzt das Skript einen Preloader für die Bilder, so dass sie erst hin­zu­ge­fügt wer­den, wenn alle gela­den sind.

Da das Laden asyn­chron erfolgt, ist das Initialisieren der Bilder in die Funktionen pre­l­oadi­mages() und initImages() auf­ge­teilt. Wenn der Preloader alle Bilder erfolg­reich gela­den hat, gibt er sie an initImages() wei­ter. Dort wer­den die DIVs erzeugt, hin­zu­ge­fügt und der Zeitgeber gestar­tet.

Falls beim Laden etwas schief geht, wird im Preloader eine Exception gewor­fen und der Follow Mouse-Effekt bleibt inak­tiv. So sind immer alle oder kei­ne 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 (neu­es 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 die­se Probleme haben ich kei­ne Feature-Erkennung gefun­den. Stattdessen wer­den die IE-Versionen per Conditional Comment ermit­telt und im Skript abge­fragt.

<!--[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 lie­fert im IE 6/8 nur die rich­ti­ge Breite und Höhe des Dokuments wenn im Webbrowser kei­ne Scrollbalken vor­han­den sind. Ansonsten ent­hal­ten die Größenangaben zusätz­lich die Breite und Höhe der Scrollbalken und sind dann zu groß.

Nicht vor­han­den sind die Scrollbalken, wenn die inne­re Größe des HTML-Elements und die Größe des Dokuments gleich groß sind. In die­sen Fällen wird statt der Größe des Dokuments die des inne­ren 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 feh­len­de Transparenz bei PNG-Bildern bie­tet der IE den IE-spe­zi­fi­schen AlphaImageLoader-Filter. Um die­sen zu nut­zen wird ein DIV erzeugt, für die­ses DIV der Filter gesetzt und nun statt des Image-Elements die­ses DIV-Element dem Verfolger-DIV hin­zu­ge­fü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 (neu­es Fenster)

IE-Anpassungen benut­zen?
Für die IE-Anpassungen wer­den bestimm­te Webbrowserversionen abge­fragt. Dies ist ein schlech­ter Programmierstil. Es stellt sich die Frage, ob man die Anpassungen trotz­dem benutz­ten soll­te.

Eine Alternative zu PNG-Grafiken mit 32-Bit sind GIFs und PNG8-Grafiken. Sofern sich die Grafiken für maxi­mal 256 Farben eig­nen ist das eine gute Lösung, die ohne brow­ser­spe­zi­fi­sche Anpassungen funk­tio­niert. In den ande­ren Fällen ist aber auch die IE <= 6-Abfrage mei­ner Ansicht nach brauch­bar, da nur jene alten IE-Versionen betrof­fen sind und schon heu­te ab dem IE 7 die Anpassung nicht benutzt wird, so dass die Anpassung mit etwas Glück zukunfts­si­cher ist.

Die Alternative zur Korrektur der Dokumentgröße besteht dar­in im IE die feh­ler­haf­te Größe zu benut­zen. Da der Unterschied nicht all­zu sehr auf­fällt, hal­te ich das für bes­ser als die Browserabfrage zu benut­zen. Mit neue­ren Versionen des IE löst sich das Problem mög­li­cher­wei­se von selbst.

Konstruktor-Funktion

Im fer­ti­gen Demoskript ist das Ganze in eine Konstruktor-Funktion ein­ge­kap­selt, so dass bis auf DrWeb der glo­ba­le Namensraum unbe­rührt bleibt.

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

DrWeb.Followmouse = function(options) {

Das Objekt wird mit new DrWeb.Followmous(options) erzeugt. Im opti­ons-Parameter wer­den die Bilder oder der Text über­ge­ben und der Effekt mit start() akti­viert und mit stop() wie­der been­det.

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 (neu­es Fenster)

Benutzerfreundlichkeit

Eine Website mit dem Follow Mouse-Effekt sieht auf den ers­ten Blick gut aus. Auf Dauer kann es aller­dings stö­ren, wenn Bildern und Buchstaben wich­ti­ge Seitenbereiche ver­deckt wer­den. Das gilt beson­ders für das Markieren von Text. Es ist daher sinn­voll den Effekt spar­sam ein­zu­set­zen. Zum Beispiel aus­schließ­lich auf einer Startseite oder nur auf min­der wich­ti­gen Seiten. Man kann ihn aber auch nach einer Weile aus­blen­den und erst erneut akti­vie­ren, wenn die Seite neu auf­ge­ru­fen 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 unte­ren Randes.
  • IE 7: Verhält sich auch ohne Anpassung so wie alle ande­ren Webbrowser.

Material zum Download

Zip-Archiv mit allen aus­führ­ba­ren Beispielen inklu­si­ve 5 Grafiken aus dem Yummy-Iconset von IconEden.

Links

(sl)

Sven Drieling

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

READY.
[]

24 Kommentare

  1. Also, ich fin­de, die­ses Tutorial ist doch eigent­lich super geschrie­ben!?
    Ich weiß nicht wirk­lich, wie­so hier alle am Verfasser her­um­me­ckern.
    Immerhin hat er’s nur dar­ge­stellt, dass es soet­was gibt und wie soet­was funk­tio­niert. Und das – mei­ner Meinung nach – sogar wirk­lich nicht schlecht.

    Ob man es ver­wen­det, ist einem doch kom­plett selbst über­las­sen…? Hier wird doch nie­man­dem etwas auf­ge­zwun­gen?

    Außerdem gibt es mit Sicherheit Anwendungsgebiete. Und wenn man es ver­nünf­tig pro­gram­miert dann stört’s auch nie­man­den.
    Wie Jannik schon sag­te, ich den­ke z.B. auch, dass so ein Effekt für “tem­po­rä­re Specials” ein ganz wit­zi­ges Gimmick sein kann. Wenn man’s denn nicht über­treibt.
    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, beson­ders für die gründ­li­che und sehr anschau­li­che Ausführung.

    Vielleicht hat er eini­gen Leuten (auf deren Webseiten ihr btw auch nicht zwin­gend gehen müsst, wir sind hier in einem frei­en Land, ne? ) den Tag ver­süßt und die freu­en sich nun wahn­sin­nig über klei­ne Bildchen, die ihrem Mouse icon fol­gen.

    In dem Sinne,
    schö­nes Pfingstwochenende!

  2. …ich fin­de das Tutorial wirk­lich nicht schlecht.

    Vielleicht liegts auch dar­an dass ich mir das gan­ze mit eige­nen , hübsch ange­pass­ten Symbolen oder Grafiken vor­stel­len kann – und mich nicht (wie der ein oder ande­re Kommentator) von bun­ten Torten oder knall­bun­ten divs ablen­ken las­se.

    dan­ke und wei­ter so

  3. Nunja, ich den­ke, dass der Effekt, wenn man ihn ent­spre­chend dezent und hübsch ein­setzt, z. B. in der Weihnachtszeit mit Schneeflocken viel­leicht ganz lus­tig sein kann.

    Das Problem an die­sem Beispiel – das übri­gens sehr schön beschrie­ben ist – ist, dass die Demo etwas unvor­teil­haft aus­sieht. Hätte man sich dort in Richtung Design mehr Mühe gege­ben (und nicht so klo­bi­ge Clip-Arts ver­wen­det hät­te), wäre die Akzeptanz ver­mut­lich auch höher.

  4. hi,
    sehr gut beschrie­ben.
    aber lei­der braucht nie­mand die­sen effekt…

  5. Danke Dirk für den Link – klas­se Effekte, wenn auch mein Notebook etwas zuviel Last hat­te… :-)
    Man muss die hier dar­ge­stell­te Technik nur rich­tig ver­wen­den…

    Ebenfalls sage ich Danke für die­ses Tutorial! Ich fin­de es gut, die­se Javascript-Spielerei an einem ein­fa­chen wenn auch pra­xis-untaug­li­chen Beispiel ver­ste­hen ler­nen zu kön­nen! Und wer weiß wofür man das alles noch gebrau­chen kann…

  6. Demnächst kommt noch ein Artikel:
    “Wie effekt­voll ist Tabellenlayout ohne CSS, aber mit HTML 1.”
    Superbeitrag mit tol­len Beispielen, Danke. So ver­liert man Leser.

  7. wenn ich mir das anse­he dann kom­me ich mir wie­der jung vor … es ist ein biss­chen so als ob man eine Zeitreise gemacht hät­te.

    Ich den­ke das es wirk­lich kei­ne sinn­vol­le Verwendung für die­sen Effekt gibt. Höchstens als Spielerei und dann hat man es auch nach 20 Sekunden über.
    Als “Fingerübung” geeig­net …

  8. Das ist oft­mals das Problem bei Javascript-Tutorials. Man will es als Autor ja erst ein­mal leicht hal­ten, damit der Leser es nach­voll­zie­hen kann.

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

  9. Danke Dirk, die Beispiele sind tat­säch­lich etwas bei denen ich der Technik einen gewis­sen Mehrwert aner­ken­nen kann.

    Das ist ver­mut­lich die größ­te Schwäche des Tutorials. Die Beispiele zei­gen nur die Negativseiten wegen denen man die Anwendung ver­teu­feln wür­de. Beispiele die eine prak­ti­sche Seite zei­gen hät­ten das Tutorial gleich in ein ganz ande­res Licht gerückt.

  10. “Oder bestimm­te Seiten-Elemente (Buttons etc.), die im wahr­schein­li­chen Weg des Mauszeigers lie­gen, mit einem Lupen-Effekt her­vor­zu­he­ben, um den Besucher auf der Seite zu füh­ren?”

    Genau der sinn­vol­le Einsatz die­ser Technik, die hier ja aus­führ­lich beschrie­ben wird: Ein fest­ge­leg­ter Bereich, in dem die Mausspur genutzt wird, um für eine Vergrößerung zu sor­gen, wie etwa bei einer Landkarte, ect. pp.

  11. Was zur Hölle soll den die­ser Unsinn? Das inter­es­san­tes­te an die­sem Post sind die Kommentare. Für den Autor for­de­re ich die Höchststrafe: Netzzugang sper­ren!

  12. 2002 hat ange­ru­fen, es will sei­ne Javascript-Spielereien zurück. Ich habe gescrollt und gescrollt und die Pointe gesucht …

  13. Oh toll, werd ich sofort auf mei­ne Website set­zen.
    Sagt mir bit­te jemand, wie ich über­di­men­sio­nal gro­ße, blin­ken­de GIF Grafiken erstel­len 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 haupt­sa­che mei­ner Maus fol­gen jetzt noch bun­te Bildchen die regel­mä­ßig blin­ken!!!

    [// Ironie aus]

    Zurück in die 90er was Webdesign angeht?

  14. Nicht abschalt­ba­re Musik, dre­hen­de @’s und die Mausspur gehö­ren zu (Stil)elementen des unters­ten Levels.
    Was hat das Anno 2010 auf Dr. Web zu suchen??? Das ist ja noch schlim­mer als Modern Talking oder Marianne Rosenberg aus der Musiktruhe her­vor­zu­kra­men.
    Bitte Bitte, lie­ber Sven, lass das Team Ideenreich wie­der aus der Kiste! ;-)

  15. Somit hat Dr.Web gera­de wie­der an Seriösität ver­lo­ren :D
    Seit froh, dass ihr noch euer Smashing Magazine habt, denn die­se Seite scheint echt den Bach run­ter­zu­ge­hen. :\

  16. Schön geschrie­ben! Allerdings fehlt mir momen­tan eben­falls der Nutzen.

    Was kann ich mit einer Mausspur anfan­gen? Außer natür­lich, mich nach etwa 5 Sekunden über sie zu ärgern…

    Wäre der Follow-Mouse-Effekt ohne Mausspur nicht viel wir­kungs­vol­ler, wenn man Position und Weg des Mauszeigers auf­zeich­net, um das Besucherverhalten zu ana­ly­sie­ren?

    Oder bestimm­te Seiten-Elemente (Buttons etc.), die im wahr­schein­li­chen Weg des Mauszeigers lie­gen, mit einem Lupen-Effekt her­vor­zu­he­ben, um den Besucher auf der Seite zu füh­ren?

    Da ist bestimmt noch mehr drin, als nur bun­te Fähnchen hin­term Cursor.

    Obwohl: Für einen Anbieter von Aquaristik-Artikeln wäre es even­tu­ell pas­send, eine fast unmerk­li­che Spur von Wasserwellen hin­ter­her­zu­zie­hen. Es müs­sen ja kei­ne Torten sein… ;-)

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

    cu, w0lf.

  18. Also ich kann mich Manuel anschlie­ßen,
    außer das ich das damals auf pri­va­ten Seiten mal gese­hen hab.
    Meist im Hintergrund noch ein Pfeifkonzert per midi Datei…
    Ja das waren noch Zeiten… ;)

    Selbes Fazit:
    Gut auf­be­rei­tet aber lei­der ein Effekt den die Webwelt nicht (mehr) benö­tigt. *hope*

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

  20. Ich bin mir ziem­lich sicher, dass die Foren bald wie­der über­schwemmt wer­den mit Sites auf denen man einen sol­chen Effekt “bewun­dern” kann *seufz*

  21. Sehr aus­führ­lich beschrie­ben! Ich hof­fe aber, die­sen Mist nie irgend­wo zu Gesicht zu bekom­men ;)

  22. Wirklich ein vor­bild­li­cher aus­führ­li­cher und sehr ins Detail gehen­der Artikel.

    Aber: Der letz­te Absatz Benutzerfreundlichkeit deu­tet es bereits an. Eigentlich ist die­ser Javascripteffekt einer der zahl­rei­chen Designschnitzer die in exakt die­ser Gebrauchsform eigent­lich längst aus dem Netz ver­schwun­den sein soll­ten, anstatt des­sen Funktion noch wei­ter zu publi­zie­ren.

    Bis heu­te ist mir kei­ne ein­zi­ge Seite bekannt die die­se Technik jemals genutzt hät­te um dar­aus irgend­et­was auch nur im Ansatz sinn­vol­les zu gestal­ten.
    Immer war es nur eine nach weni­gen Sekunden unnö­tig stö­ren­de Spielerei ohne jeden Mehrwert.

    Schade um die Recherche und Arbeitszeit an die­sem Artikel :(

  23. Sorry, aber ich find das furcht­bar. Ein wirk­lich scheuß­li­cher Effekt, der mich dazu ver­an­las­sen wür­de, die Webseite sofort wie­der zu ver­las­sen.

Schreibe einen Kommentar zu Stephe Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.