I want to grab user attencion back to the website when hes in different tab, so i would like to recreate effect from sephora.pl
If you tab out you see an nice alert as title ('What are you waiting for?'), and then back to page title. Effect stops when you are on the page again. I managed to create this parts and i stuck. Any idea how to make it blink?
$(function() {
// Get page title
var pageTitle = $("head title").text();
// Change page title on blur
$(window).blur(function() {
$("title").text("Come back to us");
// Somehow make it blink between Come back to us and pageTitle every 1200ms or so...
});
// Change page title back on focus
$(window).focus(function() {
$("title").text(pageTitle);
});
});
You could use plain javascript. Something like this;
let defaultTitle = document.title
window.onblur = () => {
//change title, blink title, whatever
document.title = "New title"
}
window.onfocus = () => {
//back to default title
document.title = defaultTitle
}
BTW, yeh, I've seen it on Alibaba, so guess it do increase leads.
Ok, so after small-talks in commentary section i managed to make it work like this:
const orginalTitle = $(document).prop('title');
function flashText() {
const newTitle = ('Back to us!');
if ($(document).prop('title') === orginalTitle) {
document.title = newTitle;
} else {
document.title = orginalTitle;
}
}
$(function changeTitle() {
let nIntervId;
$(window).blur(function() {
if (!nIntervId) {
nIntervId = setInterval(flashText, 1100);
}
});
$(window).focus(function() {
clearInterval(nIntervId);
nIntervId = null;
$("title").text(orginalTitle);
});
});