How to make the splash page div fade after being clicked

Question

This is my first post - anyways - I was referencing this original ask Welcome screen before website loads (Click to enter) [Splash Screen]

After following the instructions of the second answer where I created two seperate divs I need help figuring out how to use javascript to change the visibility of the splash div when/after the user clicks through the splash.

I have a pretty basic understanding of code and not much else but I'm decent at picking up concepts. Here's what I've got so far:

<!Splash html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0
}

div#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
}

div#post-splash {
display: none;}
</style>
<div id="splash">


</div>
<div id="post-splash"></div>
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>

</html>

`<!Splash html>`... what? And where is the closing for the `head` tag and `body` tags? — NewToJS, Mar 25 '16 at 10:22

L777 · Answer 1 · 2016-03-26T10:00:17.873

Pure CSS (no javascript) alternative with undercover checkbox:

html {
  width: 100%;
  height: 100%;  
  background: lavender;
  text-align: center;
  font-family: arial, sans-serif;
}

input { 
  display: none;
}

#target { 
  opacity: 0;
  background-color: rosybrown;
  background: url('http://i.imgur.com/P9L9jzT.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: fixed;
  height: 100%;
  width: 100%;  
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-transition: all 2s; /* Safari */
  transition: all 2s;
}

#click:checked ~ label > #target {
  opacity: 1;
  z-index: 200;
  cursor: pointer;  
  pointer-events: auto;
}

#replay {
  color: crimson;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 20px;
  cursor: pointer;
}

#warning {
  color: white;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
}

<input type="checkbox" id="click" checked/>

<label for="click">
<div id=target><h1 id=warning>WELCOME</h1></div> 
<span id=replay><small>-replay-</small></span>
</label>

<p>page content</p>

this is awesome! thanks for helping with the actual click part as well! — Taylor Allen-Sterling Forrest, Mar 25 '16 at 10:51

score 0 · Answer 2 · answered Mar 25 '16 at 10:35

You're code is messy - you're missing tags, missplaced some content etc. I suggest you learn more abouth html and css and use proper IDE with syntax higlighting. Anyway here's the code that will do what you expect. This is still far from perfect.

<html>

<head>
    <meta charset="utf-8" />
    <style>
    html,
    body {
        margin: 0;
        padding: 0
    }

    #splash {
        max-width: 100%;
        height: 100%;
        background-image: url("brightsplash.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        cursor: pointer;
    }

    #post-splash {
        display: none;
    }
    </style>
</head>

<body>
    <div id="splash">
    </div>
    <div id="post-splash">
        <h1>Taylor Forrest</h1>
        <h2>photography</h2>
        <h2>About</h2>
        <h2>Portfolio</h2>
        <h2>Contact</h2>
    </div>
    <script>
    (function() {
        var splash = document.getElementById('splash'),
            postSplash = document.getElementById('post-splash');

        splash.addEventListener('click', function() {
            splash.style.display = "none";
            postSplash.style.display = "block";
        });

    })();
    </script>
</body>

</html>

How to make the splash page div fade after being clicked

2 Answers2

Linked