jQuery背景动画特效插件starlight.js_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

starlight.js是一款jQuery背景动画特效插件。该插件可以为页面添加随机动画的星星、圆形或其它形状的背景动画特效。

使用方法

在页面中引入下面的文件。

<script src="/path/to/jquery.js"></script>
<script src="/path/to/starlight.js"></script>

HTML结构

为你想要添加背景动画的容器添加starlight class。

<body class="starlight">
  content here
</body>

配置参数

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'

};

该jQuery背景动画特效插件的github网址为：https://github.com/sergei1152/Starlight.js