—»     —»   Последний отсчет: добавляем таймер обратного отсчета на страницу Coming Soon
  Раздел: Руководства   Нет комментариев  

Последний отсчет: добавляем таймер обратного отсчета на страницу Coming Soon



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

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

Сегодня мы хотим рассказать вам о том, как создать страницу coming soon с таймером обратного отсчета, реализованного при помощи плагина jQuery Countdows, разработанного Keith Wood.

Необходимые для работы ресурсы:

* Open Sans (Google Font)
* Montserrat (Google Font)
* Reset.css
* Библиотека jQuery
* jQuery-плагин Countdown
* Любое фоновое изображение
* Время и терпение

Структура файлов

Последний отсчет: добавляем таймер обратного отсчета на страницу Coming Soon

Наша файловая структура представляет собой 4 папки и один HTML-файл:

* index.html – этот файл будет использован в качестве основного файла для дизайна
* папка js - для javascript/jQuery
* папка img – для изображений
* папка css – для стилизации (css)

Что мы будем разрабатывать

Последний отсчет: добавляем таймер обратного отсчета на страницу Coming Soon

Скачать исходный код | Демо
Внимание! У вас нет прав для просмотра скрытого текста.


Приступаем к работе

Перед тем как начать, давайте добавим необходимые библиотеки и ссылки в заголовочную часть нашего документа. Среди них можно видеть библиотеки CSS и javascript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name=
"viewport">

<title>Coming Soon with Counter</title>
<link href=
'http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,300,700,800'
rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel=
'stylesheet' type='text/css'>
<link href="css/reset.css" media="screen" rel="stylesheet">
<link href="css/style.css" media="screen" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>

HTML-код

Что касается нашей разметки, то здесь мы обернем все в класс container, в котором будут содержать все наши элементы. Сюда относятся элементы header и section, в которых содержатся стандартные тэги с соответствующими id и классами. Мы также используем стандартный элемент footer, в котором будет содержать текст об авторском праве.

<body>
<div class="container">
<header>
<h1>Our website is Coming Soon</h1>
</header>

<section>
<h2>WE APOLOGIZE FOR INCONVENIENCE</h2>

<p class="details">YOU NEED TO WAIT...</p>

<div id="counter"></div>

<p class="details">SEND ME DETAILS ABOUT IT</p>

<div id="subscribe">
<form action="" id="subscribe-form" method="post" name=
"newsletter-form">
<p class="form-field"><input id="subcribe_email" name=
"subscribe_email" placeholder="Your email" type="email"
value=""></p>

<p class="form-submit"><input id="subscribe_submit" name=
"subscribe_submit" type="submit" value="Notify Me"></p>
</form>
</div>
</section>

<footer>
<a href="http://www.1stwebdesigner.com/" target="_blank">Copyright
- 1stwebdesigner.com - 2014</a>
</footer>
</div>

Обратите внимание на то, что мы использовали id counter перед формой Notify Me. Здесь будет содержаться наш счетчик, и он будет использован в jQuery-коде. Мы также позже зададим соответствующие стили при помощи файла style.css.

На данный момент у вас должно получиться что-то похожее на изображение ниже.

Последний отсчет: добавляем таймер обратного отсчета на страницу Coming Soon

CSS-код

Что касается нашего файла CSS, то здесь мы добавляем стили сначала для основных элементов вроде body, H1, H2 и класса container. Этот класс будет задавать ширину формы в процентном соотношении ради создания эффекта адаптивности. Учтите, что параметр CSS3 transform используется в тэгах H1 и title. Это позволит нашему тэгу title вращаться на 360 градусов по оси X. Чтобы узнать об этом подробнее, вы можете ознакомиться с данным ресурсом.

body {
color: #dadada;
line-height: 1.75;
width: 100%;
background: url(../img/background.jpg)center;
font-family: 'Open Sans';
}

h1,h2{
color: #fff;
line-height: 1.16667;
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px 2px rgba(150,150,150,1);
}

h1 {
font-size: 43px;
font-family: Montserrat;
font-weight: 700;
border: 2px dashed #fff;
margin-top: 50px;
padding: 10px;
cursor: pointer;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}

h1:hover {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
transform: rotateX(360deg);
}

h2 {
font-size: 30px;
font-weight: 300;
margin-top: 30px;
}

.container {
width: 58%;
margin: 40px auto 0;
}

.details {
margin-top: 30px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 2px rgba(150,150,150,1);
}

Далее, давайте применим стилизацию к нашим формам. Этот код задаст базовый стили текстовому блоку и кнопке.

button,input,textarea {
font-size: 16px;
max-width: 100%;
margin: 0;
border-radius: 0;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

textarea {
overflow: auto;
vertical-align: top;
}

input,textarea {
background: #6e6e6e;
background: rgba(169,169,169,0.3);
border: 1px solid #f4f4f4;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
padding: 12px;
text-transform: uppercase;
}

input:focus,textarea:focus {
outline: 0;
}

button:hover,button:focus,input[type=submit]:focus,input[type=submit]:hover {
background: #ff8721;
color: #fff;
outline: 0;
}

button,input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}

