STIMED.js
jQuery plugin for controlling CSS styles over time.
00:00:00Getting Started
It's quite simple to use. Just follow these steps to make it work!
1. Download the Plugin
2. Include the Script to Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="stimed.min.js"></script>3. Initialize & Create Styles
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'}
]);About
STIMED.js is a jQuery plugin for controlling CSS styles over time. There are almost endless possibilities for using timed CSS properties. You could change webpage colors to make them more calm at night and more contrast during daytime, or hide a specific element in a certain time, or just move an element in sync with time...
I've created this plugin based on an idea about time synced CSS styles and because I didn't find a library for this kind of task. Keep in mind that this plugin is still just a proof of concept and for testing purposes only. Maybe you could find it useful or contribute and make it better!
Settings
There are a couple options for using STIMED.js. You can declare options while creating a new object or later on by changing the object property value.
Config Along With New Object
var stimed = new $.stimed({
timeTarget: '.textElement',
fps: 30,
speedUp: 500,
precise: true,
timeRunning: true,
debugging: false
});Change Options Later
var stimed = new $.stimed();
...
stimed.settings.debugging = true;
stimed.settings.fps = 10;
Available Options
| Setting | Value | Description |
|---|---|---|
timeTarget |
id/class |
Set target id or class of HTML text element where you want to show time value. |
timeRunning |
true/false |
Can be used to start or stop time running. |
precise |
true/false |
Set update frequency in milliseconds. |
debugging |
true/false |
Show or hide console log debugging messages. |
fps |
number |
How many frames per second we update the values. This also increases smoothness if using precise mode that updates values in milliseconds. |
speedup |
number |
Set speedup value to speedup time value. This was created for debugging in order to see how everything works when normal time is too slow to wait. |
Objects
After the stimed main object is created there are two main object methods style and time available. More important is the style object that will be used for creating new styles. Time object will be run by default, so it's optional to use.
Style
Style is mainly for creating new styles and using presets. It also contains some debugging and manual update calls if time is not running.
var stimed = new $.stimed();
...
stimed.style.create({
target: '.className',
time: '10:00',
property: 'color',
value: '#fff'
});
stimed.style.preset({
preset: 'rotate',
target: '.sun'
});
stimed.style.update();
stimed.style.logStyles();
Style Methods
| Method | Description |
|---|---|
create({...}) |
Create new style objects. Required parameters for every style object are target, time, property and value. Styles do not work without these values and you'll see errors in the console if something goes wrong. Separate multiple styles into individual objects like: {...}, {...} or inside of an array [{...}, {...}] |
update() |
Update style values based on the current time even when time is not running. This can be used for manually calling an update for styles if you want to use your own timers or want to update styles only once. |
logStyles() |
Shows all styles in the console if debugging is enabled in plugin settings. |
preset({...}) |
There are a couple of presets bundled to plugin. |
Time
Time methods are meant for controlling time and getting some time values.
var stimed = new $.stimed();
...
stimed.time.stop();
stimed.time.start();
stimed.time.get('seconds');
Time Methods
| Method | Description |
|---|---|
start() |
Start to run time. This will change setting timeRunning to true state. |
stop() |
Stop time running. This will change setting timeRunning to false state. |
get('time') |
Returns time value in HH:MM:SS string format. |
get('seconds') |
Returns current time of the day in seconds. There are 86400 seconds in one day and this is the value of the current second of the day. |
get('milliseconds') |
Same as for seconds but this returns current time of the day in milliseconds. |
get('position', decimal) |
Returns the current position of time of day between 0-1. So time 12:00:00 will return to 0.5 value. Second "decimal" parameter is optional. By default position value returns with two decimals 0.94 but with this it can be increased to more precise like 0.0943. |
Presets
Preset is part of the style object. There are a couple of presets by default. All presets need target HTML element and some of the presets have optional parameters.
Available Presets
Rotate
Rotates 360 degrees in one day by default. This is only a shortcut for CSS rotation even though it's quite easy to setup manually without preset.
| Parameter | Default | Description |
|---|---|---|
target |
- | html element (required). |
from |
0 | Starting degree value for time 00:00. |
to |
360 | End degree value for time 24:00. |
stimed.style.preset({
preset: 'rotate',
target: '.sun',
from: 90,
to: 180
});
| Parameter | Default | Description |
|---|---|---|
target |
- | html element (required).. |
property |
font-size | CSS target property. |
delay |
1000 | Delay value in seconds between numbers. Too small of a delay values can decrease perforamnce. |
min |
40 | Minimum value for range of random numbers. |
max |
100 | Maximum value for range of random numbers. |
unit |
px | What kind of unit for suffix will be used in CSS values e.g. 10px or 1em. |
stimed.style.preset({
preset: 'random values',
target: '.myText',
property: 'font-size',
delay: 5000,
min: 0,
max: 10
});
Random Colors
Random colors for targeting CSS property. Colors can be randomized using brightness of the color value.
| Parameter | Default | Description |
|---|---|---|
target |
- | html element (required). |
property |
color | CSS target property. |
delay |
1000 | Delay value in seconds between colors. Small delay values that are too small can decrease performance. |
brightness |
0 | Adjust brightness value of the random colors between 0-255. |
stimed.style.preset({
preset: 'rotate',
target: '.sun',
property: '.myText',
delay: 500,
brightness: 100
});
Random Unsplash Image
Get randomly selected Unsplash images using great Unspash It service.
| Parameter | Default | Description |
|---|---|---|
target |
- | html element (required). |
property |
background-image | CSS target property. |
delay |
1000 | Delay value in seconds between images. Small delay values that are too small can decrease performance. |
preload |
true | Try to preload images to avoid flickering. |
width |
1920 | Width of the image. Use lower resolution to make it faster. Big images takes more bandwidth. |
height |
1080 | Width of the image. Use lower resolution to make it faster. Big images takes more bandwidth. |
blur |
false | Add blur effect to image. |
grayscale |
false | Add grayscale effect to image. |
gravity |
false | Select the cropping gravity by adding keyword: north, east, south, west or center to the parameter. |
stimed.style.preset({
preset: 'unsplash',
target: '.about-bg',
property: 'background-image',
delay: 86400/10,
width: 1280,
height: 720,
gravity: 'north',
preload: true,
blur: true,
grayscale: true
});
Contribute
If you think you can improve this plugin with your superb skills you are welcome to fork the project and create pull request.
Cookies & Privacy Policy
To make this site work properly, we sometimes place small data files called cookies on your device. Cookies allow us to give you the best browsing experience possible and help us understand how you use our site.
A cookie is a small text file that a website saves on your computer or mobile device when you visit the site. It enables the website to remember your actions and preferences (such as login, language, font size and other display preferences) over a period of time, so you don’t have to keep re-entering them whenever you come back to the site or browse from one page to another.
This Website Will Collect Information Like:
- Cookies and Usage Data for Google Analytics.
- See what website you came from to get here.
- How long you stay here.
- What kind of computer and/or browser you're using.
- Allow you to share pages with social networks such as Twitter or Facebook.
This Website Will NOT:
- Share any personal information with third parties.
How to Control Cookies
You can control and/or delete cookies as you wish – for details, see aboutcookies.org. You can delete all cookies that are already on your computer and you can set most browsers to prevent them from being placed. If you do this, however, you may have to manually adjust some preferences every time you visit a site and some services and functionalities may not work.
Google Analytics - Privacy Policy
Google Analytics is a web analysis service provided by Google. Google utilizes the data collected to track and examine the use of this web page, to prepare reports on its activities and share them with other Google services.
Google may use the data collected to contextualize and personalize the ads of its own advertising network. Read Google Analytics Terms of Service to get more info about how Google Analytics use your personal data.
Want to Opt Out of Tracking
You can use a browser plugin to opt out of all Google Analytics tracking software or opt out of Google’s advertising tracking cookie.
Webpage Disclaimer
The information contained in this website is for general information purposes only. The information is provided by us and while we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.
In no event will we be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.
Through this website you are able to link to other websites which are not under the control of us. We have no control over the nature, content and availability of those sites. The inclusion of any links does not necessarily imply a recommendation or endorse the views expressed within them.
Every effort is made to keep the website up and running smoothly. However, we takes no any responsibility for, and will not be liable for, the website being temporarily unavailable due to technical issues beyond our control.
All copyrights belong to their respective owners.
Software Disclaimer
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRAN- TIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.