Look at the stars … and see code

starryNight plugin API

This is an update to my previous post. I wrote nice to look at animation on top of jQuery called starryNight. It takes a <div> element and add moving stars on top of it.  Stars are slowly floating across the sky, and when they finally flow out of the sky (or <div> in our case), they are automatically reborn on the other side on some random position.  That sounds pretty straightforward, and indeed it was until I complicated it by adding slider, more on that later.  Now to the API.

Basic HTML structure – provided by you – should look something like this

<style>
 #starryNightExample {
  background: url('/path/to/your/image_of_starry_sky.jpg') no-repeat;
  width: 500px;
  height: 400px;
 }
</style>

<div id="starryNightExample"></div>

I think that’s quite self explanatory. Without specifying width, height and background image it will look just ugly 🙂

Once you have your HTML structure ready just call .starryNight() to get the stars moving.

$(function() {
  $('#starryNightExample').starryNight();
});

The public API methods are:

• count (int) – sets number of stars
• addStars (int)
• removeStars (int)
• generateSlider (bool) – whether UISlider should be generated

Both addStars() and removeStars() are called internally by count() and all three of them accept positive integers only.

The methods are called like this:

$('#starryNightExample').starryNight('count', 150);

So that’s basically it … Next time I’ll write something more serious, I promise 🙂

See the live demo here.