Здесь вы узнаете, как сделать страницу, информирующую о скором событие, или "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);
