-2

i am a beginner and i need help with adding a skip button (preferably a click anywhere on the screen to skip) for a gif i used as a preloader (running on a timer, so when the time ends, it goes straight to the main page). I am not too good with JS and dont know where to begin. here is my html and css

joseph2432
  • 37
  • 3
  • 1
    please add code as text, not images. it enables answerers to copy your code and may reduce downvotes. Add a click event, once clicked call clearTimeout, call showPage. show what have you tried, SO is not a free coding service, even on trivial things. – Lawrence Cherone Apr 04 '20 at 12:42

1 Answers1

0

I think you are finding an overlay to display before loading. then, i think you can find that code here

there are a lots of great codes.

or you want just a overlay for just a moment,

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>

It might be good answer.

I'm sorry

+

If you want to change the direction that overlay

disappearing. Then, you must change css or js

(1) up and down (js)

popupOverlay.style.height = "0%";

The result must be followed up -> down.

(2) just fade in / out (css, js)

I think you can find more information at other stackoverflow answers Here

Im sorry

Minwoo Yu
  • 360
  • 2
  • 13