This time I will share jQuery Plugin and tutorial about jQuery Plugin To Change CSS Styles On Time Update – STIMED.js, hope it will help you in programming stack.
| File Size: | 15 KB |
|---|---|
| Views Total: | 708 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
STIMED.js is a simple, fancy jQuery plugin that has the ability to dynamically change/update the CSS styles depending on the current time. Fully customizable and controllable to meet your needs.
Basic usage:
1. Include the JavaScript file STIMED.js after jQuery library and the STIMED.js is ready for use.
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="src/stimed.js"></script> |
2. Create a new plugin instance the specify the target time container.
1 |
<span class="time"></span> |
1 |
var myStimed = new $.stimed({ |
2 |
timeTarget: '.time' |
3 |
}); |
3. Config the plugin by passing the following parameters as an object to the stimed() method:
01 |
var myStimed = new $.stimed({ |
02 |
// Time control |
03 |
timeTarget: null, |
04 |
fps: 30, // FPS |
05 |
timeRunning: true, |
06 |
precise: false, // update frequency |
07 |
speedUp: 0, // speedup value to speedup time value |
08 |
// Debugging |
09 |
debugging: true |
10 |
}); |
4. API methods:
01 |
myStimed.style.create({ |
02 |
// options here |
03 |
}); |
04 |
05 |
myStimed.style.preset({ |
06 |
07 |
/* presets here |
08 |
preset: 'random values', |
09 |
target: '.myText', |
10 |
property: 'font-size', |
11 |
delay: 5000, |
12 |
min: 0, |
13 |
max: 10 |
14 |
*/ |
15 |
|
16 |
/* presets here |
17 |
preset: 'rotate', |
18 |
target: '.sun', |
19 |
from: 90, |
20 |
to: 180 |
21 |
*/ |
22 |
23 |
/* presets here |
24 |
preset: 'rotate', |
25 |
target: '.sun', |
26 |
property: '.myText', |
27 |
delay: 500, |
28 |
brightness: 100 |
29 |
*/ |
30 |
31 |
/* presets here |
32 |
preset: 'unsplash', |
33 |
target: '.about-bg', |
34 |
property: 'background-image', |
35 |
delay: 86400/10, |
36 |
width: 1280, |
37 |
height: 720, |
38 |
gravity: 'north', |
39 |
preload: true, |
40 |
blur: true, |
41 |
grayscale: true |
42 |
*/ |
43 |
44 |
}); |
45 |
46 |
// update style values based on the current time |
47 |
myStimed.style.update(); |
48 |
49 |
// shows all styles in the console |
50 |
myStimed.style.logStyles(); |
51 |
52 |
// stop |
53 |
myStimed.time.stop(); |
54 |
55 |
// start |
56 |
myStimed.time.start(); |
57 |
58 |
// return time value in HH:MM:SS string format |
59 |
myStimed.time.get('times'); |
60 |
61 |
// return current time of the day in seconds. |
62 |
myStimed.time.get('seconds'); |
63 |
64 |
// return current time of the day in milliseconds |
65 |
myStimed.time.get('milliseconds'); |
66 |
67 |
// return the current position of time of day between 0-1. |
68 |
myStimed.time.get('position', decimal) |
This awesome jQuery plugin is developed by creatide. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
