Javascript fullscreen image on load, vanish after 2 seconds (screensaver after idle-time)

Question

I wanted to combine this function of showing a picture (our logo) on my Shopify frontage website fullscreen and make it fade away or vanish after seconds automatically so people can access to the website after the Image or our logo is gone (2 Sec).

Now I have these two parts of HTML, but they don't work together somehow.

Can someone help?

Thank you

<div id="makethisvanish"><img src="image"></div> 

 <div class="fixed-background">
        <img src="image" class="myimg">
    </div>



<script type="text/javascript"> 
window.onload = function () { 
window.setTimeout( vanishText, 2000 ); // 2000 is 2 seconds 
} 
function vanishText() { 
document.getElementById( 'makethisvanish' ).style.visibility = 'hidden'; 
} 
</script>


<style>
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.fixed-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.myimg {
    height: inherit;
}
</style>

So you want '97' image to be faded away in few seconds, not disappearing all of a sudden, do I understand right? — moon, Nov 29 '17 at 14:16
doing this in a pen works nicely: https://codepen.io/Kathara/pen/dZgBaG (added a little css...) — Kathara, Nov 29 '17 at 14:17
@Kathara you made a animation between more pictures, what I want is one picture(fullscreen) that disappears after seconds like here haw-lin-services.com — Mehmet Cevik'in, Nov 29 '17 at 14:34
No, That's not entirely correct. I just used some images to get the effect. But what they are doing on haw-lin-services is changing the opacity of the element that is above the others. Look again in my pen; I've adapted the code so that it's better distinguishable... (I didn't have your images that's why I just used two others...) — Kathara, Nov 29 '17 at 14:43
For the element "makeitvanish" instead of using position: relative use position: fixed then you can use the position: relative (instead of absolute) on the other element. — Kathara, Nov 29 '17 at 15:01
@Kathara. im absolutey a beginner, I think I tried but its actually not working so the image code is http://i65.tinypic.com/5nn1va.jpg this picture should be like a screensaver or just fade away after 2 seconds...am I explaining it correct? Just like the haw-lin site... — Mehmet Cevik'in, Nov 29 '17 at 15:08
@MehmetCevik'in yes, you are. I'll post an answer with a code snippet. — Kathara, Nov 29 '17 at 15:09

Kathara · Answer 1 · 2017-11-30T08:17:51.147

Try the code below:

<head>
  <script>
    window.onload = function () { 
      window.setTimeout(vanishText,2000); // 2000 is 2 seconds 
    } 
    function vanishText() { 
      document.getElementById('makethisvanish').style.opacity = '0';
    }
  </script>
  
  <style>
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #makethisvanish {
      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;
    }

    #makethisvanish img {
      width: 100%;
      height: auto;
    }

    .fixed-background {
      position: relative;
      top: 0;
      left: 0;
      height: 100%;
      overflow: hidden;
    }

    .grid__item {
      height: 50px;
    }

    .myimg {
      height: 100%;
      width: auto;
    }
  </style>
</head>
<body>

  <div id="makethisvanish">
    <img src="http://i65.tinypic.com/5nn1va.jpg">
  </div>

  <div class="grid__item">
    <div class="fixed-background">
      <img src="http://i65.tinypic.com/5nn1va.jpg" class="myimg">
    </div>
  </div>
</body>

I believe this should do?

Report back if you have a problem. I'll try to help you solve it ;)

EDIT

For only the full-screen picture you'll need even less:

<head>
  <script>
    window.onload = function () { 
      window.setTimeout(vanishText,2000); // 2000 is 2 seconds 
    } 
    function vanishText() { 
      document.getElementById('makethisvanish').style.opacity = '0';
    }
  </script>

  <style>

    #makethisvanish {
      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;
    }

    #makethisvanish img {
      width: 100%;
      height: auto;
    }

  </style>
</head>
<body>

  <div id="makethisvanish">
    <img src="http://i65.tinypic.com/5nn1va.jpg">
  </div>

</body>

Maybe you'll need another line in vanishText():

document.getElementById('makethisvanish').style.zIndex = "0";

But try with the code above first.

EDIT_2

replace the script in the head with the following:

window.onload = function () {
  window.setTimeout(vanishText,2000); // 2000 is 2 seconds
}

var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsCounter = 0;

window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
  _idleSecondsCounter++;
  if (_idleSecondsCounter >= IDLE_TIMEOUT) {
    screensaver();
  }
}

function vanishText() { 
  document.getElementById('makethisvanish').style.opacity = '0';
  document.getElementById('makethisvanish').style.zIndex = '-1';
}

function screensaver() {
  document.getElementById('makethisvanish').style.zIndex = "1000";
  document.getElementById('makethisvanish').style.opacity = "1";
}


function resetTimer() {
  if(_idleSecondsCounter >= IDLE_TIMEOUT) {
    vanishText();
  }
  _idleSecondsCounter = 0;
}

document.onclick = function() {
  resetTimer();
};

document.onmousemove = function() {
  resetTimer();
};

document.onkeypress = function() {
  resetTimer();
};

You'll probably have to adapt the IDLE_TIMEOUT. It's set to 5 seconds for testing. I would probably set it to one minute, maybe a bit more. The "screensaver" should dissappear if the mouse is moved, a mouseclick is done or a key on the keyboard is pressed.

You mean when nothing happens for some time then do the same thing again? — Kathara, Nov 29 '17 at 15:34
also the buttons don't work anymore...After disappear I am not able to click anywhere... — Mehmet Cevik'in, Nov 29 '17 at 15:38
have you added the line with zIndex? if yes try to change "0" to "-1" in the line of z-index. If this doesn't work report back. — Kathara, Nov 29 '17 at 15:40
exactly, if you don't move on the hawlin website it automatically loads back the Screensaver from the first load. If you want you can compare www.97cm.de with http://haw-lin-services.com — Mehmet Cevik'in, Nov 29 '17 at 15:40
It's probably possible to do it with the following solution: https://stackoverflow.com/a/10126042/5621032 — Kathara, Nov 29 '17 at 15:43
You helped already a lot! Would you be so kind and add it in one code so I can copy paste? otherwise I'm sinking in a chaos...I don't know where to put what :/ Thank you so much! — Mehmet Cevik'in, Nov 29 '17 at 15:58
https://97cm.de very good...but what have I done wrong again...I can not click on buttons again and the Screensaver is loading to fast and than never again... — Mehmet Cevik'in, Nov 29 '17 at 16:42
Ok try changing the following line: document.getElementById('makethisvanish').style.zIndex = '0'; to document.getElementById('makethisvanish').style.zIndex = '-1'; And in the line "var IDLE_TIMEOUT = 5; //seconds" you have to change the number to the seconds you want until the screensaver activates without action of the customer. — Kathara, Nov 30 '17 at 07:48
Ok, I'll edit the code from my second EDIT (EDIT_2) try exchanging your code with the one in there. :) I've set the max-timeout time to 1 minute — Kathara, Nov 30 '17 at 08:10
this works very good. The Fading is gone though, how can I get it back? — Mehmet Cevik'in, Nov 30 '17 at 21:51
https://97cm.de it looks good and it works! One thing left is the transition of fading in the beginning and when I move my mouse or click it should fade back too, where do I have to put the code? @Kathara — Mehmet Cevik'in, Nov 30 '17 at 23:08
can you help bring the fading back on the first full screen image — Mehmet Cevik'in, Dec 02 '17 at 10:59

Javascript fullscreen image on load, vanish after 2 seconds (screensaver after idle-time)

1 Answers1