Customizable Twinkling Stars Effect In jQuery - Starlight.js
| File Size: | 6.97 KB |
|---|---|
| Views Total: | 4713 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
