-2

I want to make a website having a opening text that will appear for 5seconds without having to make a new page. Can i do that without making a new page and just use some scripts or something cuz i dont want to make a new page.

MaddoxSt
  • 35
  • 1
  • 8

1 Answers1

2

You can do this pretty easy with a little jquery code and some minimal html and css. The jquery code will fade out and remove the page-preloader div after 5 seconds. Since you are new to stackoverflow I will explain what jquery is because I am unaware of your level of familiarity with it. It is a javascript library that makes javascripting quick and easy. So you will have to put a link to jquery library on your page before your jquery scripts. So place the page loader div on whatever page you want to have the intro text on preferably right after the body tag and add the jquery link and code to the bottom of the page. So your page will look something like this:

Here is a fiddle to show you how it looks Fiddle Demo

<!DOCTYPE html>
<head>
<style>
.page-loader{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:100%;
  background:#000;
  color:#fff;
}
.page-loader p{
   position:relative;
   top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:center;
}
</style>
</head>
<body>
<div class="page-loader">
  <p>INTRO TEXT<br>(Will dissapear in 5 seconds)</p>
</div>
Rest Of Your Page

<!-- JavaScripts Place At Bottom Of Page Before The </body> tag-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.page-loader').delay(5000).fadeOut('slow', function() {
    $('.page-loader').remove();
  });
});
</script>
</body>
</html>
Steve K
  • 8,505
  • 2
  • 20
  • 35
  • thanks a lot for that – MaddoxSt Jul 17 '16 at 02:58
  • Yep no problem if this is what you are looking for consider checking the checkmark next to this answer so other users who have the same issue as you can see what the correct answer is and what works – Steve K Jul 17 '16 at 03:06