Щоб надати живності сайту на сьогоднішній день існує безліч цікавих рішень на 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, в результаті в заголовок сторінки вам слід помістити два рядки:
Приклад налаштування розкладу
Після того як ви підключили плагін, ви можете приступити до налаштування розкладу. Для прикладу ми зробимо такий розклад, що за вказаною нами часу плагін буде змінювати фоновий колір тега 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.
У мене на цьому поки все, дякую за увагу, всім всього доброго!
Додав: htmaker, 27.09.2018 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Анімація набору тексту на JQuery плагіні — TypeIt
Рубрика: Html, CSS, Javascript
