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

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

var user_configuration={

    // "circle" or "square"

    // star size in pixels

    // final size of the stars after expansion 

    // how fast the stars get bigger, in milliseconds

    // how long until the star fades out

    // how long the star fades for

    // 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)

    // 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)

    // the elements the script will target based on the class name


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

    //the stars are absolutely positioned, so you can give them a z-index of whatever you wish

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