Содержание [скрыть]
- Брифинг
- HTML
- CSS (сасс)
- Стили для основных частей и заголовка
- Стилизация содержимого
- Стилизация обратного отсчета
- Завершение с нижним колонтитулом
- JavaScript
- Заключительные мысли о создании простой страницы скоро
Вы когда-нибудь хотели создать простую страницу скоро? А какая скоро будет страница с рабочим обратным отсчетом? Этот короткий и простой учебник поможет вам добиться и того, и другого. Мы начнем с описания простой структуры HTML. Затем мы добавим пользовательский CSS, чтобы добавить немного стиля и блеска нашей странице, которая скоро появится. Наконец, мы добавим несколько строк JavaScript, чтобы обратный отсчет работал. Теперь пришло время создать страницу, которая скоро появится!
Демо доступно на Codepen.
Брифинг
Как уже упоминалось, предметом этого урока будет создание простой страницы Скоро с рабочим обратным отсчетом. Этот проект потребует минимального количества ресурсов. Что касается CSS и шрифтов, я использовал два ресурса. Первый — это шрифт Montserrat, предоставленный Google Fonts для основного текста. Второй — Font Awesome для иконок, используемых в футере. И, когда дело доходит до JavaScript, я использовал два плагина Autoprefixer и компилятор Babel. Это все. Мы готовы идти.
HTML
Вся предстоящая страница будет состоять из трех основных частей. Эти части будут заголовком, основным содержанием и нижним колонтитулом. Внутри заголовка будет простое изображение SVG. Это будет заполнитель для логотипа, который вы, возможно, захотите использовать на странице, которая скоро появится. Основной контент будет содержать заголовок h1, обратный отсчет, абзац текста и простую форму, которая позволит подписаться на уведомления. Наконец, нижний колонтитул будет содержать список с пятью ссылками на социальные сети, Github и Dribbble.
Большая часть HTML будет довольно простой и короткой. Даже компонент обратного отсчета будет иметь очень простую структуру. Мы будем использовать один контейнер с классом «обратный отсчет». Этот контейнер будет содержать четыре коробки. Один для дней, один для часов, один для минут и один для секунд. Каждое из этих полей будет содержать div, внутри которого мы будем отображать числа. Мы присвоим этому классу div «номер». Затем будет интервал с текстом, чтобы указать, в какой единице времени это число.
Как я уже говорил, нижний колонтитул будет содержать список с пятью ссылками. Итак, мы будем использовать пять элементов списка с тегом anchor в каждом. И каждый из этих тегов anchor также будет содержать span. Мы будем использовать этот span в качестве заполнителя для значков, предоставленных Font Awesome. Многие люди используют тег i для этих иконок. Я думаю, что лучше выбрать spans. Тег i определяет текст в другом голосе или настроении. И это также обычно отображается курсивом. Иконки не имеют альтернативного голоса или настроения. И им не нужен курсив. Спаны нейтральны, как и значки. Давайте создадим структуру HTML для нашей будущей страницы.
Код:
<div class="wrapper">
<header>
<svg class="header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 318.5 100 125" enable-background="new 0 318.5 100 100"><path d="M88.888 349.937c-.109-.298-.405-.481-.718-.463-5.109.383-11.558.865-18.163 1.358l9.538-12.475c.182-.237.195-.563.033-.814-.162-.25-.46-.376-.756-.307-6.694 1.549-38.692 8.971-43.12 10.304l-6.457-5.539c-.108-.093-.241-.15-.382-.166l-6.908-.774-.053.006-.167.018-.126.032-.044.012-10.098 4.926c-.244.119-.398.366-.398.638 0 .271.155.518.399.637l10.442 5.075.226 3.224.007.024-.001.026 2.333 16.271.012.042.02.066.079.17.033.052.184.169.008.007.019.005.141.066 19.376 5.903 5.754 3.548 1.262 2.943-2.657 14.021c-.04.212.019.431.159.594.135.157.332.247.538.247l.025-.001c.154-.006 15.421-.557 16.007-.572.221-.006.45-.129.579-.308.243-.335.609-.843-4.467-17.763l-.05-.094-.026-.075c-.375-.606-3.278-5.282-4.554-7.092l31.722-23.125c.257-.187.358-.52.249-.816zm-20.773 1.036c-14.051 1.048-28.297 2.104-31.539 2.321l-.293-4.463c3.457-1.007 25.228-6.127 40.94-9.77l-9.108 11.912zm-17.659 29.556l-4.189-2.583 7.808-2.803-3.619 5.386zm-26.808-24.333l10.913-1.279-8.965 14.862-1.948-13.583zm12.112-.522l7.724 21.011-17.23-5.25 9.506-15.761zm-7.272-12.455l6.365 5.46.312 4.74-11.666 1.368-.856-12.224 5.845.656zm-15.092 3.47l7.845-3.827.554 7.909-8.399-4.082zm36.868 51.644l2.459-12.979 7.688-3.065c1.93 6.464 3.891 13.442 4.275 15.528-2.614.09-11.537.412-14.422.516zm2.215-14.407l-1.011-2.36 4.459-6.637c.893 1.301 2.583 3.965 3.894 6.069l-7.342 2.928zm3.106-10.83l-10.522 3.777-8.154-22.182c6.186-.423 39.375-2.906 48.886-3.618l-30.21 22.023z"/></svg>
</header>
<main class="content">
<h1>COMING SOON!</h1>
<div class="countdown">
<div class="countdown__days">
<div class="number"></div>
<span class>Days</span>
</div>
<div class="countdown__hours">
<div class="number"></div>
<span class>Hours</span>
</div>
<div class="countdown__minutes">
<div class="number"></div>
<span class>Minutes</span>
</div>
<div class="countdown__seconds">
<div class="number"></div>
<span class>Seconds</span>
</div>
</div>
<p>Our website is under construction. We`ll be here soon<br />with our new awesome site. Subscribe to be notified.</p>
<form action="">
<input id="form-email" name="form-email" type="email" placeholder="Your email address" />
<input type="submit" value="Notify me" />
</form>
</main>
<footer>
<ul class="footer__links">
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-google-plus"></span></a></li>
<li><a href="#"><span class="fa fa-github"></span></a></li>
<li><a href="#"><span class="fa fa-dribbble"></span></a></li>
</ul>
</footer>
</div>
CSS (сасс)
HTML-часть завершена. Теперь нам нужно добавить немного стиля, чтобы оживить страницу, которая скоро появится. Во-первых, мы позаботимся о самых внешних элементах, таких как html, body и оболочка div. Мы хотим, чтобы следующая страница была полноразмерной. Итак, нам нужно будет выбрать все эти три элемента и установить их height на «100%». Затем мы удалим все padding и margin по умолчанию из элементов html и body. Мы также можем изменить font-size и font-family.
Наконец, мы можем добавить красивый фон к оболочке div, а также тонкое темное наложение. Я выбрал фото из Unsplash, сделанное Anders Jilden. Как создать темный оверлей? Мы будем использовать псевдоэлемент :before для создания слоя полной ширины и полной высоты, который мы наложим поверх обертки. Чтобы отобразить этот слой, нам нужно установить для content значение ». Затем нам нужно будет установить для его position значение «absolute, а для top и left — 0. Наконец, мы добавим полупрозрачный фон.
Код:
html,
body,
.wrapper {
height: 100%;
}
html,
body {
padding: 0;
margin: 0;
}
body {
font: 1rem / 1.516 'Montserrat', Arial, sans-serif;
}
.wrapper {
position: relative;
background: url(https://source.unsplash.com/vZlTg_McCDo/1920x1080) no-repeat center center / cover;
// Dark overlay
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(33, 33, 33, .25);
}
}
Стили для основных частей и заголовка
Пришло время перейти к основной части нашей страницы, которая скоро появится: header, content и footer. Все эти компоненты будут иметь одну общую черту. Все они будут позиционированы «абсолютно». Это даст нам большую гибкость без необходимости использования flexbox. Не поймите меня неправильно. В флексбоксе нет ничего плохого. Здорово очень быстро решить некоторые из самых больших проблем в веб-дизайне. Я люблю использовать его всякий раз, когда я могу. Тем не менее, я хочу, чтобы эта страница скоро работала в старых браузерах, даже в IE8 и 9.
Flexbox не поддерживается в этих старых браузерах. Итак, я решил придерживаться «старой школы» и использовать свойство position со значением «absolute». Когда вы устанавливаете для position какого-либо блочного элемента значение «абсолютно», его ширина уменьшается до ширины содержимого. Мы хотим, чтобы верхний колонтитул и нижний колонтитул были на всю ширину. Итак, мы должны установить width на «100%». Затем мы переместим заголовок вверх и отцентрируем его содержимое (логотип). Наконец, мы можем изменить цвет заливки логотипа и сделать его меньше.
Код:
header,
.content,
footer {
position: absolute;
}
header,
footer {
width: 100%;
}
header {
top: 0;
text-align: center;
}
.header__logo {
max-width: 65px;
fill: #fff;
}
Стилизация содержимого
После того, как закончите с заголовком, следующая часть нашей страницы, которая скоро появится, — это основной контент. Мы центрируем содержимое по горизонтали и вертикали, используя комбинацию top, left и transform. Давайте также центрируем текст и используем белый цвет, чтобы сделать его более заметным на темном фоне наложения. Мы также должны удалить стандартное верхнее поле заголовка. В противном случае контент не будет точно посередине нашей страницы, которая скоро появится.
Следующим в списке идет стилизация формы. Я решил использовать электронную почту и отправлять входные данные рядом друг с другом без пробелов между ними. Для этого мы будем использовать float и установим его в значение «left». Недостатком является то, что это приведет к разрушению формы. Один из способов избежать этого — установить для свойства display формы значение table. Мы также должны центрировать форму, установив для параметра margin значение «авто», чтобы правильно выровнять ее. Для ввода убедитесь, что размер шрифта равен «16 пикселей». Мы также можем использовать более контрастную границу.
Для ввода электронной почты я решил использовать белый фон. фон кнопки будет прозрачным — кнопка-призрак. Оба элемента input будут иметь слегка закругленные границы, 4 пикселя будет достаточно. И мы также должны использовать padding, чтобы добавить немного внутреннего пробела. Когда кто-то наводит курсор на кнопку, фон меняется на белый, а цвет — на черный. Мы можем сделать это изменение более плавным с помощью transition.
Код:
.content {
top: 50%;
left: 50%;
text-align: center;
color: #fff;
transform: translate(-50%, -50%);
h1 {
margin-top: 0;
}
form {
margin: auto;
display: table;
}
input {
float: left;
font-size: 16px;
border: 1px solid #fff;
}
input[type=email] {
padding: 12px;
background: #fff;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
input[type=submit] {
padding: 12px 24px;
color: #fff;
background: transparent;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
transition: all .235s ease-in-out;
&:hover {
color: #212121;
background: #fff;
}
}
}
Стилизация обратного отсчета
Последняя часть основного содержания нашей страницы, которая скоро появится, — это обратный отсчет. Стайлинг будет относительно легкой работой. Во-первых, нам нужно плавать поля для данных о времени, чтобы убедиться, что все поля находятся на одной строке. Нам нужно будет использовать трюк с display установленным на «table», который мы использовали в форме. В противном случае обратный отсчет рухнет. Мы также должны центрировать обратный отсчет, чтобы он был выровнен с остальным контентом. Чтобы сделать его более доминирующим, давайте увеличим font-size и font-weight содержимого.
Теперь мы можем свободно перемещать divs для данных о времени. Эти разделы будут содержать числа. И мы должны использовать некоторую min-width, чтобы размер каждого блока был одинаковым. Последней частью этого компонента обратного отсчета являются элементы span с легендой для обратного отсчета. Эти элементы span будут под номерами (div). Это означает, что нам нужно изменить свойство display на «block». Теперь давайте сделаем легенду более тонкой, уменьшив ее размер шрифта. Кроме того, давайте отцентрируем его.
Мы можем сделать обратный отсчет более эстетичным, добавив тонкий разделитель между числами и легендой. Этого можно добиться с помощью псевдоэлемента :before spans. Во-первых, нам нужно установить position для промежутков на «относительное». Чтобы отобразить псевдоэлемент :before, нам нужно снова использовать content со значением «». Затем мы создадим плоский прямоугольник, используя ширину и высоту, и установим для его фона белый цвет. Наконец, давайте немного поиграем с top, right, left и margin, чтобы расположить его.
Код:
.countdown {
margin: auto;
display: table;
font-size: 28px;
font-weight: 500;
> div {
float: left;
min-width: 80px;
}
span {
position: relative;
display: block;
font-size: 16px;
text-align: center;
&:before {
content: '';
position: absolute;
top: -2px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
width: 20px;
height: 1px;
background: #fff;
}
}
}
Завершение с нижним колонтитулом
Последняя часть или компонент нашей страницы, которая скоро появится, — это нижний колонтитул. Это также будет очень быстрой и легкой работой, так как нижний колонтитул содержит лишь небольшое количество контента. Во-первых, давайте переместим нижний колонтитул в нижнюю часть страницы, используя для свойства bottom значение «0». Ну, немного места под нижним колонтитулом могло бы быть лучше. Итак, давайте добавим небольшое отступ. Далее, давайте отцентрируем ссылки в списке и удалим маркеры по умолчанию. И мы должны установить для display значение «inline-block», чтобы разместить все элементы списка в одной строке.
Этого также можно добиться с помощью поплавков или flexbox. Однако в этом руководстве мы уже много использовали поплавки. Кроме того, поплавки потребуют добавления «исправления отображения». А для флексбокса? Мы обсуждали это уже. Поэтому установка display на «inline-block» — самое простое решение. Мы также должны добавить пространство между отдельными элементами списка с помощью margin. Далее идут ссылки внутри элементов списка. Мы создадим круглые значки одинаковой ширины. Комбинация display, padding, width и border-radius сделает свою работу.
Я придумал значения для padding, попробовав разные значения и выяснив, какое из них будет соответствовать ширине — получится идеальный круг. Одна вещь. Мы должны центрировать текст внутри ссылок. После этого мы можем добавить небольшую белую рамку вокруг значков и изменить их цвет на белый. Для эффекта наведения давайте уменьшим непрозрачность ссылок до «.5». И мы можем сделать этот эффект более плавным с помощью transition.
Наконец, мы можем увеличить размер значков, изменив font-size значков и выровняв их по центру по вертикали. Это все, что касается стилей.
Код:
footer {
padding-bottom: 12px;
bottom: 0;
}
.footer__links {
text-align: center;
list-style-type: none;
li {
display: inline-block;
&:nth-of-type(n+2) {
margin-left: 12px;
}
}
a {
padding: 8px 0;
display: block;
width: 41px;
text-align: center;
color: #fff;
border: 1px solid;
border-radius: 50%;
transition: opacity .235s ease-in-out;
&:hover {
opacity: .5;
}
}
.fa {
vertical-align: middle;
font-size: 21px;
}
}
JavaScript
Последняя часть головоломки или страница, которая скоро появится, заставляет работать обратный отсчет. Для этого мы будем использовать метод setInterval() с объектом Date. Относительно большое количество веб-дизайнеров не любит математику. Ну, это выходит за рамки веб-дизайна. Итак, чтобы сделать этот урок проще и быстрее, я не буду углубляться в математику, необходимую для обратного отсчета. Вместо этого я просто дам вам уравнения. Однако перед этим нам нужно будет добавить некоторый код.
Во-первых, давайте укажем крайний срок и сохраним его в const. Затем мы также можем кэшировать все блоки обратного отсчета заполнителей в consts. Затем мы создаем новый интервал, используя метод setInterval(), который будет повторяться каждую секунду. Внутри этого интервала мы всегда будем хотеть узнать текущую дату и время. Затем мы будем использовать эти данные и крайний срок, чтобы найти расстояние между этими двумя числами. Мы вычтем эти числа.
После этого наступает время для наших волшебных уравнений для расчета данных за оставшиеся дни, часы, минуты и секунды. Наконец, мы будем использовать наши consts с самого начала и innerHTML для вставки данных в HTML. И, поскольку этот интервал должен повторяться каждую секунду, мы установим для параметра delay значение «1000» (1000 миллисекунд).
Код:
(() => {
// Specify the deadline date
const deadlineDate = new Date('December 31, 2017 23:59:59').getTime();
// Cache all countdown boxes into consts
const countdownDays = document.querySelector('.countdown__days .number');
const countdownHours= document.querySelector('.countdown__hours .number');
const countdownMinutes= document.querySelector('.countdown__minutes .number');
const countdownSeconds= document.querySelector('.countdown__seconds .number');
// Update the count down every 1 second (1000 milliseconds)
setInterval(() => {
// Get current date and time
const currentDate = new Date().getTime();
// Calculate the distance between current date and time and the deadline date and time
const distance = deadlineDate - currentDate;
// Calculations the data for remaining days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Insert the result data into individual countdown boxes
countdownDays.innerHTML = days;
countdownHours.innerHTML = hours;
countdownMinutes.innerHTML = minutes;
countdownSeconds.innerHTML = seconds;
}, 1000);
})();
Заключительные мысли о создании простой страницы скоро
Прекрасная работа! Вы только что создали простую страницу «Скоро» с рабочим обратным отсчетом! Надеюсь, вам понравился этот урок. Я также надеюсь, что вы узнали что-то новое, что вы сможете использовать в своем следующем проекте. В конце концов, это было не так уж сложно. Ну, может быть, математика, но я уверен, что вы справились с ней легко.
