kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

15 Kommentare

  1. Bernd

    Verfasst am 16. Januar 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?

    • Jonas Hellwig

      Verfasst am 16. Januar 2018 um 14:33 Uhr.

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

      • Bernd

        Verfasst am 16. Januar 2018 um 14:36 Uhr.

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

  2. Peter

    Verfasst am 12. Februar 2018 um 1: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.

  3. Webdesign Hildesheim

    Verfasst am 17. April 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

  4. dennis

    Verfasst am 8. Mai 2019 um 8: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….

  5. Web Analytics

    Verfasst am 12. Juli 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.

  6. Stephan Römer

    Verfasst am 18. August 2020 um 7: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.

    • Jonas Hellwig

      Verfasst am 18. August 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.

  7. Thomas

    Verfasst am 27. November 2020 um 0: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?

    • Felix Lehmann

      Verfasst am 27. November 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.

  8. Franz

    Verfasst am 22. Februar 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.

    • Jonas Hellwig

      Verfasst am 26. Februar 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.

      • TF

        Verfasst am 11. April 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!

  9. Hamburger

    Verfasst am 4. März 2021 um 23:55 Uhr.

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.