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.

focusTitle = $('head title').text(); // Originalen Title speichern
$(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.