WebDesignMagazine.ru – Журнал о веб-дизайне

Создаем анимированные часы/таймер при помощи CSS и jQuery

3

В этой статье, мы расскажем вам, как создать красочные и анимированные jQuery/CSS часы в стиле “Halo”, которые помогут вам следить за драгоценным временем.

Демо Скачать урок

Шаг 1 – XHTML

Как обычно, мы начинаем с разметки XHTML. Хитрость состоит в том, что  XHTML не содержится в demo.html, но динамически вставляется в страницу с помощью jQuery.

Это избавляет нас от необходимости вручную вводить блоки кода для каждого из циферблатов (их у нас три: для часов, минут и секунд). В этом разборе кода мы будем предполагать, что дисплеи у наших часов будут трех разных цветов, но в демо-версии я упростил все до одного цвета. Просто мне так больше нравится! ))

Давайте взглянем на XHTML, который вставляется jQuery:

Этот код содержится в jquery.tzineClock / jquery.tzineClock.js. Он генерируется три раза: первый для часов, второй для минут, и третий для секунд. Затем, они анимируются и обновляются каждую секунду.

Существуют три класса, которые присваиваются самому верхнему контейнеру в процессе генерации – зеленый, синий и красный. Мы меняем цвет циферблата путем присвоения того или инного класса.

Переходим к следующему шагу…

clockhalo2

Шаг 2 – CSS

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

demo.html

Эти строки кода, импортируют styles.css и jquery.tzineClock.css на страницу. Первый, стилизует демо страницу, а второй, красочные циферблаты (они являются частью плагина).

Теперь мы можем более внимательно взглянуть на правила CSS:

styles.css

Это все, что необходимо для стилизации демо страницы. Сначала, мы делаем простой сброс CSS, который будет гарантировать, что элементы на странице выглядят одинаково в разных браузерах.

Затем, мы стилизуем body страницы и fancyClock div, в который, мы позже вставим три циферблата. Также центрируем его на экране за счет абсолютной позиции и смещения величины margin.

jquery.tzineClock.css

jquery.tzineClock.css является частью нашего плагина (наряду c jquery.tzineClock.js) и он стилизирует  красочные циферблаты . Контейнер #fcbg является нашей подложкой под циферблаты и показывает границы циферблата.

Одним из наиболее интересных моментов, является использование отдельных правил для стилизации цвета циферблатов.

Подробней об анимации, можно узнать из изображения ниже:

Иллюстрация-анимации

Иллюстрация анимации

 

Шаг 3 – jQuery

Перенос всего JavaScript в плагин делает очень легким повторное использование кода, и в то же время позволяет нам использовать возможности jQuery селекторов и методов.

Чтобы была возможность использовать jQuery библиотеку, мы сначала должны, включить пару скриптов в страницу:

demo.html

Первым файлом, является сама библиотека, включена из Google CDN. Затем, у нас есть плагин и скрипт-файл, который запускает демо.

script.js

Давайте копнём немного глубже в плагин:

jquery.tzineClock.js – Часть 1

Создание плагина для jQuery сводится к определению пользовательской функцию с помощью метода jQuery.fn. Таким образом, ваша функция доступна на любых элементах, которые вы обычно используете на jQuery.

Например, в script.js, мы выбираем  div ширину id fancyClock и используем tzineClock () метод: $ (‘# FancyClock’) tzineClock ();. Элементы, которые мы выбрали, позже передаются tzineClock функции и доступны через “this” свойство.

Поскольку, там может быть выбран более чем один элемент, мы извлекаем только первый из множества с помощью eq(0) метода. Позже, у нас есть setUp() функция, которая вставляет разметки для циферблатов и настраивает интервал, который будет обновлять цифры каждую секунду.

jquery.tzineClock.js – Часть 2

Последние две функции, используемые плагином, это animation и rotateElement. Первая функция обновляет циферблат, в соответствии с переданными значениями (мы также передаем параметр с максимальным значением, для того, чтобы функция могла вычислить вращение).

Вторая функция – вращает переданный элемент. Вращение работает только для Firefox, Safari, Chrome и IE6 +. Internet Explorer не поддерживает CSS3 rotation, используемый другими браузерами, но предоставляет фильтр, который позволяет сделать подобное преобразование.

На этом, наши красочные часы jQuery готовы!

Демо Скачать урок

Источник

Поделиться:
  • Максим

    идея хорошая, но увы реализация не кросплатформенная.

    Рейтинг: 0
  • Денис Томский

    хорошая идея:)

    Рейтинг: 0
  • Роман

    Здравствуйте. Понравилась идея и стиль. Подскажите как из этого сделать таймер ОБРАТНОГО отсчёта, и так чтобы цвета не заполнялись, а убавлялись в кругах? Надеюсь правильно и понятно сформулировал вопрос.
    Спасибо

    Рейтинг: 0