overlay effect

<div id="intro-overlay">
  <div class="overlay-text">Text Here</div>
</div>


<style>
#intro-overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: black;
  z-index: 9999 !important;
  cursor: pointer;
  transition: top 2s ease-out 2.8s; /* Change top position with 2s ease-out after 2.8s */
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 30px;
  text-align: center;
}
</style>

<script>
window.onload = function() {
  setTimeout(function() {
    document.getElementById('intro-overlay').style.top = '-100%';
  }, 2800); // After 2.8 seconds
}
</script>