Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

jQuery Countdown — эффектный таймер обратного отсчета на JavaScript

Сегодня у нас на повестке дня будет один довольно простой и легкий, но в то же время очень эффектный таймер обратного отсчета на JavaScript — jQuery Countdown. Скрипт таймера весит всего 3.6 Кб, а его интеграция на сайт не потребует от вас особых усилий, тем более, что мы разберем весь процесс установки подробно.

jQuery Countdown — эффектный таймер обратного отсчета на JavaScript
Содержание статьи

Таймер обратного отсчета в маркетинге

auction-hammerВозможно вам уже доводилось сталкиваться с таймерами обратного отсчета на различных сайтах. Чаще всего таймер используется в контексте какого-нибудь специального предложения, срок действия которого истекает. Дело в том, что на товар или услугу можно установить совершенно обычную цену, но при этом выставить ее как скидочную. Срок действия специального предложения при этом ограничен, а таймер обратного отсчета призван как раз для того, чтобы подстегнуть потенциального клиента на совершение целевого действия (добавления в корзину, звонку, онлайн-заказу и так далее).

Так уж устроена психология людей и ничего с этим не поделать. Если вы смотрите на большой стеллаж с винами и все их ценники стандартного белого цвета, то ничто не привлекает ваше внимание. В большинстве случаев, люди не сильно разбираются в винах, тем более, когда перед вами витрина, на которой их несколько сотен. Главным критерием выбора при этом становится цена. Что в таком случае делают маркетологи? Случайным образом (или не случайным) выбирают из всего ассортимента 1-2 бутылки и делают на них акцию. Цвет ценника при этом меняется, например, на желтый. При беглом осмотре такой витрины, первым делом человек обратит внимание на выбивающиеся из общей массы элементы. А маркетологи именно этого внимания и добивались.

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

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

Кроме того, подобный таймер можно использовать для анонсирования какого-нибудь предстоящего события. Данный прием придаст ему еще больше значимости и создаст дополнительный ажиотаж. Опять же все основано на человеческой психологии.

Установка таймера обратного отсчета на сайт

optimizationНу а теперь, когда мы убедились в пользе таймера, самое время разобраться с его установкой. Сразу хочется отметить, что в интернете можно найти довольно много разновидностей подобных таймеров и многие из них так и называются — jQuery Countdown. Однако содержимое файла jquery.countown.js во всех отличается и не существует какого-то единого скрипта с таким названием. Просто это название используют все кому не лень.

Нам доводилось сталкиваться с довольно сложными в установке и «тяжелыми» скриптами, которые весили по 60 килобайт, а в скачанном архиве было более 50 файлов. Такие варианты мы сразу же отсеивали, пока, наконец, не нашли самый простой вариант. В архиве всего 2 файла, один из них сам JavaScript, а второй — спрайт с необходимыми изображениями. Ссылки на необходимые файлы будут в конце статьи.

HTML разметка

HTML разметка очень проста и интуитивно понятна. В нашем примере мы обернули все элементы в контейнер с классом cd-wrapper, чтобы выровнять его по центру экрана. Затем мы использовали основной контейнер, в котором будут происходить все процессы обратного отсчета и назвали его просто cd (от count down). Сразу за этим контейнером следуют подписи к дням, часам, минутам и секундам. На этом вся разметка собственно и заканчивается.

<div class="cd-wrapper">
	<div id="cd"></div>
	<div class="d">
		<div>Дни</div>
		<div>Часы</div>
		<div>Минуты</div>
		<div>Секунды</div>
	</div>
	<div class="clear"></div>
</div>

При необходимости, дни, часы, минуты и секунды можно менять местами, но тогда нужно будет вносить изменения и в сам JavaScript, в котором есть данная опция. Вопрос только в том, а нужно ли это на самом деле?

CSS стили

Слегка поработав со стилями мы установили необходимые отступы элементов, настроили положение двоеточий и выровняли их по вертикали относительно изображений с цифрами. Если вы захотите поменять значения отступов, то для этого вам нужно будет хорошенько вникнуть в разметку и стили. Более того, в самом файле jquery.countown.js есть дополнительные настройки ширины и высоты изображений. Также там устанавливается относительный путь к необходимому для работы таймера единственному изображению. В нашем случае это './i/digits.png', а в вашем путь, скорее всего, будет отличаться, поэтому обязательно обратите на это внимание.

.cd-wrapper {
	display: inline-block;
	margin: 0 auto;
}
.cntSeparator {
	font-size: 50px;
	line-height: 70px;
	margin: 0 10px;
}
.cd-wrapper .d div {
	float: left;
	text-align: center;
	width: 104px;
	font-weight: bold;
	text-transform: uppercase;
	margin: 10px 0 0 36px;
}
.cd-wrapper .d div:first-child {
	margin-left: 1px;
}
.clear {
	clear: both;
}

JavaScript

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

<script src="./js/jquery.countdown.js"></script>

Завершающим шагом будет инициализация функции в любом удобном для вас месте страницы. Это можно сделать внутри контейнера head, а можно и рядом с HTML разметкой. Самое главное, чтобы селектор в вызове функции countdown() был таким же как в HTML разметке. В нашем случае это идентификатор cd.

$(function() {
	$('#cd').countdown({
		startTime: '03:23:17:25'
	});
});

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

Необходимые файлы

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

  • jquery.countdown.js [3.6 Кб];
  • digits.png [23.7 Кб] (в зависимости от того, куда вы его загрузите, путь к этому изображению нужно будет указать в файле jquery.countdown.js).

Пример jQuery Countdown в действии

А вот что у нас с вами в итоге получилось. Симпатичный, а главное, кроссбраузерный и очень простой в установке и настройке таймер обратного отсчета.

открыть в новой вкладке



Предыдущая статья:
Увеличение фрагмента изображения при наведении курсора мышки

Читайте также:
Преимущества использования видеороликов на посадочных страницах сайта

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»