Customizable Twinkling Stars Effect In jQuery - Starlight.js

File Size: 6.97 KB
Views Total: 4633
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable Twinkling Stars Effect In jQuery - Starlight.js

Starlight.js is a simple jQuery plugin for creating twinkling visual effects on the background that randomly animates stars (squares or circles) based on the frequency and density defined by the user.

How to use it:

1. Load the starlight.js library after you've loaded the latest jQuery library.

<script src="/path/to/jquery.js"></script>
<script src="/path/to/starlight.js"></script>

2. Add the CSS class starlight to any container element you want to generate the twinkling visual effect.

<body class="starlight">
  content here
</body>

3. Customize the twinkling visual effect by overriding the following options.

var user_configuration={

    // "circle" or "square"
    shape:"circle",

    // star size in pixels
    initial_size:"12px",

    // final size of the stars after expansion 
    final_size:"64px", 

    // how fast the stars get bigger, in milliseconds
    expand_speed:"1s", 

    // how long until the star fades out
    fade_delay:"0.5s", 

    // how long the star fades for
    fade_duration:"0.5s", 

    // The variety of colors of the stars. Can be any CSS complient color (eg. HEX, rgba, hsl)
    colors:["hsla(62, 50%,50%, 0.5)", "rgba(255,255,255,0.5)","hsla(180, 72%, 52%, 0.5)"], 

    // how often a new wave of stars pop-out (in milliseconds. Bigger==longer)
    frequency:100, 

    // how many stars pop out per wave
    density: 1,

    // whether the stars disappear after they are created
    keep_lit: false, 

    // whether the stars rotate through out their expansion
    rotation: true, 

    // how much of the element's area the stars will show up in (0-1)
    coverage:1, 

    // the elements the script will target based on the class name
    target_class:'.starlight'

};

4. Advanced settings to customize the stars.

var advanced_configuration={

    // could be ease, ease-in, ease-out, etc
    expand_transition_timing: "linear", 

    // how long until the star starts to expand
    expand_delay: "0s",  

    // could be ease, ease-in, ease-out, etc
    rotation_transition_timing: "linear",  

    // up to how much to rotate to
    rotation_angle: "360deg", 

    // how long the rotation will take place
    rotation_duration: "1s", 

    // how long until rotation starts
    rotation_delay: "0s", 
    
    // could be ease, ease-in, ease-out, etc
    fade_transition_timing:"linear", 

    //the stars are absolutely positioned, so you can give them a z-index of whatever you wish
    z_index:0 
    
};

This awesome jQuery plugin is developed by sergei1152. For more Advanced Usages, please check the demo page or visit the official website.