Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Title-Tag des inaktiven Browser-Tabs animieren

Eine Bewegung in einer ansonsten statischen Umgebung zieht den Blick auf sich. Der <title>-Tag einer Website, der im Browser-Tab angezeigt wird, ist in der Regel statisch und somit eher unauffällig. Wir archivieren in diesem Beitrag ein jQuery-Snippet, mit dessen Hilfe ihr den Inhalt des im Hintergrund geöffneten Browser-Tabs austauscht und auf Wunsch animiert.

Text im Browsertab mit jQuery austauschen

Mit dem nachfolgenden Snippet könnt ihr, wie angekündigt, den Text des <title>-Tags, austauschen, sobald der Browser-Tab bzw. das Browserfenster nicht mehr im Vordergrund geöffnet ist.

var focusTitle = $('head title').text(); // Originalen Title speichern
var tab = 0;
$(window).on('blur focus', function(e) {
 var prevType = $(this).data('prevType'); 
 if (prevType != e.type) {
   switch (e.type) {
     case 'blur':
     var i=0;
     tab = setInterval(function() {
       switch(i++%2) {
         case 0: document.title = 'Wir sind'; // Erste Anzeige im Tab
         break;
         case 1: document.title = 'kulturbanause'; // Zweite Anzeige im Tab
       }
     }, 1000); // Zeit zwischen dem Wechsel der Anzeigen
     break;
     case 'focus': 
       clearInterval(tab);
       document.title = focusTitle; // Originalen Title einsetzen
     break;
   }
 }
 $(this).data('prevType', e.type);
});

Beispiel anschauen

Voraussetzung für die Funktionsweise des Codes ist, dass ihr eine Version von jQuery vor dem Snippet in eurer Website eingebunden habt. jQuery kann beispielsweise über den Hochverfügbarkeitsserver von Google eingebunden werden. Eine Anleitung dazu findet ihr auf Google Hostet Libraries.

Für den Fall, dass ihr mit WordPress arbeitet, zeigen wir euch in den Beiträgen WordPress: interne jQuery-Version über Google CDN im Footer laden und jQuery über WordPress laden wie ihr jQuery in WordPress einbindet.

Kurzerläuterung des Snippets

Das Snippet enthält einen »Switch« mit zwei Zuständen. Die Anzahl der Zustände kann auf eine beliebige Anzahl erweitert werden. Mit setInterval() gehen wir die angelegten Zustände im Sekundentakt nacheinander durch und tauschen über document.title = ''; den Text im <title>-Tag. Damit erscheint der Text im Browser-Tab animiert.

Die Funktion wird ausgeführt, sobald sich der Fokus-Zustand des Browserfensters ändert. Beim Wechsel zurück vom Hintergrund in den Vordergrund des Tabs bzw. Fensters wird wieder der ursprüngliche Text in den <title>-Tag eingesetzt. Dieser wurde nämlich beim ersten Seitenaufruf zwischengespeichert.

Geschrieben von Felix Lehmann

Benutzerbild

Als Web-Designer und Frontend-Developer bei kulturbanause umfasst Felix Hauptaufgabenbereich die Konzeption, Gestaltung und Umsetzung von Designsystemen. Scribble auf Papier, Prototyping im Design-Tool, schnellstmöglich in den Browser und mit CSS umsetzen. Auch das Überführen in ein Custom WordPress-Theme ist kein Problem. Die meiste Zeit verbringt er trotzdem damit die richtigen Klassennamen zu finden.

