CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jon Bridge
Jon Bridge

Reputation: 329

Why is my preloader animation continuing to display on my website after the preload is finished?

Why is my preloaded animation continuing to display on my website after the preloaded animation is finished and my website launches?

I only want the preloaded animation to display for the amount of seconds specified and for it not to continue over when my website launches. Just to confirm I want to remove the preload animation from my active website after it launches. I only want the animation to be there for the specified seconds and when the site launches I don't want to see it. How can I remove this?

This is an jsfiddle example example of how it looks currently with the loading animation carrying over to my website in the JSFIDDLE, this is what I want to be removed and only have the preload animation before the website launches

I believe the issue is with my html. I have two sets of <body> tags due to the preloaded page being separate to my website. Could this be confusing the process and causing the preloading animation to carry over to my actual site when it launches?

Please Note

The splash divrepresents the webpage which displays for a few seconds at the start.

The app divrepresents my actual website.

Here is what I want removed this whole preloaded animation part with the text and black background from my website after it launches.

enter image description here

I want my website to look like this when it launches after the preloaded animation is finished.

enter image description here

Upvotes: 1

Views: 356

Answers (1)

Karan Hudia
Karan Hudia

Reputation: 573

This is because you have set .splash as the class of that div. And you are trying to get document.getElementById('splash'), which as the name says, gets the element by id attribute which is why it is giving you an error. Simply change the class attribute to id or just change the js to-

document.getElementsByClassName('splash')[0]

I have demonstrated that in your code using the id- 

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});
body{
    background:#333;
    background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
    background:-moz-radial-gradient(circle, #111, #111);

}
#app {
    display: none;
}
#splash{
    margin:200px auto;
}
h1{
    font-family: 'Actor', sans-serif;
    color:#FFF;
    font-size:16px;
    letter-spacing:1px;
    font-weight:200;
    text-align:center;
}
#splash span{
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-block;
    position:absolute;
    left:50%;
    margin-left:-10px;
    -webkit-animation:3s infinite linear;
    -moz-animation:3s infinite linear;
    -o-animation:3s infinite linear;

}


#splash span:nth-child(2){
    background:blue;
    -webkit-animation:kiri 1.2s infinite linear;
    -moz-animation:kiri 1.2s infinite linear;
    -o-animation:kiri 1.2s infinite linear;

}
#splash span:nth-child(3){
    background:red;
    z-index:100;
}
#splash span:nth-child(4){
    background:red;
    -webkit-animation:kanan 1.2s infinite linear;
    -moz-animation:kanan 1.2s infinite linear;
    -o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }

    50%{-webkit-transform:translateX(-20px);
    }

    100%{-webkit-transform:translateX(20px);
    z-index:200;
    }
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }

    50%{-moz-transform:translateX(-20px);
    }

    100%{-moz-transform:translateX(20px);
    z-index:200;
    }
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }

    50%{-o-transform:translateX(-20px);
    }

    100%{-o-transform:translateX(20px);
    z-index:200;
    }
}




@-webkit-keyframes kiri {
     0% {-webkit-transform:translateX(-20px);
    z-index:200;
    }
    50%{-webkit-transform:translateX(20px);
    }
    100%{-webkit-transform:translateX(-20px);
    }
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
    z-index:200;
    }
    50%{-moz-transform:translateX(20px);
    }
    100%{-moz-transform:translateX(-20px);
    }
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
    z-index:200;
    }
    50%{-o-transform:translateX(20px);
    }
    100%{-o-transform:translateX(-20px);
    }
}
body, {
    width: 100%;
    height: 100%;
}
html, body {
    width: 100%;
    height: 100%;
}
@media(min-width:767px) {
    .navbar {
        padding: 10px 0;
        -webkit-transition: background .1s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .1s ease-in-out,padding .5s ease-in-out;
        transition: background .1 ease-in-out,padding .1s ease-in-out;
        //background-color: transparent;
        background-color: white;
    }
    .top-nav-collapse {
        padding: 0;
    }
}
.nav.navbar-nav li a {
   color: black;
 }

.navbar-brand>img {
    max-height: 100%;
    height: 100%;
    width: auto;
    margin: 0 auto;
}
.intro-section {
    height: 100%;
    padding-top: 70px;
    text-align: center;
    min-height: auto;
    background: #333;
}
.main1 {
  color: #FFFFFF;
  font-family: "Helvetica";
  font-weight: bold;
  font-size: 2em
}
.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}
.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}
p {
 color: white;
 font-family: "Helvetica";
 font-size: 1.3em;
 margin: 10px auto;
 white-space: nowrap;
 overflow: hidden;
 width: 0px
}
.main1 {
  animation: type 1s 0s forwards steps(60, end);
}
.main2 {
  animation: type2 1s 1s forwards steps(60, end);
}
.main3 {
  animation: type3 1s 2s forwards steps(60, end);
}
span {
 animation: blink 1s infinite;
}
@keyframes type{
 from { width: 0; }
 to { width: 430px; }
}
@keyframes type2{
 from { width: 0; }
 to { width: 224px; }
}
@keyframes type3{
 from { width: 0; }
 to { width: 364px; }
}
@keyframes blink{
 to{opacity: .0;}
}
::selection{
 background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
      setTimeout(function(){
          document.getElementById('app').style['display'] = 'block';
          document.getElementById('splash').style['display'] = 'none';
      }, 3000);
  </script>
<!--The script above in my code is placed in my code is head-->

<body>
    <div id="splash">
        <h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
        <span></span>
        <span></span>
        <span></span>
        <br>
        <h1>LOADING</h1>
    </div>
    <div id="app">
      <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand page-scroll" <img src="##############" alt="Personal Logo Design"></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-right">
          <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
          <li>
            <a class="page-scroll" href="#page-top">Home</a>
          </li>
          <li>
            <a class="page-scroll" href="#about">About</a>
          </li>
          <li>
            <a class="page-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
  <!-- Intro Section -->
  <section id="intro" class="intro-section">
    <div class="container header-container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <p class="main1">Welcome To My Digital Portfolio</p>
          <p class="main2">My name is Liam Docherty</p>
          <p class="main3">I'm a front end web developer from London.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="about-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1>About Section</h1>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="contact-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1>Contact Section</h1>
        </div>
      </div>
    </div>
  </section>
    </div>

Upvotes: 2

Related Questions