Trick # 396 | Dieser Beitrag beinhaltet 432 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Internetbrowser aller Couleur erlauben seit etlichen Jahren, mehrere Tabs, auf welchen Websites zeitweilig im Hintergrund aktiv gehalten werden können. Deren Tab lässt sich auf einfache Weise animieren. Damit gewinnt Ihr Webcontent Aufmerksamkeit in der ansonsten statischen Umgebung.
Die ganze Sache ist gar nicht mal so schwierig. Sie benötigen bloss ein Script, welches Sie dem <head>-Bereich Ihrer Website hinzufügen. Falls Sie das Divi-Theme verwenden, geht das ganz einfach über Divi/Theme-Optionen/Integration.
Hier der Script-Code:
<script>
var focusTitle = $('head title').text(); // Originaler Title wird gespeichert
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 = 'Dr. Code'; // Erste Anzeige im Tab
break;
case 1: document.title = 'Internet - bloss einfacher'; // Zweite Anzeige im Tab
}
}, 1000); // Zeit (Millisekunden) bis zum Wechsel der Anzeigen
break;
case 'focus':
clearInterval(tab);
document.title = focusTitle; // Originaler Title einsetzen
break;
}
}
$(this).data('prevType', e.type);
});
</script>Auf Zeile 12 können Sie den ersten Tab-Text anpassen – auf Zeile 14 den zweiten. Auf Zeile 16 können Sie definieren, nach wievielen Millisekunden zwischen den Texten hin und her gewechselt wird. Derzeit steht dort 1000 Millisekunden – also 1 Sekunde.
Der Code wird erst aktiv, wenn Sie die betreffende Website im Browser geöffnet haben und dann zusätzlich einen anderen Tab aktivieren. Dann wird «Ihr» Tab animiert.
Werbung
Werbung
