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

 

Тоже самое будет происходить, но реже, с минутным, и с часовым блоком, соответственно когда придет время обновлять время. И так, давайте приступим.

Шаг 1. HTML

Разметка будет элементарной, у нас будет три класса, которые вызывают соответственно: часы, минуты и секунды, все это будет обвернуто в класс со значением clock:

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

Анимированные цифровые часы для сайта на JS

Шаг 2. CSS

Теперь нам необходимо стилизовать контейнер, мы не будет прибегать к чему-то аномальному, у нас будет три блока, которые мы окрашиваем в градиентный цвет, кроме этого немного закругляем углы:

Шаг 3. JS

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

Вот и все. Готово!

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

Читайте также: