为什么在预加载的动画完成并启动网站后,我的预加载的动画仍继续显示在我的网站上?
我只希望预加载的动画在指定的秒数内显示,并且不要在我的网站启动时继续显示。只是为了确认我要在启动后从活动网站中删除预加载动画。我只希望动画在指定的时间在那里,并且在网站启动时我不希望看到它。我该如何删除?
这是一个jsfiddle example示例,它的当前外观是如何将正在加载的动画转移到JSFIDDLE中的我的网站上的,这是我要删除的内容,并且只有在网站启动之前具有预加载动画
我相信问题出在我的html上。由于预加载的页面与我的网站是分开的,所以我有两组<body>
标记。这会造成混乱的过程,并导致预加载动画在启动时转移到我的实际网站上吗?
请注意
初始div
代表在开始时显示几秒钟的网页。
应用程序div
代表我的实际网站。
这是我要在启动后从网站上删除带有文本和黑色背景的整个预加载动画部分的内容。
我希望我的网站在预加载的动画完成后启动时看起来像这样。
最佳答案
这是因为您已将.splash
设置为该div的class
。您正在尝试获取document.getElementById('splash')
,顾名思义,它是通过id
属性获取元素的,这就是为什么它会给您一个错误。只需将class
属性更改为id
或仅将js
更改为-
document.getElementsByClassName('splash')[0]
我已经使用
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>