猿问

如何创建在我的网站上可见的预加载器？

基本上，我创建了一个预加载器，当用户单击链接或刷新页面时，我想在我的网站上显示它。但是，我需要帮助在我的网站上实施预加载器。由于某种原因，当我将预加载器与站点代码组合时，预加载器不会在开始时显示。它出现在我的旋转木马底部的空间中，由于某种原因表现得像视差效果。我怎样才能使我的预加载器正确显示并淡出显示我的网站？任何帮助表示赞赏。下面是我正在使用的代码。这是我希望预加载器的链接：https ://planepreload.raymondnelson.repl.co/

window.addEventListener("scroll", function() {

    var header = document.querySelector("header");

    header.classList.toggle("sticky", window.scrollY > 0);

})

$(window).on('load', function() {

    $('.preload').delay(5000).fadeOut(1000);

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width">

    <title>Home</title>

    <link href="style.css" rel="stylesheet" type="text/css" />

    <link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">

  </head>

  <body>

    <div class = "load">

      <div class="preload">

        <img class="airplane" src="https://uce0f26a244f3c0cca3e7d07a830.previews.dropboxusercontent.com/p/thumb/AA-n6na-kOCtw8Bb8oYMYS7ujTjaqw6NiVJNq9sN_9JhpI8IQpbBvBOqyHRHI_05vuXhm-wajT-mh3XDkby6-4ModecGbJfeDEhXSRXt964rcuz4HhhTPGfQb0WJEEQuL0UuRXmzMm57ErG0SqIdWwLad21j_AglpMM8xfsMhXC-NzLfAoH7O9xsXhpzshhB3dsWYG--obRcwjaCpRh7eDxmxvRrXfa86VS3cmyh0a69vAPc8C6GFSje2oYY-M7Qykor8-mgfLHjLk3V42CvKyhiawUJKzcLwiNkyAW_veON8JZ0iBOcAGlL9429_3TcjwPTJQpn2Vk64ZfTjtBtZhDgtki9HqYz7CUCYeMAZIaEAQ/p.png?size=178x178&size_mode=1" alt="airplane" />

        <h3 class = "land">Landing on the website...</h3>


慕少森
浏览 74回答 1
1回答

慕后森

我z-index: 9999为该类添加了一条规则preload，以在动画持续时间内重叠主要内容。另外，调整z-index标签header- z-index: 9990。对于body标签，我设置overflow: hidden在动画持续时间内隐藏滚动条，在动画结束时，这个滚动条再次出现，这要归功于jquery代码的调整：$('body').css('overflow', 'visible');window.addEventListener("scroll", function() {&nbsp; &nbsp; var header = document.querySelector("header");&nbsp; &nbsp; header.classList.toggle("sticky", window.scrollY > 0);})$(window).on('load', function() {&nbsp; $('.preload').delay(5000).fadeOut(1000, function() {&nbsp; &nbsp; $('body').css('overflow', 'visible');&nbsp; });});* {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; box-sizing: border-box;}html {&nbsp; &nbsp; scroll-behavior: smooth;}body {&nbsp; &nbsp; min-height: 200vh;&nbsp; &nbsp; background-color: #d7a4d9;&nbsp; &nbsp; overflow: hidden;}h3 {&nbsp; &nbsp; color: #3F69CA}&nbsp;/* Preloader Code */&nbsp;&nbsp; .preload {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; background: #77b3d4;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; transition: opacity 0.5 ease;&nbsp; &nbsp; z-index: 9999;&nbsp; }&nbsp;&nbsp;&nbsp; .cloud1,&nbsp; .cloud2,&nbsp; .cloud3{&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; right: 0%;&nbsp; &nbsp; z-index: -1;&nbsp; }&nbsp;&nbsp;&nbsp; .cloud1 {&nbsp; &nbsp; top: 25%;&nbsp; &nbsp; transform: translate(100%, -25%);&nbsp; &nbsp; animation: clouds 3s ease infinite;&nbsp; }&nbsp;&nbsp;&nbsp; .cloud2 {&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; transform: translate(100%, -50%);&nbsp; &nbsp; animation: clouds 3s ease infinite 2s;&nbsp; }&nbsp;&nbsp;&nbsp; .cloud3 {&nbsp; &nbsp; top: 75%;&nbsp; &nbsp; transform: translate(100%, -75%);&nbsp; &nbsp; animation: clouds 3s ease infinite 4s;&nbsp; }&nbsp;&nbsp;&nbsp; .airplane {&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; animation: airplane 1s ease infinite alternate;&nbsp; }&nbsp;&nbsp;&nbsp; @keyframes airplane {&nbsp; &nbsp; from {&nbsp; &nbsp; &nbsp; transform: translateY(0px);&nbsp; &nbsp; }&nbsp; &nbsp; to {&nbsp; &nbsp; &nbsp; transform: translateY(50px);&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp;&nbsp; @keyframes clouds {&nbsp; &nbsp; from {&nbsp; &nbsp; &nbsp; right: 0%;&nbsp; &nbsp; }&nbsp; &nbsp; to {&nbsp; &nbsp; &nbsp; right: 130%;&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp;&nbsp; .preload .land {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 75%;&nbsp; &nbsp; transform: translateY(-75%);&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; font-family: sans-serif;&nbsp; }/* Navbar */header {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; transition: 0.6s;&nbsp; &nbsp; padding: 40px 100px;&nbsp; &nbsp; z-index: 9990;&nbsp; &nbsp; font-family: "Hind";}header.sticky {&nbsp; &nbsp; padding: 5px 100px;&nbsp; &nbsp; background: #F5F5F5;&nbsp; &nbsp; font-family: "Hind";}header .logo {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; color: #F5F5F5;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-size: 2em;&nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; letter-spacing: 2px;&nbsp; &nbsp; transition: 0.6s;&nbsp; &nbsp; font-family: "Hind";}header ul {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; font-family: "Hind";}header ul li {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; font-family: "Hind";}header ul li a {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin: 0 15px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #F5F5F5;&nbsp; &nbsp; letter-spacing: 2px;&nbsp; &nbsp; font-weight: 500px;&nbsp; &nbsp; transition: 0.6s;&nbsp; &nbsp; font-family: "Hind";&nbsp; &nbsp; font-size: 20px;}header ul li a:hover {&nbsp; &nbsp; text-decoration: underline;&nbsp; &nbsp; color: black;}header.sticky .logo, header.sticky ul li a {&nbsp; &nbsp; color: #000;&nbsp; &nbsp; font-family: "Hind";}.dropdown {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: inline-block;}.dropdown-content {&nbsp; &nbsp; display: none;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; background-color: #f1f1f1;&nbsp; &nbsp; max-width: 100px;&nbsp; &nbsp; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);&nbsp; &nbsp; z-index: 1;}.dropdown-content a {&nbsp; &nbsp; color: black;&nbsp; &nbsp; padding: 12px 16px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; display: block;}.dropdown:hover .dropdown-content {&nbsp; &nbsp; display: block;}.ddtext1 {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; left: -5px;}.ddtext1:hover {&nbsp; &nbsp; color: #00B800;}.ddtext2 {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; left: -15px;}.ddtext2:hover {&nbsp; &nbsp; color: #14adb3}.ddtext3 {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; left: -20px;}.ddtext3:hover {&nbsp; &nbsp; color: #E0A800;}.information {&nbsp; &nbsp; background: linear-gradient( rgb(24, 23, 23, 0.4), rgb(24, 23, 23, 0.4)), url("blackbg.jpg");&nbsp; &nbsp; background-size: cover;&nbsp; &nbsp; height: 100vh;}.name {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top: 300px;&nbsp; &nbsp; right: 200px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; color: #20A4F3;&nbsp; &nbsp; font-family: "Hind";&nbsp; &nbsp; animation: fadeIn ease 4s;&nbsp; &nbsp; font-size: 80px;}.text {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top: 300px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; font-family: "Hind";&nbsp; &nbsp; text-transform: uppercase;}.text h1 {&nbsp; &nbsp; font-size: 50px;&nbsp; &nbsp; color: #222;}.text span {&nbsp; &nbsp; font-size: 50px;&nbsp; &nbsp; animation: light 2s linear infinite;}/* Carousel */#slider {&nbsp; &nbsp; overflow: hidden;}#slider figure {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 500%;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; animation: 25s slider infinite;}#slider figure img {&nbsp; &nbsp; width: 20%;&nbsp; &nbsp; float: left;}@keyframes slider {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; }&nbsp; &nbsp; 20% {&nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; }&nbsp; &nbsp; 25% {&nbsp; &nbsp; &nbsp; &nbsp; left: -100%;&nbsp; &nbsp; }&nbsp; &nbsp; 45% {&nbsp; &nbsp; &nbsp; &nbsp; left: -100%;&nbsp; &nbsp; }&nbsp; &nbsp; 50% {&nbsp; &nbsp; &nbsp; &nbsp; left: -200%;&nbsp; &nbsp; }&nbsp; &nbsp; 70% {&nbsp; &nbsp; &nbsp; &nbsp; left: -200%;&nbsp; &nbsp; }&nbsp; &nbsp; 75% {&nbsp; &nbsp; &nbsp; &nbsp; left: -300%;&nbsp; &nbsp; }&nbsp; &nbsp; 95% {&nbsp; &nbsp; &nbsp; &nbsp; left: -300%;&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; left: -400%;&nbsp; &nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width">&nbsp; &nbsp; <title>Home</title>&nbsp; &nbsp; <link href="style.css" rel="stylesheet" type="text/css" />&nbsp; &nbsp; <link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">&nbsp; </head>&nbsp; <body>&nbsp; &nbsp;<div class = "load">&nbsp; &nbsp; &nbsp; <div class="preload">&nbsp; &nbsp; &nbsp; &nbsp; <img class="airplane" src="https://uce0f26a244f3c0cca3e7d07a830.previews.dropboxusercontent.com/p/thumb/AA-n6na-kOCtw8Bb8oYMYS7ujTjaqw6NiVJNq9sN_9JhpI8IQpbBvBOqyHRHI_05vuXhm-wajT-mh3XDkby6-4ModecGbJfeDEhXSRXt964rcuz4HhhTPGfQb0WJEEQuL0UuRXmzMm57ErG0SqIdWwLad21j_AglpMM8xfsMhXC-NzLfAoH7O9xsXhpzshhB3dsWYG--obRcwjaCpRh7eDxmxvRrXfa86VS3cmyh0a69vAPc8C6GFSje2oYY-M7Qykor8-mgfLHjLk3V42CvKyhiawUJKzcLwiNkyAW_veON8JZ0iBOcAGlL9429_3TcjwPTJQpn2Vk64ZfTjtBtZhDgtki9HqYz7CUCYeMAZIaEAQ/p.png?size=178x178&size_mode=1" alt="airplane" />&nbsp; &nbsp; &nbsp; &nbsp; <h3 class = "land">Landing on the website...</h3>&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud1" class="cloud1" />&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud2" class="cloud2" />&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud3" class="cloud3" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;</div>&nbsp; &nbsp; <!--Navbar-->&nbsp; &nbsp; <header>&nbsp; &nbsp; &nbsp; <a class="" href="#"></a>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="index.html">Home</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="dropbtn" href="gallery.html">Gallery</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="ddtext1" href="asia.html">Asia</a> <a class="ddtext2" href="europe.html">Europe</a> <a class="ddtext3" href="na.html">America</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="contact.html">Contact</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </header>&nbsp; &nbsp;&nbsp;&nbsp; <!--Home Page-->&nbsp; &nbsp; <div id="information">&nbsp; &nbsp; &nbsp; &nbsp; <div id="slider">&nbsp; &nbsp; <figure>&nbsp; &nbsp; &nbsp; <img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">&nbsp; &nbsp; &nbsp; <img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">&nbsp; &nbsp; &nbsp; <img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">&nbsp; &nbsp; &nbsp; <img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">&nbsp; &nbsp; &nbsp; <img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">&nbsp; &nbsp; </figure>&nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script src="script.js"></script>&nbsp; </body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答