jQuery Plugin To Change CSS Styles On Time Update - STIMED.js

File Size: 15 KB
Views Total: 779
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Change CSS Styles On Time Update - STIMED.js

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.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="src/stimed.js"></script>

2. Create a new plugin instance the specify the target time container.

<span class="time"></span>
var myStimed = new $.stimed({
    timeTarget: '.time'

3. Config the plugin by passing the following parameters as an object to the stimed() method:

var myStimed = new $.stimed({
    // Time control
    timeTarget: null,
    fps: 30, // FPS
    timeRunning: true,
    precise: false, // update frequency
    speedUp: 0, //  speedup value to speedup time value
    // Debugging
    debugging: true

4. API methods:

  // options here 


  /* presets here
  preset: 'random values',
  target: '.myText',
  property: 'font-size',
  delay: 5000,
  min: 0,
  max: 10
  /* presets here
  preset: 'rotate',
  target: '.sun',
  from: 90,
  to: 180

  /* presets here
  preset: 'rotate',
  target: '.sun',
  property: '.myText',
  delay: 500,
  brightness: 100

  /* presets here
  preset: 'unsplash',
  target: '.about-bg',
  property: 'background-image',
  delay: 86400/10,
  width: 1280,
  height: 720,
  gravity: 'north',
  preload: true,
  blur: true,
  grayscale: true 


// update style values based on the current time

// shows all styles in the console

// stop

// start

// return time value in HH:MM:SS string format

// return current time of the day in seconds. 

// return current time of the day in milliseconds

// return the current position of time of day between 0-1.
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.