В одном из предыдущих уроков мы уже разбирали создание стрелочных часов с использованием CSS и JavaScript. В данном уроке такие же часы сделаем с использованием CSS3, чтобы посмотреть, насколько новый стандарт изменяет подход к разработке различных эффектов. Демонстрация для данного урока будет работать только в тех браузерах, которые поддерживают свойство CSS3 rotate (в IE6 демонстрация НЕ РАБОТАЕТ).
CSS3 Transform:rotate
Transform:rotate - новое свойство CSS 3, которое позволяет поворачивать различные элементы. С помощью трансформаций можно также изменять масштаб элементов, вводить искажения по горизонтали и вертикали, перемещать элементы по веб странице. Все это может быть анимировано с помощью свойства transition (с разными типами переходов и длительностью).
Такие же действия по анимации элементов страницы можно выполнять с помощью какой-нибудь библиотеки JavaScript (например, jQuery). Конечно, с помощью jQuery можно анимировать изменение гораздо большего количества свойств CSS, чем с помощью transition. Но jQuery является встроенным средством CSS, библиотеки JavaScript - внешние инструменты, которые могут быть и недоступны. В любом случае, CSS3 открывает новые перспективные направления для развития разработчика.
Графика
Сначала надо сделать графический интерфейс для часов. У нас будет основание и три стрелки. Все движущиеся части нарезаны в Photoshop по размерам 600px в высоту и 30px в ширину, и позиционируются вертикально, а по умолчанию свойство rotate вращает элемент вокруг центра. Можно использовать свойство transform-origin для того, чтобы установить центр вращения в другую точку.
Для основания часов можно использовать какое угодно изображение. Движущиеся части являются изображениями формате PNG с прозрачностью.
Разметка HTML
Разметка для часов - простой неупорядоченный список. Каждый элемент списка содержит движущуюся часть и имеет соответствующий id:
<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>
CSS
#clock {
position: relative;
width: 600px;
height: 600px;
margin: 20px auto 0 auto;
background: url(clockface.jpg);
list-style: none;
}
#sec, #min, #hour {
position: absolute;
width: 30px;
height: 600px;
top: 0px;
left: 285px;
}
#sec {
background: url(sechand.png);
z-index: 3;
}
#min {
background: url(minhand.png);
z-index: 2;
}
#hour {
background: url(hourhand.png);
z-index: 1;
}
CSS также является весьма простым. Так как движущиеся части имеют одинаковые размеры и начальные точки, то мы можем объявить их вместе, чтобы избежать повторения. Элемент ul получает относительное позиционирование, что позволяет использовать абсолютное позиционирование для расположенных в нем стрелок.
CSS3 будет применяться с помощью небольшого кода jQuery.
JavaScript
Получаем время для часов
Вычисляем и вставляем стили CSS (угол вращения) для каждого элемента.
Обновляем стили CSS через равные промежутки времени.
Следует отметить, что jQuery отлично работает с новыми свойствами CSS3. Кроме того, так как стили добавляются динамически, то CSS файл проходит проверку как CSS2.1!
Получаем время
Время можно получать и с помощью PHP кода, но это будет время сервера. А JavaScript возвращает локальное время пользователя.
Мы будем получать информацию с помощью Date() и установим все наши переменные. Будем использовать соответственно GetSeconds(), GetMinutes() или GetHours() для Date() чтобы установить соответственно секунды, минуты и часы:
var seconds = new Date().getSeconds();
В выше приведенной строчке будет получено число из промежутка от 0 до 59 и присвоено переменной seconds.
Определяем угол
Затем надо вычислить угол вращения для каждой стрелки. Для секундной и минутной стрелок, которые имеют 60 положений на часовом круге, нам нужно разделить 360 градусов на 60, что даст нам число 6. То есть каждая секунда или минута соответствует повороту на 6 градусов. Будем хранить результат вычислений в другой переменной. Для секунд код выглядит так:
var sdegree = seconds * 6;
Для часов вычисления будут другими. Так как у нас циферблат с 12 положениями для часовой стрелки, то каждому часу соответствует угол поворота на 30 градусов (360/12=30). Но часовая стрелка должна находиться и в промежуточных состояниях, то есть, она должна сдвигаться с каждой минутой. То есть в 4:30 часовая стрелка должна находиться на полпути между 3 и 4 часами. Вот как мы это сделаем:
var hdegree = hours * 30 + (mins / 2);
То есть мы добавляем к углу поворота на количество часов еще и значение деления количества минут на 2 (что даст нам величину в диапазоне от 0.5 до 29.5). Таким образом, часовая стрелка будет "довернута" на угол от 0 до 30 градусов (часовой инкремент).
Например:
2 часа 40 минут -> 2*30 = 60 градусов и 40/2 = 20 градусов. Итого: 80 градусов.
Можно предположить, что часы покажут невесть что после 12, так как значение поворота будет больше 360 градусов. Но все работает отлично.
Теперь у нас все готово, чтобы вставлять правила CSS.
Устанавливаем стиль
Вот как выглядит правило CSS3 rotate в таблице стилей:
#sec {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
А вот так будет осуществляться вставка кода с помощью jQuery:
$("#sec").css({"-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"});
Проблема заключается только в том, чтобы выставить полученное значение угла в переменной 'sdegree' в синтаксис вместо 45 градусов. Нужно построить строку в другой переменной srotate и полностью заменить второй аргумент. Вот так:
var srotate = "rotate(" + sdegree + "deg)";
А код jQuery будет выглядеть вот так:
$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
Собираем все вместе
Код jQuery будет выглядеть следующим образом:
$(document).ready(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";
$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
}, 1000 );
setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
}, 1000 );
setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
}, 1000 );
});
Мы используем функцию JavaScript setInterval для обновления стилей каждую секунду. Переменные, которые получают значения времени должны обновляться в ней. Иначе часы станут бесполезным мусором на странице.
Заключение
В данном уроке продемонстрировано практическое применение свойства rotate не связанное с дизайном.