button,input[type=submit] {
background: #ffab00;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

.form-field {
position: relative;
}

Нашей следующей целью будет заглушка текстового поля. Здесь для определенных браузеров придется использовать соответствующие префиксы.

::-webkit-input-placeholder {
color: #fff;
}

::-moz-placeholder {
color: #fff;
opacity: 1;
}

::-ms-input-placeholder {
color: #fff;
opacity: 1;
}

.placeholder {
color: #ff;
}

После стилизации заглушки давайте перейдем к счетчику. Если помните, id counter используется для указания позиции счетчика в разметке.

Теперь, чтобы оформить счетчик, мы воспользуемся стандартными классами плагина jQuery Countdown, countdown_section и countdown_amount. count_section содержит ярлык счетчика (то есть, дни, часы, минуты, секунды), а countdown_amount используется для цифрового значения счетчика. Чтобы разделить каждую секцию, воспользуйтесь границей в стиле dashed с 1 пикселем ширины (белого цвета).

#counter {
margin-top: 28px;
}

.countdown_section {
color: #dadada;
display: inline-block;
font-size: 12px;
text-align: center;
width: 25%;
letter-spacing: 1px;
border-left: 1px dashed #dadada;
border-color: rgba(218,218,218,0.8);
padding: 42px 12px 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-shadow: 2px 2px 2px rgba(150,150,150,1);
text-transform: uppercase;
}

.countdown_section:first-child {
border-left: 0;
}

.countdown_amount {
color: #fff;
display: block;
font-family: 'Open Sans';
font-size: 60px;
font-weight: 700;
letter-spacing: normal;
line-height: 1;
}

Теперь, давайте добавим остальные стили к разделу Notify Me. Добавьте максимальную ширину равную 610 пикселя к section и выставите позиционирование на relative. Выровняйте кнопку Submit по правому краю текстового поля, и задайте ей абсолютное позиционирование.

#subscribe {
max-width: 610px;
position: relative;
margin: 20px auto 0;
}

#subscribe-form .form-field {
margin-right: 180px;
}

#subcribe_email {
border-right: 0;
}

#subscribe-form .form-submit {
height: 50px;
position: absolute;
right: 0;
top: 0;
width: 180px;
}

#subcribe_email,#subscribe_submit {
width: 100%;
display: block;
height: 55px;
}

Наконец, добавьте базовые стили для подвала.

footer {
font-size: 13px;
text-align: center;
margin-top: 25px;
text-transform: uppercase;
text-shadow: 2px 2px 2px rgba(150,150,150,1);
}

footer a {
color: #fff;
}

Чтобы весь сайт был адаптивным, добавьте media queries для стилизации определенных элементов на различных размерах экрана. Если вы хотите научиться использовать media queries, то с этой информацией можно познакомиться здесь.

@media only screen and (max-width: 720px) {

footer{margin-bottom: 40px; }
}

@media only screen and (max-width: 680px) {

.countdown_amount {
font-size: 48px;
}
}

@media only screen and (max-width: 540px) {
.one-half {
width: 100%;
}

.countdown_section {
padding: 28px 6px 20px;
}

#subcribe_email{border: 1px solid #fff;}

#subscribe-form .form-submit {
margin: 0 auto;
right: auto;
position: static;
}

#subscribe-form .form-field {
margin: 0 0 14px;
}
}

@media only screen and (max-width: 480px) {
h1 {
font-size: 30px;
}

h2{font-size: 25px;}

.countdown_section {
border: none;
padding: 20px 20px;
font-size: 13px;
text-align: center;
}
.countdown_amount {
font-size: 40px;
padding: 0 0 10px 0;

}

#counter{width: 30%; margin:0 auto;}
}

@media only screen and (max-width: 360px) {
h2{font-size: 22px;}

.countdown_section {
padding: 21px 26px 21px 15px;
}
.countdown_amount {
font-size: 36px;
}
}

Если вы сейчас проверите результат в браузере, то у вас получится примерно следующий результат:

Последний отсчет: добавляем таймер обратного отсчета на страницу Coming Soon

jQuery-код

Обратите внимание на то, что счетчик на данный момент не отображается на странице. Чтобы отобразить его, добавьте jQuery-код перед закрывающим тэгом body. Прежде всего, загрузите плагин jQuery Countdown, указав ссылку на скрипт.

<script type="text/javascript" src="js/jquery.countdown.min.js"></script>

Далее, добавьте следующий код для отображения слайдера. Скопируйте нижеприведенный код под ссылкой на скрипт. В нижеприведенном коде есть переменная launchdata, которая хранит в себе дату.

Вы можете изменить дату запуска в зависимости от ваших требований. Только учтите, что диапазон месяцев указывается от 0 до 11.

В нашем сегодняшнем примере дата запуска намечена на 7 сентября 2014 года. Наконец, используйте id counter для запуска переменной launchdata.

$(document).ready(function() {
var launchdate = new Date(2014, 9 - 1, 7);
$('#counter').countdown({
until: launchdate
});
})(jQuery);

В завершение

Поздравляем! Вы только что создали невероятную страницу «Coming Soon» с счетчиком. Когда посетители открывают страницы такого плана, зачастую они не заходят на нее повторно, особенно если она не несет никакой полезной информации.

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

Надеемся, что вам понравилась эта статья!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 2925   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031