Title-Tag des inaktiven Browser-Tabs animieren
In diesem Beitrag zeigen wir euch ein jQuery-Snippet mit dem ihr den Text des Title-Tags eines inaktiven Browserfensters austauscht und animiert.

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);
});
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.
richtig cool, danke für die tipps, werde schauen, wie ich es in wordpress reinbekomme. tipps? gerne!
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.
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.
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!
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?
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.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.
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.
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.
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….
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
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.
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?
Der Code ist ja JavaScript – ich denke das funktioniert nicht mit deinem Plugin, da dieses nur PHP erwartet.
okay, danke, aber wie baut man dann deinen Code bitte in eine WP-Installation ein?