Div fade in/out basé sur l'interaction avec le site

Question

J'essaye de faire un div qui couvre le site pendant x secondes, puis disparaît lorsque le visiteur est actif sur la page. Le plus proche que je suis venu:

<div id="campaign"> 
 
</div> 
 

 
<style> 
 
/* campaign */ 
 

 
#campaign{ 
 
    display:block; 
 
    background:url() center center no-repeat; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: cover; 
 
    background-color: #ff0000; 
 
    overflow: visible; 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    position: fixed; 
 
    z-index: 2 !important; 
 
} 
 

 
#campaign:hover{ 
 
    cursor: pointer !important; 
 
} 
 
</style> 
 

 
<script> 
 
$("#campaign").click(function() { 
 
    $("#campaign").fadeOut("fast", function() { 
 
    // Animation complete. 
 
    }); 
 
}); 
 
</script>

Il couvre maintenant la page, et disparaît lorsque vous cliquez dessus. J'ai besoin d'un fondu en cas d'interaction sur la page et de fondu en l'absence d'interaction, ce qui signifie que si l'utilisateur accède à un autre onglet de son navigateur, la campagne # sera rendue visible quand il reviendra sur la page. disparaît à nouveau lorsqu'ils interagissent avec le site.

Des suggestions? Merci!

Answer 1

Vous devez mettre en œuvre un temporisateur inactif qui est une bibliothèque complète pouvant être affichée à https://github.com/thorst/jquery-idletimer mais vous pouvez créer votre propre logique en fonction de cela.

Answer 2

trouvé une solution:

<script> 
 
var timer; 
 
$(document).mousemove(function() { 
 
    if (timer) { 
 
     clearTimeout(timer); 
 
     timer = 0; 
 
    } 
 

 
    $('#campaign:visible').fadeOut(); 
 
    timer = setTimeout(function() { 
 
     $('#campaign').fadeIn() 
 
    }, 3000) 
 
}) 
 
</script>