Как сделать чтобы блок убирался вверх при загрузке страницы?

Question

Мне нужно чтобы когда я перезагружаю страницу вся она становилась чёрной а потом спустя пару секунд этот слой отъезжал вверх при этом нажимать не куда не нужно.

Вот css код

.animation-block{
    background-color: black;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
}
.animation-block:hover{
  background-color: black;
  height: 100vh;
  width: 100%;
  
  z-index: 9999;
  top:-100%;
}

Answer 1

Чтобы реализовать описанное вами поведение, вам нужно использовать JavaScript для добавления класса к элементу с классом "animation-block" при загрузке страницы, а затем удалять этот класс через определенное время, чтобы слой отъезжал вверх.

В CSS вы можете добавить стили для класса "active", которые будут устанавливать нужные свойства для анимации.

Вот пример кода на JavaScript, который можно использовать:

window.onload = function() {
  var animationBlock = document.querySelector('.animation-block');
  animationBlock.classList.add('active');
  setTimeout(function() {
    animationBlock.classList.remove('active');
  }, 2000); // время в миллисекундах до удаления класса
}

.animation-block.active {
  background-color: black;
  height: 100vh;
  width: 100%;
  z-index: 9999;
  top:-100%;
  transition: top 1s ease-in-out;
}

Answer 2

Рабочий вариант без лишних скриптов при помощи animation. Расписывать, как он работает не буду, слишком долго. Только скажу, что 1s - скорость движения вверх, а 5s - это задержка перед началом движения, а forwards отвечает за то, что элемент не будет возвращаться обратно на исходную позицию.

.animation-block{
    background-color: black;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    animation: topAfterDelay 1s 5s forwards;
}
body {
  margin: 0;
  box-sizing: border-box;
}
@keyframes topAfterDelay {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

<div class="animation-block"></div>

БЛОГ НА HUSL

Как сделать чтобы блок убирался вверх при загрузке страницы?

Ответы (2 шт):