How to get a HTML5 page to change when fullscreen

Question

I have a simple index.html file as a landing page that displays a fullscreen gif:

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Full-screen animated gif background</title>
    <style>
        /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
        html { 
          background:  url(https://media.giphy.com/media/2s0ouek7HJmWQ/giphy.gif) no-repeat center center fixed; 
          background-size: cover;
        }
        body {
            height: 100%;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
</html>

Let's call that A. I have another version (B) that displays a fullscreen page of particles:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Particles</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="particles-js">
        <div class="btext">
            <h1>logo here</h1>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        particlesJS.load('particles-js', 'particles.json')
    </script>
</body>
</html>

css/style.css

html,body{
    width:100%;
    height:100%;
    background:#111;
}
#particles-js{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

How can I have the page show A and then when the user clicks anywhere on the screen it fades to B?

I'm a beginner with HTML and CSS so thanks in advance!

Would you like to use JavaScript or CSS? I see you’ve put JavaScript as a tag. — Lloyd Nicholson, Dec 23 '18 at 17:22
@LloydNicholson TBH I'm open to either, but definitely prefer simplicity. — BoltzmannBrain, Dec 23 '18 at 17:56

Trobol · Accepted Answer · 2018-12-23T19:09:37.490

0

You can use the opacity property in CSS.

document.addEventListener('click', e => {
  document.getElementById('gif').classList.add('fade');
 });
 document.getElementById('particles-js').addEventListener('mousemove', e => {
 console.log('boop');
 });

html { 
        }
        body {
            height: 100%;
        }
div, img {
position:fixed;
height:100%;
width:100%;
}
#gif {
  z-index:2;
    background:  url(https://media.giphy.com/media/2s0ouek7HJmWQ/giphy.gif) no-repeat center center fixed; 
          background-size: cover;
  opacity:1;
}

#gif.fade {
  transition: 1s;
  opacity:0;
  z-index:-1; /* ADD THIS */
}

<div id="gif"></div>
<div id="particles-js">
        <div class="btext">
            <h1>logo here</h1>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>

     //particlesJS.load('particles-js', 'particles.json'); 
</script>

edited Dec 23 '18 at 19:09

answered Dec 23 '18 at 18:05

Trobol

1,210
9
12

1

Thanks this works! One additional issue though: The second page (B) that runs particles.js used to have functionality that responds to the cursor movement and clicks, but now it doesn't. Is this functionality somehow overwritten? I've tried to remove the `EventListener` as in [this SO answer](https://stackoverflow.com/a/3107221/3765905), but there is still no cursor response in the [particle.js](https://github.com/VincentGarreau/particles.js) page. – BoltzmannBrain Dec 23 '18 at 19:05
You just need to change the z-index of the gif when it fades. Edited my answer to reflect this change. (The CSS) – Trobol Dec 23 '18 at 19:10
1

That doesn't seem to do it. To be clear, I've pasted the top code block in you poster answer into the `` block, and uncommented the `particlesJS.load('particles-js', 'particles.json');` line. This is correct, no? – BoltzmannBrain Dec 23 '18 at 19:15
No, try adding z-index:-1; to the #gif.fade in CSS. (Where I put the "ADD THIS" comment above.) – Trobol Dec 23 '18 at 19:17
Ah got it, the z-index addition does it, thanks! The particle.js responsiveness is laggy, but functional. – BoltzmannBrain Dec 23 '18 at 19:21

How to get a HTML5 page to change when fullscreen

index.html

index.html

css/style.css

1 Answers1