CODEWITHSUNDEEP
javascriptjqueryloading
Daniel Sushik
Daniel Sushik

Reputation: 96

loading page shows for three seconds

I'm making a personal portfolio and want to show my site tagline for like 3 seconds (full screen), then fade out to show the actual website. What code is used to show some initial div then fade out to the actual website?

Upvotes: 0

Views: 7755

Answers (3)

AJD-
AJD-

Reputation: 79

I made a CSS-only version using CSS3 keyframes/animation.

HTML:

<div id="websiteOverlay">
  "Some tagline"
</div>
<div class="container">
  <h1>
    Website content header
  </h1>
  <p>
    Website content body, with some paragraphs
  </p>
</div>

CSS:

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#websiteOverlay {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  color: white;
  opacity: 0;
  -webkit-animation: fadeOut 3s;
  animation: fadeOut 3s;
}

Fiddle: https://jsfiddle.net/9z6ow28m/

Upvotes: 1

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

This works, with setTimeout(). After 3000 ms, we add the class hidden to the "loading element" that will hide it. You can customize the classes in order to achieve other types of animations. For example, now the animation is set to run for 500 ms.

setTimeout(function() {
  $('#loading').addClass('hidden');
}, 3000);
#loading{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: gray;
  color: white;
  opacity: 1;
  transition: 0.5s;
  visibility: visible;
}
#loading.hidden{
  opacity: 0;
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading site...</div>
<div id="site">
<h1>My site</h1>
<p>Lorem ipsum</p>
</div>

If you prefer regular javascript, you can do it like this:

setTimeout(function() {
  var element = document.getElementById('loading');
  element.classList += " hidden";
}, 3000);

Upvotes: 1

dejakob
dejakob

Reputation: 2102

At the bottom of your HTML document, add a fixed div:

<div class="fixed">Tagline...</div>

Then make it fixed and fill 100% with CSS:

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

So, now you have the tagline element on top of everything else. Last thing you need to do is fade out that element after 3 seconds. This can easily get achieved with jQuery for example:

setTimeout(function() {
  jQuery('.fixed').fadeOut();
}, 3000);

That's all it takes

Upvotes: 0

Related Questions