Страница "Скоро..." или Coming soon page

 alexei 20/08/2021 - 09:00

Здесь вы узнаете, как сделать страницу, информирующую о скором событие, или "coming soon page" при помощи CSS и JavaScript.



Как сделать "Coming soon page"

Шаг 1) Добавляем HTML:

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

Шаги 1 и 2 показывают как создать "Coming Soon Page" при помощи только HTML и CSS. Чтобы дополнительно добавить "обратный отсчет" при помощи JavaScript, выполните Шаг 3.


<div class="bgimg">
  <div class="topleft">
    <p>Логотип</p>
  </div>
  <div class="middle">
    <h1>МЫ СКОРО ВЫХОДИМ</h1>
    <hr>
    <p>35 дней</p>
  </div>
  <div class="bottomleft">
    <p>Какой-то текст</p>
  </div>
</div>

Шаг 2) Добавляем CSS:


/* Чтобы фоновое изображение растянулось на всю страницу,
устанавливаем для элементов body и html высоту в 100% */
body, html {
  height: 100%
}

.bgimg {
  /* Фоновое изображение */
  background-image: url('forestbridge.jpg');
  /* На весь экран */
  height: 100%;
  /* Центрируем фоновое изображение */
  background-position: center;
  /* Масштабирование и увеличение изображения */
  background-size: cover;
  /* Добавляем, чтобы было можно разместить элементы с
     абсолютным позиционированием (текст) */
  position: relative;
  /* Текст внутри контейнера .bgimg будет белого цвета */
  color: white;
  /* Шрифт */
  font-family: "Courier New", Courier, monospace;
  /* Размер шрифта */
  font-size: 25px;
}

/* Позиционируем текст в верхнем левом углу */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

/* Позиционируем текст в нижнем левом углу */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

/* Позиционируем текст в середине страницы */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Стиль для элемента <hr> */
hr {
  margin: auto;
  width: 40%;
}

Шаг 3) Добавляем JavaScript:

Создаем счетчик обратного отчета на JavaScript.


// Устанавливаем дату, до которой будем вести отсчет
var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();

// Обновляем отсчет каждую 1 секунду
var x = setInterval(function() {

  // Получаем сегодняшнюю дату и время
  var now = new Date().getTime();

  // Определяем расстояние между текущей и финальной датами
  var distance = countDownDate - now;

  // Вычисление времени для дней, часов, минут и секунд
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Выводим результат в элементе с id="demo"
  document.getElementById("demo").innerHTML = days + "д " + hours + "ч "
  + minutes + "мин " + seconds + "сек ";

  // Если отсчет завершен, выводим сообщение
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "ВРЕМЯ ИСТЕКЛО";
  }
}, 1000);