Добавление кнопки пропуска в мой GIF Preloader для веб-сайта

Question

Я новичок, и мне нужна помощь с добавлением кнопки пропуска (предпочтительно щелчка в любом месте экрана, чтобы пропустить) для GIF, который я использовал в качестве предварительного загрузчика (работает по таймеру, поэтому, когда время заканчивается, оно идет прямо на главную страницу). Я не слишком хорош с JS и не знаю, с чего начать. вот мои html и css

Answer 1

Я думаю, вы находите наложение для отображения перед загрузкой. тогда, я думаю, вы можете найти этот код здесь

, есть много хороших кодов.

или вы хотите просто наложение на мгновение,

css. css

.overlay {   
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0, 202, 169, 0.9); 
  overflow-x: hidden;
  transition: 0.3s;
  transition-delay: 1s
}
.overlay-contents {
  position: relative;
  top: 25%;
  text-align: center; 
  margin-top: 30px; 
  color: white;
  font-size: 3em;
}
.overlay-contents p {
  color:white; font-size: 20px;
}

js. js

window.onload = () => {
    var popupOverlay = document.getElementById("popOverlay");

    var main = document.getElementById("main");

    popupOverlay.style.width = "0%";

    popupOverlay.addEventListener("transitionend", () => {
        if(window.outerWidth > 920) {
            //loading done.
            //write your other ui mover
        }
        main.style.display = "block";
    });
}

html. html

<div id="popOverlay" class="overlay">
  <div class="overlay-contents">
    <h1>Title</h1>
    <p>Description</p>
  </div>
</div>

Это может быть хороший ответ.

Извините

+

Если вы хотите изменить направление исчезновения наложения

. Затем вы должны изменить css или js

(1) вверх и вниз (js)

popupOverlay.style.height = "0%";

Результат должен сопровождаться вверх -> вниз.

(2) просто исчезают / исчезают (css, js)

Я думаю, вы можете найти больше информации на других stackoverflow отвечает Здесь

Извините