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:

myStimed.style.create({
  // options here 
});

myStimed.style.preset({

  /* 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
myStimed.style.update();

// shows all styles in the console
myStimed.style.logStyles();

// stop
myStimed.time.stop();

// start
myStimed.time.start();

// return time value in HH:MM:SS string format
myStimed.time.get('times');

// return current time of the day in seconds. 
myStimed.time.get('seconds');

// return current time of the day in milliseconds
myStimed.time.get('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.