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.