Question

如何在我的网页上获得此初始加载效果。我正在使用bootstrap4和javascript。是javascript Template Link

的新手

Answer 1

在所有其他内容之上创建一个元素，然后在文档上做一些准备将元素取出的

样本：

jQuery(document).ready(function(){
  jQuery('.overlay-load').addClass('away');
  jQuery('.overlay-aux-bg').addClass('away');
});

.overlay-load {
position: fixed;
z-index: 10;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: darkorange;
transition-duration: 500ms;
transition-delay: 2.5s;
}
.overlay-load.away {
transform: translateY(-100%);
}
.overlay-aux-bg {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #3c3c3c;
transition-duration: 500ms;
transition-delay: 1.5s;
}
.overlay-aux-bg.away {
transform: translateY(-100%);
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 2em;
text-shadow: 0 1px 1px #bbb,
		0 2px 0 #999, 
		0 3px 0 #888, 
		0 4px 0 #777, 
		0 5px 0 #666, 
		0 6px 0 #555, 
		0 7px 0 #444, 
		0 8px 0 #333, 
		0 9px 7px #302314;
}
.page-content {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
}
.content-sample-format {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay-load">
<div class="overlay-aux-bg">
<div class="overlay-text">
Load Screen Text
</div>
</div>
</div>
<div class="page-content">
<div class="content-sample-format">
<h1>Page title</h1>
<p>Page content to show the page in action haha </p>
</div>
</div>

它只是一小部分js和css的混合体。最好只使用js将类添加到元素中，也可以执行超时功能来延迟类添加，但是当您可以执行过渡延迟时，为什么也这样做。顺便说一句，这样做，将类添加到元素中，以提高性能。

如何获得此加载屏幕效果

1 个答案: