Stimed – задаем CSS-стили по времени

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

Плагин Stimed.js

Stimed.js – это jQuery плагин который позволяет изменять CSS-стили в зависимости от времени суток. Это может оказаться весьма удобным, когда есть необходимость менять некоторые CSS-свойства элементов на странице. Допустим, вам нужно менять палитру на странице в зависимости от времени суток, спрятать некоторые элементы характерные для конкретного времени суток, либо нужно переместить элементы на экране. На самом деле задач с привязкой ко времени суток может быть предостаточно, в виду универсальности плагина использовать его можно для разных целей.

Как скачать плагин Stimed.js

Проект живет на GitHub-е, и поддерживается разработчиком:
https://github.com/creatide/stimed

Чтобы воспользоваться данным плагином, вам необходимо скачать его исходные файлы, и поместить в директорию своего проекта. Скачать исходники можно посредством нажатия Download ZIP.
Либо вы так же можете плагин по этой ссылке:
https://github.com/creatide/stimed/archive/master.zip

Как подключить плагин Stimed.js

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="stimed.min.js"></script>

Пример настройки расписания

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

var stimed = new $.stimed();

stimed.style.create([
  {target:'body', time:'00:00', property:'background-color', value:'#fff'},
  {target:'body', time:'18:00', property:'background-color', value:'#000'},
  {target:'body', time:'24:00', property:'background-color', value:'#fff'}
]);

Наверное, вы уже поняли назначение указанных параметров:
target — указывается имя элемента;
time – время, когда параметр будет срабатывать;
property – свойство CSS, для которого мы задаем значение;
value – значение свойства;

Плагин настраивается довольно просто, посмотреть другие возможности конфигурации плагина вы можете на сайте проекта stimed.creatide.com.
У меня на этом пока всё, благодарю за внимание, всем всего доброго!