Feedback & Ergänzungen – 15 Kommentare

  1. Hamburger
    schrieb am 04.03.2021 um 23:55 Uhr:

    richtig cool, danke für die tipps, werde schauen, wie ich es in wordpress reinbekomme. tipps? gerne!

    Antworten
  2. Franz
    schrieb am 22.02.2021 um 23:02 Uhr:

    Moin,
    Ihr seid Experten in UX und empfehlt eine animierte Ablenkung in einem inaktiven Tab?

    Warum ist denn ein Tab inaktiv? Weil jemand was wichtigeres in den Vordergrund klickt. Was gibt es denn für einen Grund, dies nicht zu akzeptieren? Klar ist Tickertext im inaktiven Tab coole Scheiße, ich würde mir das aber trotzdem sehr genau überlegen, so eine Nervmaschine da rein zu packen.

    Antworten
    • Jonas Hellwig
      schrieb am 26.02.2021 um 15:32 Uhr:

      Hallo Franz, vielen Dank für deinen Kommentar. Wir sind 100% bei dir, dass ein solches Feature wohl überlegt eingesetzt werden sollte. Je nach Anwendungsfall wäre es möglicherweise schon fast ein Dark Pattern. Allerdings geht es darum in diesem Beitrag nicht. Wir empfehlen nicht die animierte Ablenkung, sondern wir beschreiben, wie man den Title-Tag animiert. Was man daraus macht, kann ja sehr unterschiedlich sein. Ein natives Browser-Feature wie die Anzeige von abspielendem Audio ist auch animiert, wenn der Tab inaktiv ist.

      Antworten
      • TF
        schrieb am 11.04.2021 um 12:21 Uhr:

        Moin! Weiß jemand, wie man dieses – aus meiner Sicht unglaublich nervige und aggressive – Feature von anderen Webseiten blockieren kann? Der Adblocker springt darauf leider nicht an und im Chrome Browser finde ich auch keine Einstellung dazu.
        LG!

  3. Thomas
    schrieb am 27.11.2020 um 00:13 Uhr:

    Wir haben es genauso umgesetzt, die Konsole schmeißt aber ab und zu folgende Fehlermeldung.

    Uncaught ReferenceError: tab is not defined

    Ist das bekannt, wie kann man das fixen?

    Antworten
    • Felix Lehmann
      schrieb am 27.11.2020 um 10:25 Uhr:

      Hallo Thomas, diesen Fehler könnt ihr beheben, indem ihr die Variable tab außerhalb der Funktion schon einmal definiert. Wir haben das im Snippet entsprechend ergänzt.

      Antworten
  4. Stephan Römer
    schrieb am 18.08.2020 um 07:46 Uhr:

    Ein nettes Feature, aber wirklich von Nutzen ist dies nicht. Ich glaube nicht, dass dies einen Nutzer vom Schließen des Tabs abhält. Auf mobilen Geräten ist dieser ja noch nicht einmal zu sehen. Außerdem wird durch das Script der Code aufgebläht.

    Antworten
    • Jonas Hellwig
      schrieb am 18.08.2020 um 14:49 Uhr:

      Hallo Stephan, es soll ja auch nicht davon abhalten den Tab zu schließen, sondern auf inaktive Tabs aufmerksam machen. In diesem Zusammenhang kann der Effekt recht wirkungsvoll sein – sichtbare Tabs natürlich vorausgesetzt. Von aufgeblähtem Code würde ich bei ca. 20 Zeilen JS noch nicht sprechen.

      Antworten
  5. Web Analytics
    schrieb am 12.07.2019 um 10:22 Uhr:

    Das ist wirklich eine gute Idee! Gerade wo so viele Nutzer mit vielen Tabs parallel surfen, ist das eine schöne Möglichkeit um aufzufallen. booking.com nutzt das ja zum Beispiel auch erfolgreich.

    Antworten
  6. dennis
    schrieb am 08.05.2019 um 08:26 Uhr:

    Ganz ehrlich, was soll das?
    Da werden Daten geladen, die nur für diese völlig unnötige Funktion benötigt wird. Wenn man dann noch weiß, dass es mobil gar nicht erst zu sehen ist….

    Antworten
  7. Webdesign Hildesheim
    schrieb am 17.04.2019 um 13:34 Uhr:

    Wow super Idee, ich bin ein Fan von Animationen, wenn sie gut und sinnvoll eingesetzt werden und nicht vom eigentlichen Thema ablenken. Oftmals sind es die kleinen Dinge die den Unterschied machen. Auch in diesem Moment wandert mein Blick gerade nach oben in den Browsertab weil ich die Demoseite noch nicht geschlossen habe es tut also genau das was es soll. Aufmerksamkeit schaffen! Ich werde es auf meiner Seite auch ausprobieren ! Danke

    Antworten
  8. Peter
    schrieb am 12.02.2018 um 01:36 Uhr:

    Danke für diese Idee!
    Nun ist es eigentlich mehr „Spielkram“ wie ich finde, aber so ein Eye-Catcher hat dann dennoch Potential. So kann man den ein odere anderen Tab doch noch vor dem Schließen bewaren, und die Verweildauer erhöhen.
    Ich denke, dass werde ich mal bei einem Projekt ausprobieren.

    Antworten
  9. Bernd
    schrieb am 16.01.2018 um 13:49 Uhr:

    danke, aber wo genau kommt der Snippet jetzt hin?
    Ich verwende das WP-Plugin Code-Snippets (https://de.wordpress.org/plugins/code-snippets/), in das ich alle Snippets einbaue, die normalerweise in die functions.php des jeweiligen Themes kommen.
    Allerdings funktioniert es SO mit dem o.g. Snippet nicht; ich bin jetzt kein Coder, aber eine Function ist das oben nicht?

    Antworten
    • Jonas Hellwig
      schrieb am 16.01.2018 um 14:33 Uhr:

      Der Code ist ja JavaScript – ich denke das funktioniert nicht mit deinem Plugin, da dieses nur PHP erwartet.

      Antworten
      • Bernd
        schrieb am 16.01.2018 um 14:36 Uhr:

        okay, danke, aber wie baut man dann deinen Code bitte in eine WP-Installation ein?

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →