A twinkling visual effect javascript library View Demo
A highly configurable javascript library for creating "twinkling star" effects. You can easily customize every aspect of it to fit the needs of your website. You can apply the effect to more than one element as well. Great for banners!
Download the zip and copy the starlight.js file from the starlight folder then embed in your html:
<script src="starlight/starlight.js"></script>
<div class="starlight"></div>
Customizing the libary is very easy. Just edit the user_configuration options in the
starlight.js file.
The options available are listed here:
Could be either "circle" or "square"
The starting size of the stars when they spawn (eg "32px")
The final size of the stars after expansion. Could also be the same as initial size if you don't want the stars to expand (eg "64px")
How long the stars take to expand/shrink (in CSS time. eg "1s")
The delay until the stars begin to fade out (in CSS time. eg "1s")
How long the star will take to fade out (in CSS time. eg "0.5s")
Possible colors of the stars, each of which will be randomly chosen during spawning. Can be any CSS complient color (eg. "rgba(255,255,255,0.5)")
Delay between star spawns in milliseconds(eg. 250)
How many stars will spawn per wave (eg 5)
true or false: Whether the stars will fade out
true or false : Whether the stars will rotate
How much of the element's area the stars will show up in (0-1 eg 0.75 will cover 75%)
Elements that the stars will spawn in. Can be any class, element, or id (eg ".starlight")
Not Supported Yet: If you want to use your own SVG instead of just a circle or a square
There are also more advanced settings that you can configure by modifying the advanced_configuration options.
Changing these settings isn't really necessary unless you don't like how some of the transitions play.