Gustavo Reis Costa Gustavo Reis Costa - 4 months ago 22
CSS Question

CSS and HTML: Is it possible to fulfil and close the title cover before starting the chapter in the same page?

I'm not speaking of two different pages, I don't want the page cover to forward the user to another page. I want the page cover to close itself and disappear from the same page.

I want to cover background image or a solid background on a title cover on a same page that covers any entire browser window. When the user clicks the button of starting or closing to close the cover that goes from bottom to top and disappears from the same page where the user will begin to start.

For example, here's an animated gif:

How is it like

The CSS:

body {
font-family: Eurostile, sans-serif;
background-color: #F3F1D3;
}

.capa {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
}

.capa .padding {
padding: 40px;
border: none;
}

.titlenome {
font-size: 150px;
}

.authorname {
font-size: 90px;
}

.chapter {
padding: 15px;
font-size: 40px;
}

.chaptername {
font-size: 70px;
}

@media (min-width: 599px) {
.capa .padding {
padding: 8%;
}
.chapter {
padding: 15px;
font-size: 20px;
}
.chaptername {
font-size: 50px;
}

}


HTML:

<div class="capa"><img src="images/anyimage.png" height="100%" width="100%">

<div class="titlename">The Adventures of Astronauts</div>
<div class="authorname">Gustavo Costa</div>
</div>

<div class="chapter">Chapter 1</div>
<div class="chaptername">THE BEGINNING OF THE VOYAGE</div>

<p>Lorem ipsum....</p>

Answer

You can fully fill using this way:

  • Use position: fixed for the splash screen.
  • Use transition for the animation.

Note: I have given a setTimeout. Instead if you wanna do it on click, see the second example.

setTimeout(function () {
  document.querySelector(".splash").classList.add("done");
}, 200);
* {
  margin: 0; padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.splash {
  background-color: #f90;
  text-align: center;
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  transition: all 2s linear;
}
.splash p {
  position: absolute;
  left: 0; right: 0;
  top: 50%; margin-top: -0.75em;
  font-size: 2em;
  color: #fff;
}
.content {
  margin: 25px;
  text-align: justify;
}
.splash.done {
  bottom: 100%;
}
.content * {
  margin-bottom: 10px;
}
<div class="splash">
  <p>This is a Splash Screen</p>
</div>
<section class="content">
  <h1>Welcome to Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, rem! Corrupti nemo aliquid temporibus, eaque neque, impedit incidunt cupiditate. Nobis rem hic, in sequi incidunt. Quibusdam et cupiditate architecto accusamus!</p>
  <p>Dolorem optio sunt dicta id explicabo. Deleniti eum quasi quo numquam modi, animi laboriosam nulla sapiente autem tempore illum quia consectetur perferendis delectus fugiat in tenetur cupiditate aut ad officiis.</p>
  <p>Neque facilis a inventore debitis porro eum saepe nesciunt amet quae repellendus, quasi eligendi! Aperiam possimus illo officiis voluptate amet! Incidunt commodi nihil consequuntur deserunt odit. Fuga, quidem. Aut, explicabo.</p>
  <p>Atque repellendus accusantium alias, corrupti quidem? Doloribus neque, alias ex. Accusantium repudiandae veritatis iusto impedit sit ratione! Perferendis eius, tenetur perspiciatis mollitia laboriosam, aperiam sapiente cumque eaque ut id. Tempore.</p>
  <p>Pariatur necessitatibus vero molestias quae praesentium quia, ullam animi natus tempora porro quasi ducimus eligendi commodi, veritatis soluta dolore officiis harum illum excepturi at. Molestiae recusandae ut repellendus adipisci itaque.</p>
</section>

Using Click

var doneAdd = function () {
  document.querySelector(".splash").classList.add("done");
  return false;
};
* {
  margin: 0; padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.splash {
  background-color: #f90;
  text-align: center;
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  transition: all 2s linear;
}
.splash p {
  position: absolute;
  left: 0; right: 0;
  top: 50%; margin-top: -1.75em;
  font-size: 2em;
  color: #fff;
}
.content {
  margin: 25px;
  text-align: justify;
}
.splash.done {
  bottom: 100%;
  overflow: hidden;
}
.content * {
  margin-bottom: 10px;
}

.splash a {
  text-decoration: none;
  color: #000;
  background: #99f;
  padding: 5px 15px;
  display: inline-block;
  border-radius: 10px;
}
<div class="splash">
  <p>This is a Splash Screen<br /><br /><a href="#" onclick="return doneAdd();">Start</a></p>
  
</div>
<section class="content">
  <h1>Welcome to Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, rem! Corrupti nemo aliquid temporibus, eaque neque, impedit incidunt cupiditate. Nobis rem hic, in sequi incidunt. Quibusdam et cupiditate architecto accusamus!</p>
  <p>Dolorem optio sunt dicta id explicabo. Deleniti eum quasi quo numquam modi, animi laboriosam nulla sapiente autem tempore illum quia consectetur perferendis delectus fugiat in tenetur cupiditate aut ad officiis.</p>
  <p>Neque facilis a inventore debitis porro eum saepe nesciunt amet quae repellendus, quasi eligendi! Aperiam possimus illo officiis voluptate amet! Incidunt commodi nihil consequuntur deserunt odit. Fuga, quidem. Aut, explicabo.</p>
  <p>Atque repellendus accusantium alias, corrupti quidem? Doloribus neque, alias ex. Accusantium repudiandae veritatis iusto impedit sit ratione! Perferendis eius, tenetur perspiciatis mollitia laboriosam, aperiam sapiente cumque eaque ut id. Tempore.</p>
  <p>Pariatur necessitatibus vero molestias quae praesentium quia, ullam animi natus tempora porro quasi ducimus eligendi commodi, veritatis soluta dolore officiis harum illum excepturi at. Molestiae recusandae ut repellendus adipisci itaque.</p>
</section>