15 скриптов таймера обратного отсчёта на jQuery и CSS3

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

Содержание

Soon Countdown

Устанавливается по принципу «подключил и забыл». Используя визуальный редактор, вы сможете создавать потрясающие счётчики обратного отсчёта для сайта. Выбирайте одну из 15 стандартных настроек или создайте свой уникальный таймер.

flipclockjs

Это расширяемый API для создания часов или таймера обратного отсчёта с эффектом переворота. К нему можно применять темы, используя чистый CSS. Библиотека поддерживает jQuery 1.7+ и prefixfree.js (для анимации).

jQuery Countdown

jQuery- плагин, который позволяет установить таймер обратного отсчета в элемент span или div.

TimeTo

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

jQuery Countdown Timer

Обратный отсчёт формирует «ощущение» срочности, а в сочетании с полем для ввода email-адреса приводит к большему количеству подписок. Этот таймер покажет оставшиеся дни, часы, минуты и секунды до предстоящего события. Он использует анимацию для обновления каждую секунду. Заметьте, что плагин доступен только на Github.

Countdown timer on jQuery Canvas

jCountdown

Настраиваемый jQuery- плагин, который вы сможете использовать на сайте. Попробуйте различные настройки на странице предварительного просмотра.

jquery-countdown

jQuery Countdown – это плагин, который не оставит вас равнодушным.

Free jQuery Count Down Plugin: County

Бесплатный плагин для запуска таймера обратного отсчёта, созданный на основе jQuery и загружаемый с различными вариантами настройки. Он позволяет изменять анимацию, цветовую схему и другие параметры.

CSS Flip-Counter

Из-за отсутствия в этом плагине изображений цифр для таймера вам придётся мириться с различным отображением текста и эффектами трансформации в разных браузерах. То, что хорошо работает в Google Chrome для Mac, имеет проблемы с выравниванием в Google Chrome для Windows.

CSS3 Countdown

countdown clock

Часы обратного отсчёта, созданные на CSS. Срок отсчёта – 1 час. Этот таймер показывает минуты, секунды и сотые доли секунды.

Circular minimal countdown

Лёгкий плагин для отображения простых таймеров в виде анимированных круговых диаграмм, оптимизированных под Retina-экраны.

Данная публикация представляет собой перевод статьи «15 jQuery & CSS3 Countdown Timer Scripts» , подготовленной дружной командой проекта Интернет-технологии.ру