Here's a code snippet you can try:
<head>
<script>
window.onload = function () {
window.setTimeout(disappearText,2000); // wait for 2 seconds before disappearing
}
function disappearText() {
document.getElementById('fadeaway').style.opacity = '0';
}
</script>
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#fadeaway {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#fadeaway img {
width: 100%;
height: auto;
}
.full-background {
position: relative;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
}
.grid__item {
height: 50px;
}
.myimage {
height: 100%;
width: auto;
}
</style>
</head>
<body>
<div id="fadeaway">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
<div class="grid__item">
<div class="full-background">
<img src="http://i65.tinypic.com/5nn1va.jpg" class="myimage">
</div>
</div>
</body>
I believe this solution should work for you.
Let me know if you encounter any issues. I'll be happy to assist you in resolving them :)
Disclaimer: This code snippet has been customized for your specific requirements and usage may vary depending on your website's structure and other factors. It is recommended to test the code thoroughly before implementing it on a live site.
Update:
If you only want the full-screen picture to vanish, you can use even less code:
<head>
<script>
window.onload = function () {
window.setTimeout(disappearText,2000); // wait for 2 seconds before disappearing
}
function disappearText() {
document.getElementById('fadeaway').style.opacity = '0';
}
</script>
<style>
#fadeaway {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: auto;
opacity: 1;
z-index:1000;
margin: 0 auto;
transition: opacity .5s linear;
}
#fadeaway img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="fadeaway">
<img src="http://i65.tinypic.com/5nn1va.jpg">
</div>
</body>
You may need to add another line in the `disappearText()` function:
document.getElementById('fadeaway').style.zIndex = "0";
However, try using the code above first.
Update_2:
To replace the script in the head section with the following:
window.onload = function () {
window.setTimeout(disappearText,2000); // wait for 2 seconds before disappearing
}
var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
screensaver();
}
}
function disappearText() {
document.getElementById('fadeaway').style.opacity = '0';
document.getElementById('fadeaway').style.zIndex = '-1';
}
function screensaver() {
document.getElementById('fadeaway').style.zIndex = "1000";
document.getElementById('fadeaway').style.opacity = "1";
}
function resetTimer() {
if(_idleSecondsCounter >= IDLE_TIMEOUT) {
disappearText();
}
_idleSecondsCounter = 0;
}
document.onclick = function() {
resetTimer();
};
document.onmousemove = function() {
resetTimer();
};
document.onkeypress = function() {
resetTimer();
};
You'll probably need to adjust the `IDLE_TIMEOUT` value. It's currently set to 5 seconds for testing purposes. I recommend setting it to one minute or more. The "screensaver" should disappear if the mouse is moved, a mouse click occurs, or a key on the keyboard is pressed.